@atlaskit/user-picker 11.4.3 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 11.5.0
+
+### Minor Changes
+
+- [`67cac32256ce7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67cac32256ce7) -
+  [ux] Adding support to customise the email icon colours to indicate an action can be taken for the
+  user.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.4.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -72,4 +72,4 @@
 			"path": "../../../data/ufo-external/afm-cc/tsconfig.json"
 		}
 	]
-}
+}

package/afm-dev-agents/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.dev-agents.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../dev-agents/tsDist/@atlaskit__user-picker/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/avatar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/lozenge/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../people-and-teams/people-teams-ui-public/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popper/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/select/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/spinner/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../people-and-teams/teams-avatar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../data/ufo-external/afm-dev-agents/tsconfig.json"
+		}
+	]
+}

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__user-picker/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/avatar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/lozenge/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../people-and-teams/people-teams-ui-public/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popper/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/select/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/spinner/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../people-and-teams/teams-avatar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../data/ufo-external/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/analytics/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/analytics.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/analytics.d.ts"
       ]

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.4.2";
+var packageVersion = "11.4.3";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/AddOptionAvatar.js

@@ -9,6 +9,7 @@ var _email = _interopRequireDefault(require("@atlaskit/icon/core/migration/email
 var _colors = require("@atlaskit/theme/colors");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -16,12 +17,14 @@ var _react2 = _interopRequireDefault(require("react"));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
+var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge, isPendingAction) {
   var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
+  var backgroundColor = isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF7D6)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
-    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor: backgroundColor,
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -30,17 +33,18 @@ var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge)
 };
 var AddOptionAvatar = exports.AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
-    label = _ref.label;
+    label = _ref.label,
+    isPendingAction = _ref.isPendingAction;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react.jsx)("div", {
-      css: getEmailAvatarWrapperStyle(isLozenge)
+      css: getEmailAvatarWrapperStyle(isLozenge, isPendingAction)
     }, (0, _react.jsx)(_email.default, {
       testId: "add-option-avatar-email-icon",
       label: label || '',
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
-      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+      color: isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #A54800)" : "var(--ds-text-subtle, ".concat(_colors.N500, ")")
     }))
   );
 };

package/dist/cjs/components/MultiValue.js

@@ -60,7 +60,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
       if ((0, _utils.isEmail)(data)) {
         // This element is a decorative icon and does not require a label
         return (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
-          isLozenge: true
+          isLozenge: true,
+          isPendingAction: data.isPendingAction
         });
       }
       if ((0, _utils.isGroup)(data)) {

package/dist/cjs/components/UserPicker.js

@@ -104,7 +104,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         ,
         styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')),
+        (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? this.props.height : undefined),
         components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
         pickerProps: pickerProps
       })))));

package/dist/cjs/components/styles.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _select = require("@atlaskit/select");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
   _excluded2 = ["paddingTop", "paddingBottom", "position"];
 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; }
@@ -17,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var BORDER_PADDING = exports.BORDER_PADDING = "var(--ds-space-075, 6px)";
 var AVATAR_PADDING = exports.AVATAR_PADDING = 6;
 var INDICATOR_WIDTH = exports.INDICATOR_WIDTH = 39;
-var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) {
+var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles, height) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -45,9 +46,9 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(_colors.R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(_colors.N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
         }),
         padding: 0,
-        minHeight: isCompact ? 'none' : 44,
+        minHeight: height && (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: isCompact || isMulti ? '100%' : 44,
+        height: height && (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       });
     },

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.4.2";
+const packageVersion = "11.4.3";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/AddOptionAvatar.js

@@ -7,12 +7,15 @@ import { N40, N500 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import React from 'react';
-const getEmailAvatarWrapperStyle = isLozenge => {
+import { fg } from '@atlaskit/platform-feature-flags';
+const getEmailAvatarWrapperStyle = (isLozenge, isPendingAction) => {
   const padding = isLozenge ? `${"var(--ds-space-0, 0px)"}` : `${"var(--ds-space-050, 4px)"}`;
+  const backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF7D6)" : `var(--ds-background-neutral, ${N40})`;
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    padding: padding,
-    backgroundColor: `var(--ds-background-neutral, ${N40})`,
+    padding,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor,
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -21,18 +24,19 @@ const getEmailAvatarWrapperStyle = isLozenge => {
 };
 export const AddOptionAvatar = ({
   isLozenge,
-  label
+  label,
+  isPendingAction
 }) => {
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
-      css: getEmailAvatarWrapperStyle(isLozenge)
+      css: getEmailAvatarWrapperStyle(isLozenge, isPendingAction)
     }, jsx(EmailIcon, {
       testId: "add-option-avatar-email-icon",
       label: label || '',
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
-      color: `var(--ds-text-subtle, ${N500})`
+      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #A54800)" : `var(--ds-text-subtle, ${N500})`
     }))
   );
 };

package/dist/es2019/components/MultiValue.js

@@ -50,7 +50,8 @@ export class MultiValue extends React.Component {
       if (isEmail(data)) {
         // This element is a decorative icon and does not require a label
         return jsx(AddOptionAvatar, {
-          isLozenge: true
+          isLozenge: true,
+          isPendingAction: data.isPendingAction
         });
       }
       if (isGroup(data)) {

package/dist/es2019/components/UserPicker.js

@@ -81,7 +81,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       ,
       styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('platform-component-visual-refresh')),
+      fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
       components: getComponents(isMulti, anchor, showClearIndicator, (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.components ? this.props.components : {}),
       pickerProps: pickerProps
     })))));

package/dist/es2019/components/styles.js

@@ -1,10 +1,11 @@
 import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const BORDER_PADDING = "var(--ds-space-075, 6px)";
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
-export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) => {
+export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles, height) => {
   let styles = {
     menu: (css, state) => ({
       ...css,
@@ -32,9 +33,9 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
         },
         padding: 0,
-        minHeight: isCompact ? 'none' : 44,
+        minHeight: height && fg('jifjam_bulk_operations') || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: isCompact || isMulti ? '100%' : 44,
+        height: height && fg('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       };
     },

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.4.2";
+var packageVersion = "11.4.3";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/AddOptionAvatar.js

@@ -7,12 +7,15 @@ import { N40, N500 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import React from 'react';
-var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
+import { fg } from '@atlaskit/platform-feature-flags';
+var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge, isPendingAction) {
   var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
+  var backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF7D6)" : "var(--ds-background-neutral, ".concat(N40, ")");
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
-    backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor: backgroundColor,
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -21,17 +24,18 @@ var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge)
 };
 export var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
-    label = _ref.label;
+    label = _ref.label,
+    isPendingAction = _ref.isPendingAction;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
-      css: getEmailAvatarWrapperStyle(isLozenge)
+      css: getEmailAvatarWrapperStyle(isLozenge, isPendingAction)
     }, jsx(EmailIcon, {
       testId: "add-option-avatar-email-icon",
       label: label || '',
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
-      color: "var(--ds-text-subtle, ".concat(N500, ")")
+      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #A54800)" : "var(--ds-text-subtle, ".concat(N500, ")")
     }))
   );
 };

package/dist/esm/components/MultiValue.js

@@ -55,7 +55,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
       if (isEmail(data)) {
         // This element is a decorative icon and does not require a label
         return jsx(AddOptionAvatar, {
-          isLozenge: true
+          isLozenge: true,
+          isPendingAction: data.isPendingAction
         });
       }
       if (isGroup(data)) {

package/dist/esm/components/UserPicker.js

@@ -95,7 +95,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         ,
         styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        fg('platform-component-visual-refresh')),
+        fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
         components: getComponents(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
         pickerProps: pickerProps
       })))));

package/dist/esm/components/styles.js

@@ -7,10 +7,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var BORDER_PADDING = "var(--ds-space-075, 6px)";
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
-export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) {
+export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles, height) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -38,9 +39,9 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(N10, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")")
         }),
         padding: 0,
-        minHeight: isCompact ? 'none' : 44,
+        minHeight: height && fg('jifjam_bulk_operations') || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: isCompact || isMulti ? '100%' : 44,
+        height: height && fg('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       });
     },

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

@@ -2,5 +2,6 @@ import React from 'react';
 export type AddOptionAvatarProps = {
     label?: string;
     isLozenge?: boolean;
+    isPendingAction?: boolean;
 };
 export declare const AddOptionAvatar: React.FunctionComponent<AddOptionAvatarProps>;