@atlaskit/user-picker 10.24.1 → 10.25.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/user-picker
 
+## 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
+
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+- Updated dependencies
+
 ## 10.24.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

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

@@ -50,6 +50,7 @@ var ClearIndicator = exports.ClearIndicator = /*#__PURE__*/function (_React$Pure
         clearValue = _this$props.clearValue,
         selectProps = _this$props.selectProps;
       clearValue();
+      //@ts-ignore react-select unsupported props
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }

package/dist/cjs/components/Input.js

@@ -34,6 +34,7 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+      //@ts-ignore react-select unsupported props
       if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
         e.preventDefault();
       }

package/dist/cjs/components/MultiValueContainer.js

@@ -81,6 +81,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       }
       return _this.addPlaceholder(addMoreMessage);
     });
+    //@ts-ignore react-select unsupported props
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     _this.state = {
       valueSize: 0,
@@ -97,6 +98,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       var _this$state = this.state,
         previousValueSize = _this$state.previousValueSize,
         valueSize = _this$state.valueSize;
+      //@ts-ignore react-select unsupported props
       var isFocused = this.props.selectProps.isFocused;
       if (valueSize > previousValueSize && isFocused) {
         if (this.timeoutId) {

package/dist/cjs/components/SingleValueContainer.js

@@ -62,6 +62,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       }
       return null;
     });
