@atlaskit/user-picker 12.0.0 → 12.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/user-picker
 
+## 12.0.2
+
+### Patch Changes
+
+- [`ea970883e4943`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea970883e4943) -
+  Fixes bug where tags were overlapping in multi-select in smaller screen sizes.
+- Updated dependencies
+
+## 12.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.0
 
 ### Major Changes

package/dist/cjs/components/MultiValue.js

@@ -76,9 +76,8 @@ var nameWrapper = (0, _react2.css)({
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 var avatarTagWrapperStyle = (0, _react2.css)({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- offsets AvatarTag's built-in space.050 margin down to space.025
-  margin: '-2px'
+  display: 'flex',
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   function MultiValue(props) {
@@ -194,9 +193,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
         } : {
           name: data.name
         };
-        var removeAction = function removeAction() {
+        var onAfterRemoveAction = function onAfterRemoveAction() {
           removeProps.onClick({});
-          return true;
         };
         if (isEmailOption) {
           return (0, _react2.jsx)("span", {
@@ -210,7 +208,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
               isPendingAction: data.isPendingAction
             }),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            onAfterRemoveAction: onAfterRemoveAction,
+            hasMargin: false
           }));
         }
         if (isGroupOption) {
@@ -229,7 +228,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
               size: "small"
             })),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            onAfterRemoveAction: onAfterRemoveAction,
+            hasMargin: false
           }));
         }
         if (data.icon) {
@@ -246,7 +246,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
               }
             }, data.icon),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            hasMargin: false,
+            onAfterRemoveAction: onAfterRemoveAction
           }));
         }
         return (0, _react2.jsx)("span", {
@@ -258,10 +259,11 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           text: label,
           isVerified: isTeamOption ? data.verified : undefined,
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction,
+          onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return (0, _react2.jsx)(_teamsAvatar.default, (0, _extends2.default)({}, props, avatarProps));
-          }
+          },
+          hasMargin: false
         }), canShowArchivedLozenge ? (0, _react2.jsx)(_primitives.Box, {
           xcss: archivedLozengeWrapper
         }, (0, _react2.jsx)(_lozenge.default, {
@@ -270,10 +272,11 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           type: "user",
           text: label,
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction,
+          onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, avatarProps));
-          }
+          },
+          hasMargin: false
         }));
       }
       return (0, _react2.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {

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

@@ -1,10 +1,16 @@
-._18m91wug{overflow-y:auto}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._18m91wug{overflow-y:auto}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1fjgglyw{scrollbar-width:none}
 ._1ke8idpf::-webkit-scrollbar{width:0}
+._1n261g80{flex-wrap:wrap}
 ._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}
+._yv0en7od{grid-template-columns:unset}

package/dist/cjs/components/MultiValueContainer.js

@@ -19,18 +19,26 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _select = require("@atlaskit/select");
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
-var _excluded = ["children", "innerProps"];
+var _react2 = require("@compiled/react");
+var _excluded = ["children", "innerProps", "hasValue", "isCompact"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _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"
+  root: "_yv0e5bpd _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf",
+  paddingLegacy: "_ca0qu2gc _n3tdu2gc _19bvu2gc",
+  tagUpliftVerticalDefault: "_ca0qu2gc _n3tdu2gc",
+  tagUpliftVerticalCompact: "_ca0qv77o _n3tdv77o",
+  paddingLeftTight: "_19bv12x7",
+  paddingLeftWide: "_19bvu2gc",
+  withFlexAndGap: "_zulp1b66 _yv0en7od _1n261g80"
 };
 var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   function MultiValueContainer(props) {
@@ -68,7 +76,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -119,17 +127,24 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        children = _this$props.children,
-        innerProps = _this$props.innerProps,
+        _children = _this$props.children,
+        _innerProps = _this$props.innerProps,
+        hasValue = _this$props.hasValue,
+        isCompact = _this$props.isCompact,
         valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
+        hasValue: hasValue,
+        isCompact: isCompact,
         innerProps: this.valueContainerInnerProps
       });
