@atlaskit/user-picker 11.0.8 → 11.0.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/user-picker
 
+## 11.0.10
+
+### Patch Changes
+
+- [#142842](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142842)
+  [`63265d6000c11`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63265d6000c11) -
+  Internal change to migrate to Compiled CSS-in-JS styling.
+
+## 11.0.9
+
+### Patch Changes
+
+- [#137751](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137751)
+  [`bffaf88f6c035`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bffaf88f6c035) -
+  Add support for a clear indicator
+
 ## 11.0.8
 
 ### 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 = "11.0.8";
+var packageVersion = "11.0.10";
 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/ClearIndicator.compiled.css

@@ -0,0 +1,8 @@
+
+._v5641ppt{transition:color .15s,opacity .15s}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._tzy4kb7n{opacity:1}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._30l3s4qr:hover{color:var(--ds-icon-danger,#c9372c)}
+@media (hover:hover) and (pointer:fine){._1mhjidpf{opacity:0}}

package/dist/cjs/components/ClearIndicator.js

@@ -1,3 +1,4 @@
+/* ClearIndicator.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ClearIndicator = void 0;
+require("./ClearIndicator.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -30,6 +33,9 @@ var AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
     };
   });
 });
+var clearIndicatorStyles = {
+  root: "_v5641ppt _tzy4kb7n _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _30l3s4qr _1mhjidpf"
+};
 var ClearIndicator = exports.ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
   function ClearIndicator() {
     var _this;
@@ -62,7 +68,8 @@ var ClearIndicator = exports.ClearIndicator = /*#__PURE__*/function (_React$Pure
       var Indicator = /*#__PURE__*/_react.default.createElement(_select.components.ClearIndicator, (0, _extends2.default)({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
-        })
+        }),
+        xcss: clearIndicatorStyles.root
       }));
       return clearValueLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
         fallback: Indicator

package/dist/cjs/components/Control.compiled.css

@@ -0,0 +1,20 @@
+
+._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._19bvidpf{padding-left:0}
+._1a98kb7n:hover .fabric-user-picker__clear-indicator{opacity:1}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._p12f1osq{max-width:100%}
+._u5f3idpf{padding-right:0}
+._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._4cvx1p6i:hover{border-color:var(--ds-border-focused,#388bff)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31gly:hover{background-color:var(--ds-background-danger,#ffeceb)}
+._irr31j9a:hover{background-color:var(--ds-background-input,#fff)}
+._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}

package/dist/cjs/components/Control.js

@@ -0,0 +1,30 @@
+/* Control.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./Control.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _select = require("@atlaskit/select");
+var _react2 = require("@compiled/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var controlStyles = {
+  invalid: "_1h6d1bqt _4cvx1bqt",
+  focused: "_1h6d1p6i _bfhk1j9a _4cvx1p6i _irr31j9a",
+  disabled: "_irr3syzs",
+  subtle: "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31gly",
+  root: "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1h6d1elr _bfhk1j9a _p12f1osq _4cvx1elr _irr31d5g _1a98kb7n"
+};
+var Control = function Control(props) {
+  return /*#__PURE__*/React.createElement(_select.components.Control, (0, _extends2.default)({}, props, {
+    xcss: (0, _react2.cx)(controlStyles.root, (props.selectProps.subtle || props.selectProps.noBorder) && controlStyles.subtle, props.isFocused && controlStyles.focused, props.isInvalid && controlStyles.invalid, props.isDisabled && controlStyles.disabled)
+  }));
+};
+var _default = exports.default = Control;

package/dist/cjs/components/Input.compiled.css

@@ -0,0 +1,5 @@
+._1ir3kb7n input::-ms-input-placeholder{opacity:1}
+._1ir3kb7n input::placeholder{opacity:1}
+._5ce6131l input::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._5ce6131l input::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._h5gq131l input:-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}

package/dist/cjs/components/Input.js

@@ -1,3 +1,4 @@
+/* Input.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
+require("./Input.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -16,6 +19,9 @@ var _react = _interopRequireDefault(require("react"));
 var _select = require("@atlaskit/select");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var inputStyles = {
+  root: "_5ce6131l _1ir3kb7n _h5gq131l"
+};
 var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
   function Input() {
     var _this;
@@ -67,7 +73,8 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": this.ariaLabelledBy,
         "aria-describedby": this.ariaDescribedBy,
         innerRef: this.props.innerRef,
-        onKeyPress: this.handleKeyPress
+        onKeyPress: this.handleKeyPress,
+        xcss: inputStyles.root
       }));
     }
   }]);

package/dist/cjs/components/MultiValueContainer.compiled.css

@@ -0,0 +1,10 @@
+._18m91wug{overflow-y:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1fjgglyw{scrollbar-width:none}
+._1ke8idpf::-webkit-scrollbar{width:0}
+._1reo15vq{overflow-x:hidden}
+._1suq1j28::-webkit-scrollbar{background-color:transparent}
+._c71l1osq{max-height:100%}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}

package/dist/cjs/components/MultiValueContainer.js

@@ -1,3 +1,4 @@
+/* MultiValueContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiValueContainer = void 0;
+require("./MultiValueContainer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +31,9 @@ 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) { (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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var valueContainerStyles = {
+  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bv12x7 _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+};
 var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   function MultiValueContainer(props) {
     var _this;
@@ -126,7 +133,9 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, props, this.renderChildren()));
+      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, (0, _extends2.default)({}, props, {
+        xcss: valueContainerStyles.root
+      }), this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/components/Option.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Option = void 0;
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react = _interopRequireDefault(require("react"));
@@ -85,7 +85,7 @@ var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       content: (_props$data2 = props.data) === null || _props$data2 === void 0 || (_props$data2 = _props$data2.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.tooltip
     }, function (tooltipProps) {
-      return /*#__PURE__*/_react.default.createElement(_primitives.Box, tooltipProps, dataOption(props));
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, tooltipProps, dataOption(props));
     });
   }
   return dataOption(props);

