@atlaskit/user-picker 10.24.2 → 10.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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.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/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.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/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.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/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" | "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<{
+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" | "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" | "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 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" | "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<{
+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" | "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<{
+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" | "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" | "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 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" | "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<{
+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.2",
+	"version": "10.25.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.15.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.21.0",
 		"@atlaskit/logo": "^14.3.0",
 		"@atlaskit/lozenge": "^11.11.0",
 		"@atlaskit/popper": "^6.3.0",