+      var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
+      var controlRendersValueInControl = this.props.selectProps.controlShouldRenderValue !== false;
+      var tagUpliftChipRow = ffTagUplifts && hasValue && controlRendersValueInControl;
       return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
       }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, (0, _extends2.default)({}, props, {
-        xcss: valueContainerStyles.root
+        xcss: (0, _react2.cx)(valueContainerStyles.root, !ffTagUplifts && valueContainerStyles.paddingLegacy, ffTagUplifts && (isCompact ? valueContainerStyles.tagUpliftVerticalCompact : valueContainerStyles.tagUpliftVerticalDefault), ffTagUplifts && (tagUpliftChipRow ? valueContainerStyles.paddingLeftWide : valueContainerStyles.paddingLeftTight), tagUpliftChipRow && valueContainerStyles.withFlexAndGap)
       }), this.renderChildren()));
     }
   }], [{

package/dist/cjs/components/styles.js

@@ -45,7 +45,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, #FFECEB)" : state.isFocused ? css[':hover'] ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)" : state.isDisabled ? "var(--ds-background-disabled, #17171708)" : "var(--ds-background-input-hovered, #F8F8F8)"
         }),
         padding: 0,
-        minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
+        minHeight: minHeight ? minHeight : height || isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 30 : 'none' : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 42 : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
@@ -85,9 +85,11 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : BORDER_PADDING,
-        paddingBottom: isCompact ? 0 : BORDER_PADDING,
-        paddingLeft: isMulti ? BORDER_PADDING : 0,
+        paddingTop: isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        paddingBottom: isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        // Match pre–tag-uplift leading inset when only the placeholder shows (share dialog VR, etc.).
+        paddingLeft: isMulti ? state.hasValue && state.selectProps.controlShouldRenderValue !== false && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING : 0,
+        gap: isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-050, 4px)" : undefined,
         overflowX: 'hidden',
         overflowY: 'auto',
         scrollbarWidth: 'none',