package/dist/cjs/components/PopupControl.js

@@ -11,9 +11,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
-var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+var _Control = _interopRequireDefault(require("./Control"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -47,7 +47,7 @@ var PopupControl = exports.PopupControl = /*#__PURE__*/function (_React$PureComp
         css: controlWrapper
       }, (0, _react2.jsx)("div", {
         css: labelStyle
-      }, popupTitle), (0, _react2.jsx)(_select.components.Control, this.props));
+      }, popupTitle), (0, _react2.jsx)(_Control.default, this.props));
     }
   }]);
 }(_react.default.PureComponent);

package/dist/cjs/components/PopupUserPicker.js

@@ -61,7 +61,8 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
         shouldFlip = _this$props.shouldFlip,
-        styles = _this$props.styles;
+        styles = _this$props.styles,
+        strategy = _this$props.strategy;
       var width = this.props.width;
       var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
@@ -71,7 +72,7 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
         width: width,
         styles: selectStyles,
         components: (0, _components.getPopupComponents)(!!popupTitle),
-        pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
+        pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy)
       }));
     }
   }]);
@@ -83,6 +84,7 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
   offset: [0, 0],
   placement: 'auto',
   rootBoundary: 'viewport',
-  shouldFlip: true
+  shouldFlip: true,
+  strategy: 'fixed'
 });
 var PopupUserPicker = exports.PopupUserPicker = (0, _analyticsNext.withAnalyticsEvents)()(PopupUserPickerWithoutAnalytics);

package/dist/cjs/components/SingleValueContainer.compiled.css

@@ -0,0 +1,14 @@
+
+._nd5l1kqh{grid-area:1/1/2/2}._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1fjgglyw{scrollbar-width:none}
+._1ke8idpf::-webkit-scrollbar{width:0}
+._1reo15vq{overflow-x:hidden}
+._1suq1j28::-webkit-scrollbar{background-color:transparent}
+._c71l1osq{max-height:100%}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._vwz4idpf{line-height:0}
+._yv0e5bpd{grid-template-columns:auto 1fr}

package/dist/cjs/components/SingleValueContainer.js

