@atlaskit/user-picker 11.21.2 → 11.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/user-picker
 
+## 11.22.0
+
+### Minor Changes
+
+- [`c474c86e4ed4d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c474c86e4ed4d) -
+  Add isHeaderFocused prop to enable tabbing through header plugin in user picker.
+
 ## 11.21.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -13,7 +13,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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.21.2";
 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

@@ -253,7 +253,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
     });
     (0, _defineProperty2.default)(_this, "handleBlur", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.isCreateTeamA11yEnabled && (_this.props.isFooterFocused || _this.props.isHeaderFocused)) {
         return;
       }
       (0, _utils.callCallback)(_this.props.onBlur, _this.getSessionId());
@@ -269,7 +269,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
     });
     (0, _defineProperty2.default)(_this, "handleClose", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.isCreateTeamA11yEnabled && (_this.props.isFooterFocused || _this.props.isHeaderFocused)) {
         return;
       }
       _this.resetInputState();
@@ -339,10 +339,14 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
             options: []
           });
           _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+          _this.props.setIsHeaderFocused && _this.props.setIsHeaderFocused(false);
         }
         if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
           _this.props.setIsFooterFocused(true);
         }
+        if (event.key === 'Tab' && _this.props.setIsHeaderFocused && _this.props.header) {
+          _this.props.setIsHeaderFocused(true);
+        }
       }
     });
     (0, _defineProperty2.default)(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
@@ -401,7 +405,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       }
     });
     (0, _defineProperty2.default)(_this, "shouldKeepMenuOpen", function () {
-      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused) || Boolean(!!_this.props.header) && Boolean(_this.props.isHeaderFocused);
     });
     _this.state = {
       options: [],
@@ -466,8 +470,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
 
-      // Close menu when isFooterFocused changes from true to false
-      if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+      // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+      if (this.isCreateTeamA11yEnabled && menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
         this.resetInputState();
         (0, _utils.callCallback)(this.props.onClose, this.getSessionId());
         this.setState({

package/dist/es2019/analytics.js

@@ -4,7 +4,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "0.0.0-development";
+const packageVersion = "11.21.2";
 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

@@ -243,7 +243,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
     });
     _defineProperty(this, "handleBlur", () => {
-      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+      if (this.isCreateTeamA11yEnabled && (this.props.isFooterFocused || this.props.isHeaderFocused)) {
         return;
       }
       callCallback(this.props.onBlur, this.getSessionId());
@@ -259,7 +259,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
     });
     _defineProperty(this, "handleClose", () => {
-      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+      if (this.isCreateTeamA11yEnabled && (this.props.isFooterFocused || this.props.isHeaderFocused)) {
         return;
       }
       this.resetInputState();
@@ -329,10 +329,14 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
             options: []
           });
           this.props.setIsFooterFocused && this.props.setIsFooterFocused(false);
+          this.props.setIsHeaderFocused && this.props.setIsHeaderFocused(false);
         }
         if (event.key === 'Tab' && this.props.setIsFooterFocused && this.props.footer) {
           this.props.setIsFooterFocused(true);
         }
+        if (event.key === 'Tab' && this.props.setIsHeaderFocused && this.props.header) {
+          this.props.setIsHeaderFocused(true);
+        }
       }
     });
     _defineProperty(this, "handleClearIndicatorHover", hoveringClearIndicator => {
@@ -385,7 +389,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         }));
       }
     });
-    _defineProperty(this, "shouldKeepMenuOpen", () => Boolean(!!this.props.footer) && Boolean(this.props.isFooterFocused));
+    _defineProperty(this, "shouldKeepMenuOpen", () => Boolean(!!this.props.footer) && Boolean(this.props.isFooterFocused) || Boolean(!!this.props.header) && Boolean(this.props.isHeaderFocused));
     this.state = {
       options: [],
       isDefaultSet: false,
@@ -441,8 +445,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputValue
     } = this.state;
 
-    // Close menu when isFooterFocused changes from true to false
-    if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+    // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+    if (this.isCreateTeamA11yEnabled && menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
       this.resetInputState();
       callCallback(this.props.onClose, this.getSessionId());
       this.setState({

package/dist/esm/analytics.js

@@ -7,7 +7,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.21.2";
 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

@@ -247,7 +247,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       });
     });
     _defineProperty(_this, "handleBlur", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.isCreateTeamA11yEnabled && (_this.props.isFooterFocused || _this.props.isHeaderFocused)) {
         return;
       }
       callCallback(_this.props.onBlur, _this.getSessionId());
@@ -263,7 +263,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       });
     });
     _defineProperty(_this, "handleClose", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.isCreateTeamA11yEnabled && (_this.props.isFooterFocused || _this.props.isHeaderFocused)) {
         return;
       }
       _this.resetInputState();
@@ -333,10 +333,14 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
             options: []
           });
           _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+          _this.props.setIsHeaderFocused && _this.props.setIsHeaderFocused(false);
         }
         if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
           _this.props.setIsFooterFocused(true);
         }
+        if (event.key === 'Tab' && _this.props.setIsHeaderFocused && _this.props.header) {
+          _this.props.setIsHeaderFocused(true);
+        }
       }
     });
     _defineProperty(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
@@ -395,7 +399,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
     });
     _defineProperty(_this, "shouldKeepMenuOpen", function () {
-      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused) || Boolean(!!_this.props.header) && Boolean(_this.props.isHeaderFocused);
     });
     _this.state = {
       options: [],
@@ -460,8 +464,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
 
-      // Close menu when isFooterFocused changes from true to false
-      if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+      // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+      if (this.isCreateTeamA11yEnabled && menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
         this.resetInputState();
         callCallback(this.props.onClose, this.getSessionId());
         this.setState({

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

@@ -98,6 +98,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -137,6 +138,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: StylesConfig;

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

@@ -47,6 +47,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -86,6 +87,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -155,6 +157,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     height?: number | string | undefined;
     includeTeamsUpdates?: boolean | undefined;
     isFooterFocused?: boolean | undefined;
+    isHeaderFocused?: boolean | undefined;
     isValidEmail?: import("./emailValidation").EmailValidator | undefined;
     loadOptions?: import("..").LoadOptions | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -173,6 +176,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     placeholderAvatar?: "person" | "team" | undefined;
     popupSelectProps?: import("@atlaskit/select").PopupSelectProps<import("..").OptionData> | undefined;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     showClearIndicator?: boolean | undefined;
     strategy?: "fixed" | "absolute" | undefined;
     subtle?: boolean | undefined;

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

@@ -38,6 +38,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -77,6 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -86,7 +88,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("..").Value;
     width?: number | string;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

package/dist/types/types.d.ts

@@ -80,6 +80,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     isDisabled?: boolean;
     /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     isFooterFocused?: boolean;
+    /** Checks if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    isHeaderFocused?: boolean;
     /** Display the  picker with a style to show the value is invalid */
     isInvalid?: boolean;
     /** Show the loading indicator. */
@@ -170,6 +172,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     search?: string;
     /** Sets if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Sets if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     /** Override default behavior and show the clear indicator. */
     showClearIndicator?: boolean;
     /** Positioning strategy for the popper element */

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

@@ -98,6 +98,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -137,6 +138,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: StylesConfig;

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

@@ -47,6 +47,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -86,6 +87,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -161,6 +163,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     height?: number | string | undefined;
     includeTeamsUpdates?: boolean | undefined;
     isFooterFocused?: boolean | undefined;
+    isHeaderFocused?: boolean | undefined;
     isValidEmail?: import("./emailValidation").EmailValidator | undefined;
     loadOptions?: import("..").LoadOptions | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -179,6 +182,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     placeholderAvatar?: "person" | "team" | undefined;
     popupSelectProps?: import("@atlaskit/select").PopupSelectProps<import("..").OptionData> | undefined;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     showClearIndicator?: boolean | undefined;
     strategy?: "fixed" | "absolute" | undefined;
     subtle?: boolean | undefined;

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

@@ -38,6 +38,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -77,6 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -86,7 +88,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("..").Value;
     width?: number | string;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -80,6 +80,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     isDisabled?: boolean;
     /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     isFooterFocused?: boolean;
+    /** Checks if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    isHeaderFocused?: boolean;
     /** Display the  picker with a style to show the value is invalid */
     isInvalid?: boolean;
     /** Show the loading indicator. */
@@ -170,6 +172,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     search?: string;
     /** Sets if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Sets if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     /** Override default behavior and show the clear indicator. */
     showClearIndicator?: boolean;
     /** Positioning strategy for the popper element */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.21.2",
+	"version": "11.22.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"