@@ -146,14 +148,18 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       });
     },
     input: function input(css, state) {
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
         gridArea: '1/2/2/3',
         gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
         /* Necessary to make input height and tag height the same. */
-        margin: "var(--ds-space-050, 4px)".concat(" 0"),
+        margin: isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 0 : "var(--ds-space-050, 4px)".concat(" 0"),
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
-        paddingBottom: 0,
+        paddingBottom: 0
+      }, isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') && {
+        height: "var(--ds-space-250, 20px)",
+        alignItems: 'center'
+      }), {}, {
         paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */

package/dist/es2019/components/MultiValue.js

@@ -62,9 +62,8 @@ const nameWrapper = css({
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 const avatarTagWrapperStyle = css({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- offsets AvatarTag's built-in space.050 margin down to space.025
-  margin: '-2px'
+  display: 'flex',
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export class MultiValue extends React.Component {
   constructor(props) {
@@ -190,9 +189,8 @@ export class MultiValue extends React.Component {
       } : {
         name: data.name
       };
-      const removeAction = () => {
+      const onAfterRemoveAction = () => {
         removeProps.onClick({});
-        return true;
       };
       if (isEmailOption) {
         return jsx("span", {
@@ -206,7 +204,8 @@ export class MultiValue extends React.Component {
             isPendingAction: data.isPendingAction
           }),
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction
+          onAfterRemoveAction: onAfterRemoveAction,
+          hasMargin: false
         }));
       }
       if (isGroupOption) {
@@ -225,7 +224,8 @@ export class MultiValue extends React.Component {
             size: "small"
           })),
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction
+          onAfterRemoveAction: onAfterRemoveAction,
+          hasMargin: false
         }));
       }
       if (data.icon) {
@@ -242,7 +242,8 @@ export class MultiValue extends React.Component {
             }
           }, data.icon),
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction
+          hasMargin: false,
+          onAfterRemoveAction: onAfterRemoveAction
         }));
       }
       return jsx("span", {
@@ -254,8 +255,9 @@ export class MultiValue extends React.Component {
         text: label,
         isVerified: isTeamOption ? data.verified : undefined,
         isRemovable: !isDisabled,
-        onBeforeRemoveAction: removeAction,
-        avatar: props => jsx(TeamAvatar, _extends({}, props, avatarProps))
+        onAfterRemoveAction: onAfterRemoveAction,
+        avatar: props => jsx(TeamAvatar, _extends({}, props, avatarProps)),
+        hasMargin: false
       }), canShowArchivedLozenge ? jsx(Box, {
         xcss: archivedLozengeWrapper
       }, jsx(Lozenge, {
@@ -264,8 +266,9 @@ export class MultiValue extends React.Component {
         type: "user",
         text: label,
         isRemovable: !isDisabled,
-        onBeforeRemoveAction: removeAction,
-        avatar: props => jsx(Avatar, _extends({}, props, avatarProps))
+        onAfterRemoveAction: onAfterRemoveAction,
+        avatar: props => jsx(Avatar, _extends({}, props, avatarProps)),
+        hasMargin: false
       }));
     }
     return jsx(components.MultiValue, _extends({}, rest, {

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

@@ -1,10 +1,16 @@
-._18m91wug{overflow-y:auto}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._18m91wug{overflow-y:auto}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1fjgglyw{scrollbar-width:none}
 ._1ke8idpf::-webkit-scrollbar{width:0}
+._1n261g80{flex-wrap:wrap}
 ._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}
+._yv0en7od{grid-template-columns:unset}

package/dist/es2019/components/MultiValueContainer.js

@@ -5,12 +5,20 @@ import "./MultiValueContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 import ValueContainerWrapper from './ValueContainerWrapper';
+import { cx } from '@compiled/react';
 const valueContainerStyles = {
-  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bv12x7 _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+  root: "_yv0e5bpd _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf",
+  paddingLegacy: "_ca0qu2gc _n3tdu2gc _19bvu2gc",
+  tagUpliftVerticalDefault: "_ca0qu2gc _n3tdu2gc",
+  tagUpliftVerticalCompact: "_ca0qv77o _n3tdv77o",
+  paddingLeftTight: "_19bv12x7",
+  paddingLeftWide: "_19bvu2gc",
+  withFlexAndGap: "_zulp1b66 _yv0en7od _1n261g80"
 };
 export class MultiValueContainer extends React.PureComponent {
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -108,19 +116,26 @@ export class MultiValueContainer extends React.PureComponent {
   }
   render() {
     const {
-      children,
-      innerProps,
+      children: _children,
+      innerProps: _innerProps,
+      hasValue,
+      isCompact,
       ...valueContainerProps
     } = this.props;
     const props = {
       ...valueContainerProps,
+      hasValue,
+      isCompact,
       innerProps: this.valueContainerInnerProps
     };
+    const ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+    const controlRendersValueInControl = this.props.selectProps.controlShouldRenderValue !== false;
+    const tagUpliftChipRow = ffTagUplifts && hasValue && controlRendersValueInControl;
     return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
       isEnabled: this.onValueContainerClick,
       onMouseDown: this.onValueContainerClick
     }, /*#__PURE__*/React.createElement(components.ValueContainer, _extends({}, props, {
-      xcss: valueContainerStyles.root
+      xcss: cx(valueContainerStyles.root, !ffTagUplifts && valueContainerStyles.paddingLegacy, ffTagUplifts && (isCompact ? valueContainerStyles.tagUpliftVerticalCompact : valueContainerStyles.tagUpliftVerticalDefault), ffTagUplifts && (tagUpliftChipRow ? valueContainerStyles.paddingLeftWide : valueContainerStyles.paddingLeftTight), tagUpliftChipRow && valueContainerStyles.withFlexAndGap)
     }), this.renderChildren()));
   }
 }

package/dist/es2019/components/styles.js

@@ -32,7 +32,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, #FFECEB)" : state.isFocused ? css[':hover'] ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)" : state.isDisabled ? "var(--ds-background-disabled, #17171708)" : "var(--ds-background-input-hovered, #F8F8F8)"
         },
         padding: 0,
-        minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
+        minHeight: minHeight ? minHeight : height || isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 30 : 'none' : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 42 : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
@@ -73,9 +73,11 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       return {
         ...css,
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : BORDER_PADDING,
-        paddingBottom: isCompact ? 0 : BORDER_PADDING,
-        paddingLeft: isMulti ? BORDER_PADDING : 0,
+        paddingTop: isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        paddingBottom: isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        // Match pre–tag-uplift leading inset when only the placeholder shows (share dialog VR, etc.).
+        paddingLeft: isMulti ? state.hasValue && state.selectProps.controlShouldRenderValue !== false && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING : 0,
+        gap: isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-050, 4px)" : undefined,
         overflowX: 'hidden',
         overflowY: 'auto',
         scrollbarWidth: 'none',