@@ -1,3 +1,4 @@
+/* SingleValueContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleValueContainer = void 0;
+require("./SingleValueContainer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -12,25 +16,18 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var placeholderIconContainer = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: _styles.BORDER_PADDING,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 0,
-  gridArea: '1/1/2/2'
-});
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var valueContainerStyles = {
+  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bvze3t _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+};
+var placeholderIconContainer = null;
+var wrapperStyle = null;
 var showUserAvatar = function showUserAvatar(inputValue, value) {
   return value && value.data && inputValue === value.label;
 };
@@ -52,7 +49,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         value = _this$props$selectPro.value,
         placeholderAvatar = _this$props$selectPro.placeholderAvatar;
       if (isFocused || !hasValue) {
-        return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
+        return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
@@ -64,13 +61,9 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
     (0, _defineProperty2.default)(_this, "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     (0, _defineProperty2.default)(_this, "Wrapper", function (_ref) {
       var children = _ref.children;
-      return _this.onValueContainerClick ?
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
-      (0, _react.jsx)("div", {
-        css: (0, _react.css)({
-          flexGrow: 1
-        }),
-        onMouseDown: _this.onValueContainerClick
+      return _this.onValueContainerClick ? /*#__PURE__*/_react.default.createElement("div", {
+        onMouseDown: _this.onValueContainerClick,
+        className: (0, _runtime.ax)(["_16jlkb7n"])
       }, children) : children;
     });
     return _this;
@@ -82,12 +75,14 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return (0, _react.jsx)(_ValueContainerWrapper.default, {
+      return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, (0, _react.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react.jsx)("div", {
-        css: placeholderIconContainer
+      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, (0, _extends2.default)({}, valueContainerProps, {
+        xcss: valueContainerStyles.root
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)(["_nd5l1kqh _19bv12x7 _vwz4idpf"])
       }, this.renderAvatar()), children));
     }
   }]);
-}(_react2.default.Component);
+}(_react.default.Component);

package/dist/cjs/components/TeamOption/main.js

