@atlaskit/user-picker 10.24.2 → 10.26.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/user-picker
 
+## 10.26.0
+
+### Minor Changes
+
+- [#153007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153007)
+  [`1c28c3db19101`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1c28c3db19101) -
+  Show verified icon for teams in user picker
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.25.0
+
+### Minor Changes
+
+- [#148732](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148732)
+  [`9391607579cb6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9391607579cb6) -
+  UserPicker component updated to accept isInvalid prop, and display invalid state styles when the
+  prop is set to true
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.24.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -33,6 +33,12 @@
         {
             "path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../people-and-teams/people-teams-ui-public/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -32,6 +32,12 @@
     {
       "path": "../../../design-system/lozenge/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../../people-and-teams/people-teams-ui-public/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../../design-system/popper/afm-jira/tsconfig.json"
     },

package/afm-post-office/tsconfig.json

@@ -32,6 +32,12 @@
     {
       "path": "../../../design-system/lozenge/afm-post-office/tsconfig.json"
     },
+    {
+      "path": "../../../people-and-teams/people-teams-ui-public/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+    },
     {
       "path": "../../../design-system/popper/afm-post-office/tsconfig.json"
     },

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.24.2";
+var packageVersion = "10.26.0";
 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/BaseUserPicker.js

@@ -474,6 +474,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         placeholder = _this$props4.placeholder,
         isClearable = _this$props4.isClearable,
         isDisabled = _this$props4.isDisabled,
+        isInvalid = _this$props4.isInvalid,
         clearValueLabel = _this$props4.clearValueLabel,
         menuMinWidth = _this$props4.menuMinWidth,
         menuPortalTarget = _this$props4.menuPortalTarget,
@@ -548,6 +549,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         },
         footer: footer,
         isDisabled: isDisabled,
+        isInvalid: isInvalid,
         isFocused: menuIsOpen,
         backspaceRemovesValue: isMulti,
         filterOption: null // disable local filtering

package/dist/cjs/components/MultiValue.js

@@ -24,6 +24,8 @@ var _SizeableAvatar = require("./SizeableAvatar");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["children", "innerProps"];
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -85,9 +87,19 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
       }
       return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "multi",
-        src: (0, _utils.getAvatarUrl)(data)
+        src: (0, _utils.getAvatarUrl)(data),
+        type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getElemAfter", function () {
+      var data = _this.props.data.data;
+      if ((0, _utils.isTeam)(data) && data.verified && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker')) {
+        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+          size: "small"
+        });
+      }
+      return null;
+    });
     _this.containerRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
@@ -130,9 +142,11 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           ref: this.containerRef
         },
         cropWithEllipsis: false
-      }), this.getElemBefore(), " ", (0, _react2.jsx)("div", {
+      }), (0, _react2.jsx)(_primitives.Inline, {
+        alignBlock: "center"
+      }, this.getElemBefore(), " ", (0, _react2.jsx)("div", {
         css: nameWrapper
-      }, children));
+      }, children), this.getElemAfter()));
     }
   }]);
   return MultiValue;

package/dist/cjs/components/SingleValue.js

@@ -12,6 +12,9 @@ var _react = require("@emotion/react");
 var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _excluded = ["ref"];
 /**
  * @jsxRuntime classic
@@ -36,6 +39,15 @@ var avatarItemComponent = (0, _react.css)({
     border: 'none'
   }
 });
+var ElementAfter = function ElementAfter(props) {
+  var data = props.data.data;
+  if ((0, _utils.isTeam)(data) && data.verified) {
+    return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+      size: "small"
+    });
+  }
+  return null;
+};
 var SingleValue = exports.SingleValue = function SingleValue(props) {
   var _props$data = props.data,
     label = _props$data.label,
@@ -47,9 +59,12 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     backgroundColor: "transparent",
     avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
-      appearance: appearance
+      appearance: appearance,
+      type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
     }),
-    primaryText: label
+    primaryText: (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_primitives.Inline, {
+      alignBlock: "center"
+    }, label, (0, _react.jsx)(ElementAfter, props)) : label
   }, function (_ref) {
     var ref = _ref.ref,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -14,6 +14,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -39,14 +42,21 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrimaryText", function () {
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
-        highlight = _this$props$team.highlight;
+        highlight = _this$props$team.highlight,
+        verified = _this$props$team.verified;
       return [(0, _react.jsx)("span", {
         key: "name"
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text, ".concat(_colors.N800, ")"))
+      }, (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_primitives.Inline, {
+        alignBlock: "center"
       }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
+      }, name), verified && (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+        size: "small"
+      })) : (0, _react.jsx)(_HighlightText.HighlightText, {
+        highlights: highlight && highlight.name
       }, name))];
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {

package/dist/cjs/components/UserPicker.js

@@ -95,7 +95,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles),
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid),
         components: (0, _components.getComponents)(isMulti, anchor),
         pickerProps: pickerProps
       })))));

package/dist/cjs/components/styles.js

@@ -17,7 +17,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) {
+var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isInvalid) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -35,13 +35,13 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(_colors.N10, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
           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,

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.24.2";
+const packageVersion = "10.26.0";
 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/BaseUserPicker.js

@@ -450,6 +450,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       placeholder,
       isClearable,
       isDisabled,
+      isInvalid,
       clearValueLabel,
       menuMinWidth,
       menuPortalTarget,
@@ -526,6 +527,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       noOptionsMessage: showError ? loadOptionsErrorMessage : typeof noOptionsMessage === 'function' ? noOptionsMessage : () => noOptionsMessage,
       footer: footer,
       isDisabled: isDisabled,
+      isInvalid: isInvalid,
       isFocused: menuIsOpen,
       backspaceRemovesValue: isMulti,
       filterOption: null // disable local filtering

package/dist/es2019/components/MultiValue.js

@@ -6,15 +6,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';
-import { getAvatarUrl, isEmail, isGroup } from './utils';
+import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const scrollToValue = (valueContainer, control) => {
   const {
     top,
@@ -69,9 +71,23 @@ export class MultiValue extends React.Component {
       }
       return jsx(SizeableAvatar, {
         appearance: "multi",
-        src: getAvatarUrl(data)
+        src: getAvatarUrl(data),
+        type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
       });
     });
+    _defineProperty(this, "getElemAfter", () => {
+      const {
+        data: {
+          data
+        }
+      } = this.props;
+      if (isTeam(data) && data.verified && fg('verified-team-in-user-picker')) {
+        return jsx(VerifiedTeamIcon, {
+          size: "small"
+        });
+      }
+      return null;
+    });
     this.containerRef = /*#__PURE__*/React.createRef();
   }
   componentDidUpdate() {
@@ -115,8 +131,10 @@ export class MultiValue extends React.Component {
         ref: this.containerRef
       },
       cropWithEllipsis: false
-    }), this.getElemBefore(), " ", jsx("div", {
+    }), jsx(Inline, {
+      alignBlock: "center"
+    }, this.getElemBefore(), " ", jsx("div", {
       css: nameWrapper
-    }, children));
+    }, children), this.getElemAfter()));
   }
 }

package/dist/es2019/components/SingleValue.js

@@ -8,7 +8,10 @@ import { AvatarItem } from '@atlaskit/avatar';
 import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { getAvatarUrl } from './utils';
+import { getAvatarUrl, isTeam } from './utils';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline } from '@atlaskit/primitives';
 const avatarItemComponent = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   border: 'none !important',
@@ -27,6 +30,19 @@ const avatarItemComponent = css({
     border: 'none'
   }
 });
+const ElementAfter = props => {
+  const {
+    data: {
+      data
+    }
+  } = props;
+  if (isTeam(data) && data.verified) {
+    return jsx(VerifiedTeamIcon, {
+      size: "small"
+    });
+  }
+  return null;
+};
 export const SingleValue = props => {
   const {
     data: {
@@ -43,9 +59,12 @@ export const SingleValue = props => {
     backgroundColor: "transparent",
     avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
-      appearance: appearance
+      appearance: appearance,
+      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
     }),
-    primaryText: label
+    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
+      alignBlock: "center"
+    }, label, jsx(ElementAfter, props)) : label
   }, ({
     ref,
     ...props

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

@@ -5,6 +5,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsx jsx
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline } from '@atlaskit/primitives';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -20,7 +23,8 @@ export class TeamOption extends React.PureComponent {
       const {
         team: {
           name,
-          highlight
+          highlight,
+          verified
         }
       } = this.props;
       return [jsx("span", {
@@ -28,8 +32,14 @@ export class TeamOption extends React.PureComponent {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
+      }, fg('verified-team-in-user-picker') ? jsx(Inline, {
+        alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
+      }, name), verified && jsx(VerifiedTeamIcon, {
+        size: "small"
+      })) : jsx(HighlightText, {
+        highlights: highlight && highlight.name
       }, name))];
     });
     _defineProperty(this, "renderByline", () => {

package/dist/es2019/components/UserPicker.js

@@ -71,7 +71,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       SelectComponent: SelectComponent
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles),
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid),
       components: getComponents(isMulti, anchor),
       pickerProps: pickerProps
     })))));

package/dist/es2019/components/styles.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@atlaskit/select';
 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) => {
+export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isInvalid) => {
   let styles = {
     menu: (css, state) => ({
       ...css,
@@ -21,14 +21,14 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       return {
         ...css,
         width,
-        borderColor: state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
+        borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
         backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': {
           ...css[':hover'],
-          borderColor: state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
+          borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
           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,

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.24.2";
+var packageVersion = "10.26.0";
 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/BaseUserPicker.js

@@ -467,6 +467,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         placeholder = _this$props4.placeholder,
         isClearable = _this$props4.isClearable,
         isDisabled = _this$props4.isDisabled,
+        isInvalid = _this$props4.isInvalid,
         clearValueLabel = _this$props4.clearValueLabel,
         menuMinWidth = _this$props4.menuMinWidth,
         menuPortalTarget = _this$props4.menuPortalTarget,
@@ -541,6 +542,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         },
         footer: footer,
         isDisabled: isDisabled,
+        isInvalid: isInvalid,
         isFocused: menuIsOpen,
         backspaceRemovesValue: isMulti,
         filterOption: null // disable local filtering

package/dist/esm/components/MultiValue.js

@@ -16,15 +16,17 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';
-import { getAvatarUrl, isEmail, isGroup } from './utils';
+import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var scrollToValue = function scrollToValue(valueContainer, control) {
   var _valueContainer$getBo = valueContainer.getBoundingClientRect(),
     top = _valueContainer$getBo.top,
@@ -80,9 +82,19 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
       }
       return jsx(SizeableAvatar, {
         appearance: "multi",
-        src: getAvatarUrl(data)
+        src: getAvatarUrl(data),
+        type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "getElemAfter", function () {
+      var data = _this.props.data.data;
+      if (isTeam(data) && data.verified && fg('verified-team-in-user-picker')) {
+        return jsx(VerifiedTeamIcon, {
+          size: "small"
+        });
+      }
+      return null;
+    });
     _this.containerRef = /*#__PURE__*/React.createRef();
     return _this;
   }
@@ -125,9 +137,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           ref: this.containerRef
         },
         cropWithEllipsis: false
-      }), this.getElemBefore(), " ", jsx("div", {
+      }), jsx(Inline, {
+        alignBlock: "center"
+      }, this.getElemBefore(), " ", jsx("div", {
         css: nameWrapper
-      }, children));
+      }, children), this.getElemAfter()));
     }
   }]);
   return MultiValue;

package/dist/esm/components/SingleValue.js

@@ -10,7 +10,10 @@ import { AvatarItem } from '@atlaskit/avatar';
 import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { getAvatarUrl } from './utils';
+import { getAvatarUrl, isTeam } from './utils';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline } from '@atlaskit/primitives';
 var avatarItemComponent = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   border: 'none !important',
@@ -29,6 +32,15 @@ var avatarItemComponent = css({
     border: 'none'
   }
 });
+var ElementAfter = function ElementAfter(props) {
+  var data = props.data.data;
+  if (isTeam(data) && data.verified) {
+    return jsx(VerifiedTeamIcon, {
+      size: "small"
+    });
+  }
+  return null;
+};
 export var SingleValue = function SingleValue(props) {
   var _props$data = props.data,
     label = _props$data.label,
@@ -40,9 +52,12 @@ export var SingleValue = function SingleValue(props) {
     backgroundColor: "transparent",
     avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
-      appearance: appearance
+      appearance: appearance,
+      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
     }),
-    primaryText: label
+    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
+      alignBlock: "center"
+    }, label, jsx(ElementAfter, props)) : label
   }, function (_ref) {
     var ref = _ref.ref,
       props = _objectWithoutProperties(_ref, _excluded);

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

@@ -13,6 +13,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline } from '@atlaskit/primitives';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -34,14 +37,21 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getPrimaryText", function () {
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
-        highlight = _this$props$team.highlight;
+        highlight = _this$props$team.highlight,
+        verified = _this$props$team.verified;
       return [jsx("span", {
         key: "name"
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
         css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text, ".concat(N800, ")"))
+      }, fg('verified-team-in-user-picker') ? jsx(Inline, {
+        alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
+      }, name), verified && jsx(VerifiedTeamIcon, {
+        size: "small"
+      })) : jsx(HighlightText, {
+        highlights: highlight && highlight.name
       }, name))];
     });
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {

package/dist/esm/components/UserPicker.js

@@ -85,7 +85,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles),
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid),
         components: getComponents(isMulti, anchor),
         pickerProps: pickerProps
       })))));