@@ -138,10 +140,14 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       gridArea: '1/2/2/3',
       gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
       /* Necessary to make input height and tag height the same. */
-      margin: `${"var(--ds-space-050, 4px)"} 0`,
+      margin: isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 0 : `${"var(--ds-space-050, 4px)"} 0`,
       /* Padding top and bottom of 2 is set by default. */
       paddingTop: 0,
       paddingBottom: 0,
+      ...(isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && {
+        height: "var(--ds-space-250, 20px)",
+        alignItems: 'center'
+      }),
       paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
       '& input::placeholder': {
         /* Chrome, Firefox, Opera, Safari 10.1+ */

package/dist/esm/components/MultiValue.js

@@ -69,9 +69,8 @@ var nameWrapper = css({
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 var avatarTagWrapperStyle = css({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- offsets AvatarTag's built-in space.050 margin down to space.025
-  margin: '-2px'
+  display: 'flex',
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export var MultiValue = /*#__PURE__*/function (_React$Component) {
   function MultiValue(props) {
@@ -187,9 +186,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
         } : {
           name: data.name
         };
-        var removeAction = function removeAction() {
+        var onAfterRemoveAction = function onAfterRemoveAction() {
           removeProps.onClick({});
-          return true;
         };
         if (isEmailOption) {
           return jsx("span", {
@@ -203,7 +201,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
               isPendingAction: data.isPendingAction
             }),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            onAfterRemoveAction: onAfterRemoveAction,
+            hasMargin: false
           }));
         }
         if (isGroupOption) {
@@ -222,7 +221,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
               size: "small"
             })),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            onAfterRemoveAction: onAfterRemoveAction,
+            hasMargin: false
           }));
         }
         if (data.icon) {
@@ -239,7 +239,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
               }
             }, data.icon),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction
+            hasMargin: false,
+            onAfterRemoveAction: onAfterRemoveAction
           }));
         }
         return jsx("span", {
@@ -251,10 +252,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           text: label,
           isVerified: isTeamOption ? data.verified : undefined,
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction,
+          onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return jsx(TeamAvatar, _extends({}, props, avatarProps));
-          }
+          },
+          hasMargin: false
         }), canShowArchivedLozenge ? jsx(Box, {
           xcss: archivedLozengeWrapper
         }, jsx(Lozenge, {
@@ -263,10 +265,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           type: "user",
           text: label,
           isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction,
+          onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return jsx(Avatar, _extends({}, props, avatarProps));
-          }
+          },
+          hasMargin: false
         }));
       }
       return jsx(components.MultiValue, _extends({}, rest, {

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

@@ -1,10 +1,16 @@
-._18m91wug{overflow-y:auto}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._18m91wug{overflow-y:auto}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1fjgglyw{scrollbar-width:none}
 ._1ke8idpf::-webkit-scrollbar{width:0}
+._1n261g80{flex-wrap:wrap}
 ._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}
+._yv0en7od{grid-template-columns:unset}

package/dist/esm/components/MultiValueContainer.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "innerProps"];
+var _excluded = ["children", "innerProps", "hasValue", "isCompact"];
 import "./MultiValueContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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; }
@@ -16,12 +16,20 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { components } from '@atlaskit/select';
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 import ValueContainerWrapper from './ValueContainerWrapper';
+import { cx } from '@compiled/react';
 var valueContainerStyles = {
-  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bv12x7 _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+  root: "_yv0e5bpd _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf",
+  paddingLegacy: "_ca0qu2gc _n3tdu2gc _19bvu2gc",
+  tagUpliftVerticalDefault: "_ca0qu2gc _n3tdu2gc",
+  tagUpliftVerticalCompact: "_ca0qv77o _n3tdv77o",
+  paddingLeftTight: "_19bv12x7",
+  paddingLeftWide: "_19bvu2gc",
+  withFlexAndGap: "_zulp1b66 _yv0en7od _1n261g80"
 };
 export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   function MultiValueContainer(props) {
@@ -110,17 +118,24 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        children = _this$props.children,
-        innerProps = _this$props.innerProps,
+        _children = _this$props.children,
+        _innerProps = _this$props.innerProps,
+        hasValue = _this$props.hasValue,
+        isCompact = _this$props.isCompact,
         valueContainerProps = _objectWithoutProperties(_this$props, _excluded);
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
+        hasValue: hasValue,
+        isCompact: isCompact,
         innerProps: this.valueContainerInnerProps
       });