@@ -14,7 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
@@ -46,7 +46,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text, ".concat(_colors.N800, ")"))
-      }, (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_primitives.Inline, {
+      }, (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_compiled.Inline, {
         alignBlock: "center"
       }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name

package/dist/cjs/components/UserPicker.js

@@ -1,3 +1,4 @@
+/* UserPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UserPickerWithoutAnalytics = exports.UserPicker = void 0;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -73,7 +75,9 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
         _this$props$required = _this$props.required,
-        required = _this$props$required === void 0 ? false : _this$props$required;
+        required = _this$props$required === void 0 ? false : _this$props$required,
+        _this$props$showClear = _this$props.showClearIndicator,
+        showClearIndicator = _this$props$showClear === void 0 ? false : _this$props$showClear;
       var width = this.props.width;
       var SelectComponent = allowEmail ? _select.CreatableSelect : _select.default;
       var creatableProps = suggestEmailsForDomain ? (0, _creatableEmailSuggestion.getCreatableSuggestedEmailProps)(suggestEmailsForDomain, isValidEmail) : (0, _creatable.getCreatableProps)(isValidEmail);
@@ -100,7 +104,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
         (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (0, _platformFeatureFlags.fg)('visual-refresh-user-picker')),
-        components: (0, _components.getComponents)(isMulti, anchor),
+        components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator && (0, _platformFeatureFlags.fg)('user-picker-show-clear-indicator')),
         pickerProps: pickerProps
       })))));
     }

package/dist/cjs/components/components.js

@@ -17,12 +17,13 @@ var _SingleValueContainer = require("./SingleValueContainer");
 var _PopupInput = require("./PopupInput");
 var _PopupControl = require("./PopupControl");
 var _Menu = require("./Menu");
+var _Control = _interopRequireDefault(require("./Control"));
 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; }
 /**
  * Memoize getComponents to avoid rerenders.
  */
-var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (multi, anchor) {
+var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (multi, anchor, showClearIndicator) {
   if (anchor) {
     return {
       Control: anchor,
@@ -33,11 +34,12 @@ var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (m
       MultiValue: _MultiValue.MultiValue,
       DropdownIndicator: null,
       SingleValue: _SingleValue.SingleValue,
-      ClearIndicator: multi ? null : _ClearIndicator.ClearIndicator,
+      ClearIndicator: showClearIndicator || !multi ? _ClearIndicator.ClearIndicator : null,
       Option: _Option.Option,
       ValueContainer: multi ? _MultiValueContainer.MultiValueContainer : _SingleValueContainer.SingleValueContainer,
       Input: _Input.Input,
-      Menu: _Menu.Menu
+      Menu: _Menu.Menu,
+      Control: _Control.default
     };
   }
 });

package/dist/cjs/components/popup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPopupProps = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle) {
+var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy) {
   return {
     searchThreshold: -1,
     controlShouldRenderValue: true,
@@ -17,7 +17,7 @@ var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (w
     popupTitle: popupTitle,
     popperProps: {
       placement: placement || 'auto',
-      strategy: 'fixed',
+      strategy: strategy || 'fixed',
       modifiers: [{
         name: 'offset',
         options: {

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 = "11.0.8";
+const packageVersion = "11.0.10";
 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/ClearIndicator.compiled.css

@@ -0,0 +1,8 @@
+
+._v5641ppt{transition:color .15s,opacity .15s}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._tzy4kb7n{opacity:1}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._30l3s4qr:hover{color:var(--ds-icon-danger,#c9372c)}
+@media (hover:hover) and (pointer:fine){._1mhjidpf{opacity:0}}

package/dist/es2019/components/ClearIndicator.js

@@ -1,5 +1,8 @@
+/* ClearIndicator.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./ClearIndicator.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { components } from '@atlaskit/select';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
@@ -7,6 +10,9 @@ const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName:
     default: module.default
   };
 }));
+const clearIndicatorStyles = {
+  root: "_v5641ppt _tzy4kb7n _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _30l3s4qr _1mhjidpf"
+};
 export class ClearIndicator extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -37,7 +43,8 @@ export class ClearIndicator extends React.PureComponent {
       innerProps: {
         ...this.props.innerProps,
         onMouseDown: this.handleMouseDown
-      }
+      },
+      xcss: clearIndicatorStyles.root
     }));
     return clearValueLabel ? /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: Indicator

package/dist/es2019/components/Control.compiled.css

@@ -0,0 +1,20 @@
+
+._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._19bvidpf{padding-left:0}
+._1a98kb7n:hover .fabric-user-picker__clear-indicator{opacity:1}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._p12f1osq{max-width:100%}
+._u5f3idpf{padding-right:0}
+._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._4cvx1p6i:hover{border-color:var(--ds-border-focused,#388bff)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31gly:hover{background-color:var(--ds-background-danger,#ffeceb)}
+._irr31j9a:hover{background-color:var(--ds-background-input,#fff)}
+._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}

package/dist/es2019/components/Control.js

@@ -0,0 +1,20 @@
+/* Control.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Control.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { components } from '@atlaskit/select';
+import { cx } from '@compiled/react';
+const controlStyles = {
+  invalid: "_1h6d1bqt _4cvx1bqt",
+  focused: "_1h6d1p6i _bfhk1j9a _4cvx1p6i _irr31j9a",
+  disabled: "_irr3syzs",
+  subtle: "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31gly",
+  root: "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1h6d1elr _bfhk1j9a _p12f1osq _4cvx1elr _irr31d5g _1a98kb7n"
+};
+const Control = props => {
+  return /*#__PURE__*/React.createElement(components.Control, _extends({}, props, {
+    xcss: cx(controlStyles.root, (props.selectProps.subtle || props.selectProps.noBorder) && controlStyles.subtle, props.isFocused && controlStyles.focused, props.isInvalid && controlStyles.invalid, props.isDisabled && controlStyles.disabled)
+  }));
+};
+export default Control;

package/dist/es2019/components/Input.compiled.css

@@ -0,0 +1,5 @@
+._1ir3kb7n input::-ms-input-placeholder{opacity:1}
+._1ir3kb7n input::placeholder{opacity:1}
+._5ce6131l input::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._5ce6131l input::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._h5gq131l input:-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}

package/dist/es2019/components/Input.js

@@ -1,7 +1,13 @@
+/* Input.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Input.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { components } from '@atlaskit/select';
+const inputStyles = {
+  root: "_5ce6131l _1ir3kb7n _h5gq131l"
+};
 export class Input extends React.Component {
   constructor(...args) {
     super(...args);
@@ -39,7 +45,8 @@ export class Input extends React.Component {
       "aria-labelledby": this.ariaLabelledBy,
       "aria-describedby": this.ariaDescribedBy,
       innerRef: this.props.innerRef,
-      onKeyPress: this.handleKeyPress
+      onKeyPress: this.handleKeyPress,
+      xcss: inputStyles.root
     }));
   }
 }

package/dist/es2019/components/MultiValueContainer.compiled.css

@@ -0,0 +1,10 @@
+._18m91wug{overflow-y:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1fjgglyw{scrollbar-width:none}
+._1ke8idpf::-webkit-scrollbar{width:0}
+._1reo15vq{overflow-x:hidden}
+._1suq1j28::-webkit-scrollbar{background-color:transparent}
+._c71l1osq{max-height:100%}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}