+    //@ts-ignore react-select unsupported props
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "Wrapper", function (_ref) {
       var children = _ref.children;

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.1";
+const packageVersion = "10.25.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/ClearIndicator.js

@@ -20,6 +20,7 @@ export class ClearIndicator extends React.PureComponent {
         selectProps
       } = this.props;
       clearValue();
+      //@ts-ignore react-select unsupported props
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }
@@ -27,6 +28,7 @@ export class ClearIndicator extends React.PureComponent {
   }
   render() {
     const {
+      //@ts-ignore react-select unsupported props
       selectProps: {
         clearValueLabel
       }

package/dist/es2019/components/Input.js

@@ -12,6 +12,7 @@ export class Input extends React.Component {
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+      //@ts-ignore react-select unsupported props
       if ((_this$props$selectPro = this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
         e.preventDefault();
       }

package/dist/es2019/components/MultiValueContainer.js

@@ -48,6 +48,7 @@ export class MultiValueContainer extends React.PureComponent {
     });
     _defineProperty(this, "renderChildren", () => {
       const {
+        //@ts-ignore react-select unsupported props
         selectProps: {
           addMoreMessage,
           isDisabled
@@ -70,6 +71,7 @@ export class MultiValueContainer extends React.PureComponent {
       }
       return this.addPlaceholder(addMoreMessage);
     });
+    //@ts-ignore react-select unsupported props
     _defineProperty(this, "onValueContainerClick", this.props.selectProps.onValueContainerClick);
     this.state = {
       valueSize: 0,
@@ -84,6 +86,7 @@ export class MultiValueContainer extends React.PureComponent {
       previousValueSize,
       valueSize
     } = this.state;
+    //@ts-ignore react-select unsupported props
     const {
       isFocused
     } = this.props.selectProps;

package/dist/es2019/components/PopupControl.js

@@ -30,6 +30,7 @@ const getLabelStyle = () => css({
 export class PopupControl extends React.PureComponent {
   render() {
     const {
+      //@ts-ignore react-select unsupported props
       selectProps: {
         popupTitle
       }

package/dist/es2019/components/SingleValue.js

@@ -33,6 +33,7 @@ export const SingleValue = props => {
       label,
       data
     },
+    //@ts-ignore react-select unsupported props
     selectProps: {
       appearance,
       isFocused

package/dist/es2019/components/SingleValueContainer.js

@@ -23,6 +23,7 @@ export class SingleValueContainer extends React.Component {
     _defineProperty(this, "renderAvatar", () => {
       const {
         hasValue,
+        //@ts-ignore react-select unsupported props
         selectProps: {
           appearance,
           isFocused,
@@ -40,6 +41,7 @@ export class SingleValueContainer extends React.Component {
       }
       return null;
     });
+    //@ts-ignore react-select unsupported props
     _defineProperty(this, "onValueContainerClick", this.props.selectProps.onValueContainerClick);
     _defineProperty(this, "Wrapper", ({
       children

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.1";
+var packageVersion = "10.25.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/ClearIndicator.js

@@ -38,6 +38,7 @@ export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
         clearValue = _this$props.clearValue,
         selectProps = _this$props.selectProps;
       clearValue();
+      //@ts-ignore react-select unsupported props
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }

package/dist/esm/components/Input.js

@@ -27,6 +27,7 @@ export var Input = /*#__PURE__*/function (_React$Component) {
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+      //@ts-ignore react-select unsupported props
       if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
         e.preventDefault();
       }

package/dist/esm/components/MultiValueContainer.js

@@ -71,6 +71,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       }
       return _this.addPlaceholder(addMoreMessage);
     });
+    //@ts-ignore react-select unsupported props
     _defineProperty(_assertThisInitialized(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     _this.state = {
       valueSize: 0,
@@ -87,6 +88,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         previousValueSize = _this$state.previousValueSize,
         valueSize = _this$state.valueSize;
+      //@ts-ignore react-select unsupported props
       var isFocused = this.props.selectProps.isFocused;
       if (valueSize > previousValueSize && isFocused) {
         if (this.timeoutId) {

package/dist/esm/components/SingleValueContainer.js

@@ -57,6 +57,7 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       }
       return null;
     });
+    //@ts-ignore react-select unsupported props
     _defineProperty(_assertThisInitialized(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     _defineProperty(_assertThisInitialized(_this), "Wrapper", function (_ref) {
       var children = _ref.children;

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
       })))));

package/dist/esm/components/styles.js

@@ -10,7 +10,7 @@ import { mergeStyles } from '@atlaskit/select';
 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) {
+export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isInvalid) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -28,13 +28,13 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       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(N90, ")"),
+        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(N10, ")") : "var(--ds-background-input, ".concat(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(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
+          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
           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,

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

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

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

@@ -19,5 +19,5 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<Partial<PopupUserPickerProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "createAnalyticsEvent" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip"> & React.RefAttributes<any>>;
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "target" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<Partial<PopupUserPickerProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "target" | "defaultValue" | "createAnalyticsEvent" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip"> & React.RefAttributes<any>>;
 export {};

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

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

@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
 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: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean) => StylesConfig>;
 export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;

package/dist/types/types.d.ts

@@ -120,6 +120,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     value?: Value;
     /** Disable all interactions with the picker, putting it in a read-only state. */
     isDisabled?: boolean;
+    /** Display the  picker with a style to show the value is invalid */
+    isInvalid?: boolean;
     /** Display a remove button on the single picker. True by default. */
     isClearable?: boolean;
     /** Optional tooltip to display on hover over the clear indicator. */

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

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

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

@@ -19,5 +19,5 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<Partial<PopupUserPickerProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "createAnalyticsEvent" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip"> & React.RefAttributes<any>>;
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "target" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<Partial<PopupUserPickerProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>>, "options" | "search" | "placeholder" | "isDisabled" | "offset" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "target" | "defaultValue" | "createAnalyticsEvent" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "popupTitle" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip"> & React.RefAttributes<any>>;
 export {};

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

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

@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
 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: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean) => StylesConfig>;
 export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;

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

@@ -120,6 +120,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     value?: Value;
     /** Disable all interactions with the picker, putting it in a read-only state. */
     isDisabled?: boolean;
+    /** Display the  picker with a style to show the value is invalid */
+    isInvalid?: boolean;
     /** Display a remove button on the single picker. True by default. */
     isClearable?: boolean;
     /** Optional tooltip to display on hover over the clear indicator. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.24.1",
+	"version": "10.25.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,6 +30,14 @@
 	},
 	"atlassian": {
 		"team": "Search Platform: Search Experience",
+		"slack": {
+			"channel": "#search-plex-prs",
+			"notifications": {
+				"mergedPR": {
+					"message": "A PR was merged in @atlaskit/user-picker without maintainer approval."
+				}
+			}
+		},
 		"website": {
 			"name": "User Picker"
 		}
@@ -40,17 +48,17 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.15.0",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.21.0",
 		"@atlaskit/logo": "^14.3.0",
-		"@atlaskit/lozenge": "^11.10.0",
+		"@atlaskit/lozenge": "^11.11.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^12.2.0",
-		"@atlaskit/select": "^17.19.0",
+		"@atlaskit/select": "^18.0.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/teams-avatar": "^1.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",