+      var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+      var controlRendersValueInControl = this.props.selectProps.controlShouldRenderValue !== false;
+      var tagUpliftChipRow = ffTagUplifts && hasValue && controlRendersValueInControl;
       return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
       }, /*#__PURE__*/React.createElement(components.ValueContainer, _extends({}, props, {
-        xcss: valueContainerStyles.root
+        xcss: cx(valueContainerStyles.root, !ffTagUplifts && valueContainerStyles.paddingLegacy, ffTagUplifts && (isCompact ? valueContainerStyles.tagUpliftVerticalCompact : valueContainerStyles.tagUpliftVerticalDefault), ffTagUplifts && (tagUpliftChipRow ? valueContainerStyles.paddingLeftWide : valueContainerStyles.paddingLeftTight), tagUpliftChipRow && valueContainerStyles.withFlexAndGap)
       }), this.renderChildren()));
     }
   }], [{

package/dist/esm/components/styles.js

@@ -38,7 +38,7 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, #FFECEB)" : state.isFocused ? css[':hover'] ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)" : state.isDisabled ? "var(--ds-background-disabled, #17171708)" : "var(--ds-background-input-hovered, #F8F8F8)"
         }),
         padding: 0,
-        minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
+        minHeight: minHeight ? minHeight : height || isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 30 : 'none' : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 42 : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
@@ -78,9 +78,11 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : BORDER_PADDING,
-        paddingBottom: isCompact ? 0 : BORDER_PADDING,
-        paddingLeft: isMulti ? BORDER_PADDING : 0,
+        paddingTop: isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        paddingBottom: isCompact ? isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        // Match pre–tag-uplift leading inset when only the placeholder shows (share dialog VR, etc.).
+        paddingLeft: isMulti ? state.hasValue && state.selectProps.controlShouldRenderValue !== false && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING : 0,
+        gap: isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-050, 4px)" : undefined,
         overflowX: 'hidden',
         overflowY: 'auto',
         scrollbarWidth: 'none',
@@ -139,14 +141,18 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       });
     },
     input: function input(css, state) {
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
         gridArea: '1/2/2/3',
         gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
         /* Necessary to make input height and tag height the same. */
-        margin: "var(--ds-space-050, 4px)".concat(" 0"),
+        margin: isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? 0 : "var(--ds-space-050, 4px)".concat(" 0"),
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
-        paddingBottom: 0,
+        paddingBottom: 0
+      }, isMulti && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && {
+        height: "var(--ds-space-250, 20px)",
+        alignItems: 'center'
+      }), {}, {
         paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */

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

@@ -13,7 +13,7 @@ type Props = MultiValueProps<OptionType> & {
     isFocused?: boolean;
     ref?: React.RefObject<HTMLDivElement>;
     removeProps: {
-        onClick: Function;
+        onClick: (e?: React.MouseEvent<HTMLDivElement>) => void;
     };
     selectProps: UserPickerProps;
 };

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

@@ -11,14 +11,16 @@ export type State = {
 };
 type Props = MultiValueProps<Option<User>[], true> & {
     innerProps?: ValueContainerInnerProps;
+    /** Passed through from Atlaskit Select value container (spacing compact). */
+    isCompact?: boolean;
 };
 type ValueContainerInnerProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 export declare class MultiValueContainer extends React.PureComponent<Props, State> {
     static getDerivedStateFromProps(nextProps: Props, prevState: State): {
-        valueSize: number;
         previousValueSize: number;
+        valueSize: number;
     };
     private valueContainerInnerProps;
     private timeoutId;

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

@@ -25,20 +25,20 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaLive?: "polite" | "off" | "assertive";
+    ariaLive?: 'polite' | 'off' | 'assertive';
     autoFocus?: boolean;
     captureMenuScroll?: boolean;
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
-    customGroupLabels?: Partial<Record<NonNullable<OptionData["type"]>, React.ReactNode>>;
+    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
     emailLabel?: string;
     fieldId: string | null;
     footer?: React.ReactNode;
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
-    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
     header?: React.ReactNode;
     height?: number | string;
     includeTeamsUpdates?: boolean;
@@ -61,7 +61,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuIsOpen?: boolean;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
-    menuPosition?: "absolute" | "fixed";
+    menuPosition?: 'absolute' | 'fixed';
     menuShouldBlockScroll?: boolean;
     minHeight?: number | string;
     name?: string;
@@ -83,14 +83,14 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnFocus?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
-    placeholderAvatar?: "person" | "team";
+    placeholderAvatar?: 'person' | 'team';
     popupSelectProps?: PopupSelectProps<OptionData>;
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
-    strategy?: "fixed" | "absolute";
+    strategy?: 'fixed' | 'absolute';
     styles?: StylesConfig;
     subtle?: boolean;
     suggestEmailsForDomain?: string;
@@ -98,7 +98,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: Value;
     width?: number | string;
-}, keyof WithAnalyticsEventsProps>, "search" | "appearance" | "height" | "minHeight" | "open" | "isDisabled" | "options" | "anchor" | "footer" | "header" | "subtle" | "value" | "placeholderAvatar" | "noOptionsMessage" | "placeholder" | "defaultValue" | "autoFocus" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "name" | "emailLabel" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "disableInput" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "customGroupLabels" | "includeTeamsUpdates" | "inputId" | "isClearable" | "isFooterFocused" | "isHeaderFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "onClear" | "onClose" | "onInputChange" | "onOpen" | "onSelection" | "openMenuOnClick" | "openMenuOnFocus" | "popupSelectProps" | "required" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -6,7 +6,7 @@ declare function creatableProps(isValidEmail?: EmailValidator): {
     formatCreateLabel: (inputText?: string) => string;
     getNewOptionData: (inputValue: string) => Option;
     isOptionDisabled: (option: Option) => boolean;
-    isValidNewOption: (inputValue?: string) => boolean | "" | undefined;
+    isValidNewOption: (inputValue?: string) => boolean | '' | undefined;
 };
 export declare const getCreatableProps: typeof creatableProps;
 export {};

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

