@atlaskit/user-picker 9.7.0 → 9.7.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/user-picker
 
+## 9.7.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.7.1
+
+### Patch Changes
+
+- [`cb8f8e76d25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8f8e76d25) - Update types for react-select and @atlaskit/select upgrade
+  Update commerce-ui entrypoints that caused a pipeline issue.
+- Updated dependencies
+
 ## 9.7.0
 
 ### Minor Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -75,7 +75,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "withSelectRef", function (callback) {
       return function () {
         if (_this.selectRef) {
-          callback(_this.selectRef.select.select);
+          callback(_this.selectRef);
         }
       };
     });

package/dist/cjs/components/ClearIndicator.js

@@ -69,12 +69,13 @@ var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
       if (event && event.type === 'mousedown' && event.button !== 0) {
         return;
-      }
-
-      _this.props.clearValue(); // Prevent focus when clear on blurred state
+      } // Prevent focus when clear on blurred state
 
 
-      var selectProps = _this.props.selectProps;
+      var _this$props = _this.props,
+          clearValue = _this$props.clearValue,
+          selectProps = _this$props.selectProps;
+      clearValue();
 
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();

package/dist/cjs/components/Option.js

@@ -31,11 +31,15 @@ var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
       isSelected = _ref.isSelected,
       status = _ref.status;
-  return /*#__PURE__*/_react.default.createElement(_UserOption.UserOption, {
-    user: data,
-    status: status,
-    isSelected: isSelected
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - <UserOption> expects `data` to be of User interface, but data is OptionData interface by default. Check if the `user` props in UserOption should also accept OptionData or refactor this file to accept generics
+    _react.default.createElement(_UserOption.UserOption, {
+      user: data,
+      status: status,
+      isSelected: isSelected
+    })
+  );
 };
 
 var dataOption = function dataOption(_ref2) {

package/dist/cjs/components/SingleValue.js

@@ -15,6 +15,8 @@ var _avatar = require("@atlaskit/avatar");
 
 var _react = require("@emotion/react");
 
+var _select = require("@atlaskit/select");
+
 var _SizeableAvatar = require("./SizeableAvatar");
 
 var _utils = require("./utils");
@@ -25,9 +27,6 @@ var avatarItemComponent = (0, _react.css)({
   padding: '0 !important',
   width: 'auto',
   overflow: 'hidden',
-
-  /* IE 11 needs this prop explicitly to flex items */
-  flex: '1 1 auto',
   minWidth: '100px',
   '& > span': {
     boxSizing: 'border-box'
@@ -46,7 +45,7 @@ var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? (0, _react.jsx)(_avatar.AvatarItem, {
+  return !isFocused ? (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(_avatar.AvatarItem, {
     backgroundColor: "transparent",
     avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
@@ -60,7 +59,7 @@ var SingleValue = function SingleValue(props) {
     return (0, _react.jsx)("div", (0, _extends2.default)({
       css: avatarItemComponent
     }, props));
-  }) : null;
+  })) : null;
 };
 
 exports.SingleValue = SingleValue;

package/dist/cjs/components/SingleValueContainer.js

@@ -41,7 +41,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var placeholderIconContainer = (0, _react2.css)({
   paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
-  lineHeight: 0
+  lineHeight: 0,
+  gridArea: '1/1/2/2'
 });
 
 var showUserAvatar = function showUserAvatar(inputValue, value) {

package/dist/cjs/components/SizeableAvatar.js

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SizeableAvatar = exports.Props = void 0;
+exports.SizeableAvatar = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
@@ -13,10 +17,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,11 +27,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 Props = /*#__PURE__*/(0, _createClass2.default)(function Props() {
-  (0, _classCallCheck2.default)(this, Props);
-});
-exports.Props = Props;
-
 var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(SizeableAvatar, _React$PureComponent);
 

package/dist/cjs/components/styles.js

@@ -11,21 +11,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _avatar = require("@atlaskit/avatar");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _utils = require("./utils");
-
 var _select = require("@atlaskit/select");
 
 var _excluded = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    _excluded2 = ["paddingTop", "paddingBottom", "position"],
-    _excluded3 = ["margin"];
+    _excluded2 = ["paddingTop", "paddingBottom", "position"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -37,7 +32,6 @@ var AVATAR_PADDING = 6;
 exports.AVATAR_PADDING = AVATAR_PADDING;
 var INDICATOR_WIDTH = 39;
 exports.INDICATOR_WIDTH = INDICATOR_WIDTH;
-var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
 var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles) {
   var styles = {
@@ -65,7 +59,6 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
 
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: isCompact || isMulti ? '100%' : 44,
-        alignItems: 'stretch',
         maxWidth: '100%'
       });
     },
@@ -102,22 +95,18 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
           css = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        paddingBottom: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        flexGrow: 1,
+        gridTemplateColumns: 'auto 1fr',
+        paddingTop: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingBottom: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
         paddingLeft: isMulti ? BORDER_PADDING : 0,
-        display: 'flex',
-        flexDirection: 'row',
         overflowX: 'hidden',
         overflowY: 'auto',
-        flexWrap: state.selectProps.isMulti ? 'wrap' : 'nowrap',
         scrollbarWidth: 'none',
         maxHeight: state.selectProps.maxPickerHeight || '100%',
         '::-webkit-scrollbar': {
           width: 0,
           background: 'transparent'
-        },
-        position: 'relative'
+        }
       });
     },
     multiValue: function multiValue(css) {
@@ -139,24 +128,23 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
       });
     },
     placeholder: function placeholder(css, state) {
-      var avatarSize = (0, _utils.getAvatarSize)(state.selectProps.appearance); // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
+      // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
       // IE and other browsers auto calculate value of "left" prop differently,
       // so we want to explicitly set value for the `left` property
-
       if (css.position === 'absolute' && !css.left) {
         css.left = "".concat(BORDER_PADDING, "px");
       }
 
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingLeft: state.selectProps.isMulti ? 'none' : AVATAR_PADDING + 2 * _avatar.BORDER_WIDTH + _avatar.AVATAR_SIZES[avatarSize],
+        gridArea: '1/2/2/3',
+        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
 
         /* Margin left right of 2px set by default */
+        // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
-        display: 'block',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%'
+        textOverflow: 'ellipsis'
       });
     },
     option: function option(css) {
@@ -164,21 +152,18 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
         overflow: 'hidden'
       });
     },
-    input: function input(_ref3) {
-      var margin = _ref3.margin,
-          css = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+    input: function input(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        display: 'flex',
-        alignSelf: 'center',
+        gridArea: '1/2/2/3',
+        gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
 
         /* Necessary to make input height and tag height the same. */
-        marginBottom: TAG_MARGIN_WIDTH,
-        marginTop: TAG_MARGIN_WIDTH,
+        margin: "".concat(TAG_MARGIN_WIDTH, "px 0"),
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
         paddingBottom: 0,
-        paddingLeft: isMulti ? 0 : AVATAR_PADDING,
+        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
           color: (0, _tokens.token)('color.text.subtlest', _colors.N100),
@@ -191,39 +176,18 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
           color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
         }
       });
+    },
+    singleValue: function singleValue(css) {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        margin: 0,
+        gridArea: '1/2/2/3'
+      });
     }
   };
   return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
 });
 exports.getStyles = getStyles;
 var getPopupStyles = (0, _memoizeOne.default)(function (width, flip, isMulti) {
-  return _objectSpread(_objectSpread({}, getStyles(width, isMulti)), {}, {
-    container: function container(css) {
-      return _objectSpread(_objectSpread({}, css), {}, {
-        display: flip ? 'flex' : 'block',
-        flexDirection: 'column-reverse'
-      });
-    },
-    // there is not any avatar on the left of the placeholder
-    placeholder: function placeholder(css, state) {
-      var avatarSize = (0, _utils.getAvatarSize)(state.selectProps.appearance);
-
-      if (css.position === 'absolute' && !css.left) {
-        css.left = "".concat(BORDER_PADDING, "px");
-      }
-
-      return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: 2,
-        paddingLeft: isMulti ? 'none' : AVATAR_PADDING + 2 * _avatar.BORDER_WIDTH + _avatar.AVATAR_SIZES[avatarSize],
-        paddingRight: INDICATOR_WIDTH,
-        display: 'block',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%',
-        margin: 0
-      });
-    }
-  });
+  return _objectSpread({}, getStyles(width, isMulti));
 });
 exports.getPopupStyles = getPopupStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.7.0",
+	"version": "9.7.2",
 	"sideEffects": false
 }

package/dist/es2019/components/BaseUserPicker.js

@@ -51,7 +51,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
 
     _defineProperty(this, "withSelectRef", callback => () => {
       if (this.selectRef) {
-        callback(this.selectRef.select.select);
+        callback(this.selectRef);
       }
     });
 

package/dist/es2019/components/ClearIndicator.js

@@ -16,13 +16,14 @@ export class ClearIndicator extends React.PureComponent {
     _defineProperty(this, "handleMouseDown", event => {
       if (event && event.type === 'mousedown' && event.button !== 0) {
         return;
-      }
+      } // Prevent focus when clear on blurred state
 
-      this.props.clearValue(); // Prevent focus when clear on blurred state
 
       const {
+        clearValue,
         selectProps
       } = this.props;
+      clearValue();
 
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();

package/dist/es2019/components/Option.js

@@ -15,7 +15,10 @@ const defaultOption = ({
   },
   isSelected,
   status
-}) => /*#__PURE__*/React.createElement(UserOption, {
+}) =>
+/*#__PURE__*/
+// @ts-expect-error - <UserOption> expects `data` to be of User interface, but data is OptionData interface by default. Check if the `user` props in UserOption should also accept OptionData or refactor this file to accept generics
+React.createElement(UserOption, {
   user: data,
   status: status,
   isSelected: isSelected

package/dist/es2019/components/SingleValue.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
 import { css, jsx } from '@emotion/react';
+import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 const avatarItemComponent = css({
@@ -10,9 +11,6 @@ const avatarItemComponent = css({
   padding: '0 !important',
   width: 'auto',
   overflow: 'hidden',
-
-  /* IE 11 needs this prop explicitly to flex items */
-  flex: '1 1 auto',
   minWidth: '100px',
   '& > span': {
     boxSizing: 'border-box'
@@ -34,7 +32,7 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
-  return !isFocused ? jsx(AvatarItem, {
+  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
     backgroundColor: "transparent",
     avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
@@ -47,5 +45,5 @@ export const SingleValue = props => {
     ...props
   }) => jsx("div", _extends({
     css: avatarItemComponent
-  }, props))) : null;
+  }, props)))) : null;
 };

package/dist/es2019/components/SingleValueContainer.js

@@ -8,7 +8,8 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
 const placeholderIconContainer = css({
   paddingLeft: `${BORDER_PADDING}px`,
-  lineHeight: 0
+  lineHeight: 0,
+  gridArea: '1/1/2/2'
 });
 
 const showUserAvatar = (inputValue, value) => value && value.data && inputValue === value.label;

package/dist/es2019/components/SizeableAvatar.js

@@ -1,7 +1,6 @@
 import Avatar from '@atlaskit/avatar';
 import React from 'react';
 import { getAvatarSize } from './utils';
-export class Props {}
 export class SizeableAvatar extends React.PureComponent {
   render() {
     const {

package/dist/es2019/components/styles.js

@@ -1,13 +1,10 @@
-import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import memoizeOne from 'memoize-one';
-import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
 export const BORDER_PADDING = 6;
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
-const TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 const TAG_MARGIN_WIDTH = 4;
 export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles) => {
   let styles = {
@@ -33,7 +30,6 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
 
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: isCompact || isMulti ? '100%' : 44,
-        alignItems: 'stretch',
         maxWidth: '100%'
       };
     },
@@ -68,22 +64,18 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
     }, state) => {
       const isMulti = state.selectProps.isMulti;
       return { ...css,
-        paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        paddingBottom: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        flexGrow: 1,
+        gridTemplateColumns: 'auto 1fr',
+        paddingTop: isCompact ? 0 : `${BORDER_PADDING}px`,
+        paddingBottom: isCompact ? 0 : `${BORDER_PADDING}px`,
         paddingLeft: isMulti ? BORDER_PADDING : 0,
-        display: 'flex',
-        flexDirection: 'row',
         overflowX: 'hidden',
         overflowY: 'auto',
-        flexWrap: state.selectProps.isMulti ? 'wrap' : 'nowrap',
         scrollbarWidth: 'none',
         maxHeight: state.selectProps.maxPickerHeight || '100%',
         '::-webkit-scrollbar': {
           width: 0,
           background: 'transparent'
-        },
-        position: 'relative'
+        }
       };
     },
     multiValue: css => ({ ...css,
@@ -99,44 +91,39 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       cursor: 'pointer'
     }),
     placeholder: (css, state) => {
-      const avatarSize = getAvatarSize(state.selectProps.appearance); // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
+      // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
       // IE and other browsers auto calculate value of "left" prop differently,
       // so we want to explicitly set value for the `left` property
-
       if (css.position === 'absolute' && !css.left) {
         css.left = `${BORDER_PADDING}px`;
       }
 
       return { ...css,
-        paddingLeft: state.selectProps.isMulti ? 'none' : AVATAR_PADDING + 2 * BORDER_WIDTH + AVATAR_SIZES[avatarSize],
+        gridArea: '1/2/2/3',
+        paddingLeft: state.selectProps.isMulti ? 0 : `${BORDER_PADDING}px`,
 
         /* Margin left right of 2px set by default */
+        // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
-        display: 'block',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%'
+        textOverflow: 'ellipsis'
       };
     },
     option: css => ({ ...css,
       overflow: 'hidden'
     }),
-    input: ({
-      margin,
-      ...css
-    }) => ({ ...css,
-      display: 'flex',
-      alignSelf: 'center',
+    input: (css, state) => ({ ...css,
+      gridArea: '1/2/2/3',
+      gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
 
       /* Necessary to make input height and tag height the same. */
-      marginBottom: TAG_MARGIN_WIDTH,
-      marginTop: TAG_MARGIN_WIDTH,
+      margin: `${TAG_MARGIN_WIDTH}px 0`,
 
       /* Padding top and bottom of 2 is set by default. */
       paddingTop: 0,
       paddingBottom: 0,
-      paddingLeft: isMulti ? 0 : AVATAR_PADDING,
+      paddingLeft: state.selectProps.isMulti ? 0 : `${BORDER_PADDING}px`,
       '& input::placeholder': {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: token('color.text.subtlest', N100),
@@ -148,33 +135,13 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
         /* Internet Explorer 10-11 */
         color: token('color.text.subtlest', N100)
       }
+    }),
+    singleValue: css => ({ ...css,
+      margin: 0,
+      gridArea: '1/2/2/3'
     })
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export const getPopupStyles = memoizeOne((width, flip, isMulti) => ({ ...getStyles(width, isMulti),
-  container: css => ({ ...css,
-    display: flip ? 'flex' : 'block',
-    flexDirection: 'column-reverse'
-  }),
-  // there is not any avatar on the left of the placeholder
-  placeholder: (css, state) => {
-    const avatarSize = getAvatarSize(state.selectProps.appearance);
-
-    if (css.position === 'absolute' && !css.left) {
-      css.left = `${BORDER_PADDING}px`;
-    }
-
-    return { ...css,
-      paddingTop: 2,
-      paddingLeft: isMulti ? 'none' : AVATAR_PADDING + 2 * BORDER_WIDTH + AVATAR_SIZES[avatarSize],
-      paddingRight: INDICATOR_WIDTH,
-      display: 'block',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      maxWidth: '100%',
-      margin: 0
-    };
-  }
+export const getPopupStyles = memoizeOne((width, flip, isMulti) => ({ ...getStyles(width, isMulti)
 }));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.7.0",
+	"version": "9.7.2",
 	"sideEffects": false
 }

package/dist/esm/components/BaseUserPicker.js

@@ -52,7 +52,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     _defineProperty(_assertThisInitialized(_this), "withSelectRef", function (callback) {
       return function () {
         if (_this.selectRef) {
-          callback(_this.selectRef.select.select);
+          callback(_this.selectRef);
         }
       };
     });

package/dist/esm/components/ClearIndicator.js

@@ -45,12 +45,13 @@ export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (event) {
       if (event && event.type === 'mousedown' && event.button !== 0) {
         return;
-      }
-
-      _this.props.clearValue(); // Prevent focus when clear on blurred state
+      } // Prevent focus when clear on blurred state
 
 
-      var selectProps = _this.props.selectProps;
+      var _this$props = _this.props,
+          clearValue = _this$props.clearValue,
+          selectProps = _this$props.selectProps;
+      clearValue();
 
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();

package/dist/esm/components/Option.js

@@ -13,11 +13,15 @@ var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
       isSelected = _ref.isSelected,
       status = _ref.status;
-  return /*#__PURE__*/React.createElement(UserOption, {
-    user: data,
-    status: status,
-    isSelected: isSelected
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - <UserOption> expects `data` to be of User interface, but data is OptionData interface by default. Check if the `user` props in UserOption should also accept OptionData or refactor this file to accept generics
+    React.createElement(UserOption, {
+      user: data,
+      status: status,
+      isSelected: isSelected
+    })
+  );
 };
 
 var dataOption = function dataOption(_ref2) {

package/dist/esm/components/SingleValue.js

@@ -5,6 +5,7 @@ var _excluded = ["ref"];
 /** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
 import { css, jsx } from '@emotion/react';
+import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 var avatarItemComponent = css({
@@ -12,9 +13,6 @@ var avatarItemComponent = css({
   padding: '0 !important',
   width: 'auto',
   overflow: 'hidden',
-
-  /* IE 11 needs this prop explicitly to flex items */
-  flex: '1 1 auto',
   minWidth: '100px',
   '& > span': {
     boxSizing: 'border-box'
@@ -32,7 +30,7 @@ export var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? jsx(AvatarItem, {
+  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
     backgroundColor: "transparent",
     avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
@@ -47,5 +45,5 @@ export var SingleValue = function SingleValue(props) {
     return jsx("div", _extends({
       css: avatarItemComponent
     }, props));
-  }) : null;
+  })) : null;
 };

package/dist/esm/components/SingleValueContainer.js

@@ -20,7 +20,8 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
 var placeholderIconContainer = css({
   paddingLeft: "".concat(BORDER_PADDING, "px"),
-  lineHeight: 0
+  lineHeight: 0,
+  gridArea: '1/1/2/2'
 });
 
 var showUserAvatar = function showUserAvatar(inputValue, value) {

package/dist/esm/components/SizeableAvatar.js

@@ -1,8 +1,8 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 
 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); }; }
 
@@ -11,9 +11,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import Avatar from '@atlaskit/avatar';
 import React from 'react';
 import { getAvatarSize } from './utils';
-export var Props = /*#__PURE__*/_createClass(function Props() {
-  _classCallCheck(this, Props);
-});
 export var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(SizeableAvatar, _React$PureComponent);
 

package/dist/esm/components/styles.js

@@ -1,23 +1,19 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    _excluded2 = ["paddingTop", "paddingBottom", "position"],
-    _excluded3 = ["margin"];
+    _excluded2 = ["paddingTop", "paddingBottom", "position"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import memoizeOne from 'memoize-one';
-import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
 export var BORDER_PADDING = 6;
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
-var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
 export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles) {
   var styles = {
@@ -45,7 +41,6 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
 
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: isCompact || isMulti ? '100%' : 44,
-        alignItems: 'stretch',
         maxWidth: '100%'
       });
     },
@@ -84,22 +79,18 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
 
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        paddingBottom: isCompact ? 0 : TOTAL_PADDING_TAG_TO_CONTAINER - TAG_MARGIN_WIDTH,
-        flexGrow: 1,
+        gridTemplateColumns: 'auto 1fr',
+        paddingTop: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingBottom: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
         paddingLeft: isMulti ? BORDER_PADDING : 0,
-        display: 'flex',
-        flexDirection: 'row',
         overflowX: 'hidden',
         overflowY: 'auto',
-        flexWrap: state.selectProps.isMulti ? 'wrap' : 'nowrap',
         scrollbarWidth: 'none',
         maxHeight: state.selectProps.maxPickerHeight || '100%',
         '::-webkit-scrollbar': {
           width: 0,
           background: 'transparent'
-        },
-        position: 'relative'
+        }
       });
     },
     multiValue: function multiValue(css) {
@@ -121,24 +112,23 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       });
     },
     placeholder: function placeholder(css, state) {
-      var avatarSize = getAvatarSize(state.selectProps.appearance); // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
+      // fix styling in IE 11: when the position is absolute and `left` prop is not defined,
       // IE and other browsers auto calculate value of "left" prop differently,
       // so we want to explicitly set value for the `left` property
-
       if (css.position === 'absolute' && !css.left) {
         css.left = "".concat(BORDER_PADDING, "px");
       }
 
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingLeft: state.selectProps.isMulti ? 'none' : AVATAR_PADDING + 2 * BORDER_WIDTH + AVATAR_SIZES[avatarSize],
+        gridArea: '1/2/2/3',
+        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
 
         /* Margin left right of 2px set by default */
+        // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
-        display: 'block',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%'
+        textOverflow: 'ellipsis'
       });
     },
     option: function option(css) {
@@ -146,22 +136,18 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
         overflow: 'hidden'
       });
     },
-    input: function input(_ref3) {
-      var margin = _ref3.margin,
-          css = _objectWithoutProperties(_ref3, _excluded3);
-
+    input: function input(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        display: 'flex',
-        alignSelf: 'center',
+        gridArea: '1/2/2/3',
+        gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
 
         /* Necessary to make input height and tag height the same. */
-        marginBottom: TAG_MARGIN_WIDTH,
-        marginTop: TAG_MARGIN_WIDTH,
+        margin: "".concat(TAG_MARGIN_WIDTH, "px 0"),
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
         paddingBottom: 0,
-        paddingLeft: isMulti ? 0 : AVATAR_PADDING,
+        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
           color: token('color.text.subtlest', N100),
@@ -174,37 +160,16 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
           color: token('color.text.subtlest', N100)
         }
       });
+    },
+    singleValue: function singleValue(css) {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        margin: 0,
+        gridArea: '1/2/2/3'
+      });
     }
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
 export var getPopupStyles = memoizeOne(function (width, flip, isMulti) {
-  return _objectSpread(_objectSpread({}, getStyles(width, isMulti)), {}, {
-    container: function container(css) {
-      return _objectSpread(_objectSpread({}, css), {}, {
-        display: flip ? 'flex' : 'block',
-        flexDirection: 'column-reverse'
-      });
-    },
-    // there is not any avatar on the left of the placeholder
-    placeholder: function placeholder(css, state) {
-      var avatarSize = getAvatarSize(state.selectProps.appearance);
-
-      if (css.position === 'absolute' && !css.left) {
-        css.left = "".concat(BORDER_PADDING, "px");
-      }
-
-      return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: 2,
-        paddingLeft: isMulti ? 'none' : AVATAR_PADDING + 2 * BORDER_WIDTH + AVATAR_SIZES[avatarSize],
-        paddingRight: INDICATOR_WIDTH,
-        display: 'block',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%',
-        margin: 0
-      });
-    }
-  });
+  return _objectSpread({}, getStyles(width, isMulti));
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.7.0",
+	"version": "9.7.2",
 	"sideEffects": false
 }

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

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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

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

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { OptionType } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 import { Option, UserPickerProps } from '../types';
-import { MultiValueProps } from '@atlaskit/select/types';
+import { MultiValueProps } from '@atlaskit/select';
 export declare const scrollToValue: (valueContainer: HTMLDivElement, control: HTMLElement) => void;
 declare type Props = MultiValueProps<OptionType> & {
     isFocused?: boolean;

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

@@ -1,11 +1,11 @@
-import { ValueContainerProps } from '@atlaskit/select';
+import { MultiValueProps } from '@atlaskit/select';
 import React from 'react';
 import { User, Option } from '../types';
 export declare type State = {
     valueSize: number;
     previousValueSize: number;
 };
-declare type Props = ValueContainerProps<Option<User>[], true> & {
+declare type Props = MultiValueProps<Option<User>[], true> & {
     innerProps?: ValueContainerInnerProps;
 };
 declare type ValueContainerInnerProps = {

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

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

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

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

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare class Props {
+export declare type Props = {
     appearance: string;
     src?: string;
     name?: string;
     presence?: string;
-}
+};
 export declare class SizeableAvatar extends React.PureComponent<Props> {
     render(): 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" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & 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" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & 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/components/components.d.ts

@@ -21,10 +21,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 } | {
     MultiValue: typeof MultiValue;
     DropdownIndicator: null;
-    SingleValue: (props: {
-        data: import("..").Option<import("..").OptionData>;
-        selectProps: any;
-    }) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
     ClearIndicator: typeof ClearIndicator | null;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
@@ -33,10 +30,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;
-    SingleValue: (props: {
-        data: import("..").Option<import("..").OptionData>;
-        selectProps: any;
-    }) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;
@@ -44,10 +38,7 @@ export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPo
 } | {
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: {
-        data: import("..").Option<import("..").OptionData>;
-        selectProps: any;
-    }) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;

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

@@ -1,7 +1,8 @@
+import { StylesConfig } from '@atlaskit/select';
 export declare const BORDER_PADDING = 6;
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
-export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, isCompact?: boolean | undefined, overrideStyles?: Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined) => Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | {
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, isCompact?: boolean | undefined, overrideStyles?: StylesConfig<import("@atlaskit/select").OptionType, false> | undefined) => {
     menu: (css: any, state: any) => any;
     control: (css: any, state: any) => any;
     clearIndicator: ({ paddingTop, paddingBottom, paddingLeft, paddingRight, ...css }: any) => any;
@@ -12,6 +13,30 @@ export declare const getStyles: import("memoize-one").MemoizedFn<(width: string
     multiValueRemove: (css: any) => any;
     placeholder: (css: any, state: any) => any;
     option: (css: any) => any;
-    input: ({ margin, ...css }: any) => any;
+    input: (css: any, state: any) => any;
+    singleValue: (css: any) => any;
+} | {
+    clearIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").ClearIndicatorProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    container?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ContainerProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    control?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ControlProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    dropdownIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    group?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    groupHeading?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupHeadingProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    indicatorsContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").IndicatorsContainerProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    indicatorSeparator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").IndicatorSeparatorProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    input?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").InputProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    loadingIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").LoadingIndicatorProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    loadingMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").NoticeProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    menu?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    menuList?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuListProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    menuPortal?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select/dist/declarations/src/components/Menu").PortalStyleArgs> | undefined;
+    multiValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").MultiValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    multiValueLabel?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").MultiValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    multiValueRemove?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").MultiValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").NoticeProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    option?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").OptionProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    placeholder?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").PlaceholderProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").SingleValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
+    valueContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ValueContainerProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
 }>;
-export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, flip?: boolean | undefined, isMulti?: boolean | undefined) => Partial<import("react-select").Styles<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>>>;
+export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, flip?: boolean | undefined, isMulti?: boolean | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.7.0",
+  "version": "9.7.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,10 +32,10 @@
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/popper": "^5.4.0",
-    "@atlaskit/select": "^15.7.0",
-    "@atlaskit/spinner": "^15.2.0",
+    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.11.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.4.0",