@@ -16,5 +16,5 @@ export declare const getCreatableSuggestedEmailProps: MemoizedFn<(emailDomain: s
         value: string;
     } | null;
     isOptionDisabled: (option: Option) => boolean;
-    isValidNewOption: (inputValue?: string) => boolean | "" | undefined;
+    isValidNewOption: (inputValue?: string) => boolean | '' | undefined;
 }>;

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

@@ -1,6 +1,6 @@
 import { type StylesConfig } from '@atlaskit/select';
 import { type MemoizedFn } from 'memoize-one';
-export declare const BORDER_PADDING: "var(--ds-space-075)";
+export declare const BORDER_PADDING: 'var(--ds-space-075)';
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
 export declare const getStyles: MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string, minHeight?: number | string) => StylesConfig>;

package/dist/types/util/group-options-by-type/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type MemoizedFn } from 'memoize-one';
 import type { OptionData, Option, GroupedOptions } from '../../types';
-export declare const groupOptionsByType: MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData["type"]>[], customGroupLabels?: Partial<Record<NonNullable<OptionData["type"]>, React.ReactNode>>) => Option[] | GroupedOptions[]>;
+export declare const groupOptionsByType: MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData['type']>[], customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>) => Option[] | GroupedOptions[]>;

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

@@ -13,7 +13,7 @@ type Props = MultiValueProps<OptionType> & {
     isFocused?: boolean;
     ref?: React.RefObject<HTMLDivElement>;
     removeProps: {
-        onClick: Function;
+        onClick: (e?: React.MouseEvent<HTMLDivElement>) => void;
     };
     selectProps: UserPickerProps;
 };

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

@@ -11,14 +11,16 @@ export type State = {
 };
 type Props = MultiValueProps<Option<User>[], true> & {
     innerProps?: ValueContainerInnerProps;
+    /** Passed through from Atlaskit Select value container (spacing compact). */
+    isCompact?: boolean;
 };
 type ValueContainerInnerProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 export declare class MultiValueContainer extends React.PureComponent<Props, State> {
     static getDerivedStateFromProps(nextProps: Props, prevState: State): {
-        valueSize: number;
         previousValueSize: number;
+        valueSize: number;
     };
     private valueContainerInnerProps;
     private timeoutId;

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

@@ -25,20 +25,20 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaLive?: "polite" | "off" | "assertive";
+    ariaLive?: 'polite' | 'off' | 'assertive';
     autoFocus?: boolean;
     captureMenuScroll?: boolean;
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
-    customGroupLabels?: Partial<Record<NonNullable<OptionData["type"]>, React.ReactNode>>;
+    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
     emailLabel?: string;
     fieldId: string | null;
     footer?: React.ReactNode;
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
-    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
     header?: React.ReactNode;
     height?: number | string;
     includeTeamsUpdates?: boolean;
@@ -61,7 +61,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuIsOpen?: boolean;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
-    menuPosition?: "absolute" | "fixed";
+    menuPosition?: 'absolute' | 'fixed';
     menuShouldBlockScroll?: boolean;
     minHeight?: number | string;
     name?: string;
@@ -83,14 +83,14 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnFocus?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
-    placeholderAvatar?: "person" | "team";
+    placeholderAvatar?: 'person' | 'team';
     popupSelectProps?: PopupSelectProps<OptionData>;
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
-    strategy?: "fixed" | "absolute";
+    strategy?: 'fixed' | 'absolute';
     styles?: StylesConfig;
     subtle?: boolean;
     suggestEmailsForDomain?: string;
@@ -98,7 +98,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: Value;
     width?: number | string;
-}, keyof WithAnalyticsEventsProps>, "search" | "appearance" | "height" | "minHeight" | "open" | "isDisabled" | "options" | "anchor" | "footer" | "header" | "subtle" | "value" | "placeholderAvatar" | "noOptionsMessage" | "placeholder" | "defaultValue" | "autoFocus" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "name" | "emailLabel" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "disableInput" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "customGroupLabels" | "includeTeamsUpdates" | "inputId" | "isClearable" | "isFooterFocused" | "isHeaderFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "onClear" | "onClose" | "onInputChange" | "onOpen" | "onSelection" | "openMenuOnClick" | "openMenuOnFocus" | "popupSelectProps" | "required" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -6,7 +6,7 @@ declare function creatableProps(isValidEmail?: EmailValidator): {
     formatCreateLabel: (inputText?: string) => string;
     getNewOptionData: (inputValue: string) => Option;
     isOptionDisabled: (option: Option) => boolean;
-    isValidNewOption: (inputValue?: string) => boolean | "" | undefined;
+    isValidNewOption: (inputValue?: string) => boolean | '' | undefined;
 };
 export declare const getCreatableProps: typeof creatableProps;
 export {};

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

@@ -16,5 +16,5 @@ export declare const getCreatableSuggestedEmailProps: MemoizedFn<(emailDomain: s
         value: string;
     } | null;
     isOptionDisabled: (option: Option) => boolean;
-    isValidNewOption: (inputValue?: string) => boolean | "" | undefined;
+    isValidNewOption: (inputValue?: string) => boolean | '' | undefined;
 }>;

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

@@ -1,6 +1,6 @@
 import { type StylesConfig } from '@atlaskit/select';
 import { type MemoizedFn } from 'memoize-one';
-export declare const BORDER_PADDING: "var(--ds-space-075)";
+export declare const BORDER_PADDING: 'var(--ds-space-075)';
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
 export declare const getStyles: MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean, isPopupStyles?: boolean, height?: number | string, minHeight?: number | string) => StylesConfig>;

package/dist/types-ts4.5/util/group-options-by-type/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type MemoizedFn } from 'memoize-one';
 import type { OptionData, Option, GroupedOptions } from '../../types';
-export declare const groupOptionsByType: MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData["type"]>[], customGroupLabels?: Partial<Record<NonNullable<OptionData["type"]>, React.ReactNode>>) => Option[] | GroupedOptions[]>;
+export declare const groupOptionsByType: MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData['type']>[], customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>) => Option[] | GroupedOptions[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "12.0.0",
+	"version": "12.0.2",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,17 +46,17 @@
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^34.1.0",
+		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/logo": "^20.0.0",
 		"@atlaskit/lozenge": "^13.7.0",
-		"@atlaskit/people-teams-ui-public": "^3.7.0",
+		"@atlaskit/people-teams-ui-public": "^4.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/select": "^21.10.0",
 		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tag": "^14.9.0",
-		"@atlaskit/teams-avatar": "^2.5.0",
+		"@atlaskit/tag": "^14.10.0",
+		"@atlaskit/teams-avatar": "^2.6.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/ufo": "^0.4.0",