@atlaskit/user-picker 11.16.0 → 11.17.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 11.17.0
+
+### Minor Changes
+
+- [`bef521afc400f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bef521afc400f) -
+  Adds prop to set user picker & smart user picker as open/closed
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.16.1
+
+### Patch Changes
+
+- [`20c95ab442102`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20c95ab442102) -
+  Suppres no-literal-string-in-jsx
+
 ## 11.16.0
 
 ### Minor Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -25,6 +25,7 @@ var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _groupOptionsByType = require("../util/group-options-by-type");
 var _ufoExperiences = require("../util/ufoExperiences");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["aria-labelledby", "aria-describedby"];
 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; }
@@ -245,7 +246,16 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
       (0, _utils.callCallback)(_this.props.onInputChange, '', _this.getSessionId());
     });
+    (0, _defineProperty2.default)(_this, "handleOpen", function () {
+      (0, _utils.callCallback)(_this.props.onOpen, _this.getSessionId());
+      _this.setState({
+        menuIsOpen: true
+      });
+    });
     (0, _defineProperty2.default)(_this, "handleBlur", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       (0, _utils.callCallback)(_this.props.onBlur, _this.getSessionId());
       if ((0, _utils.isPopupUserPickerByComponent)(_this.props.SelectComponent)) {
         return;
@@ -258,13 +268,10 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         options: []
       });
     });
-    (0, _defineProperty2.default)(_this, "handleOpen", function () {
-      (0, _utils.callCallback)(_this.props.onOpen, _this.getSessionId());
-      _this.setState({
-        menuIsOpen: true
-      });
-    });
     (0, _defineProperty2.default)(_this, "handleClose", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       _this.resetInputState();
       (0, _utils.callCallback)(_this.props.onClose, _this.getSessionId());
       _this.setState({
@@ -325,6 +332,18 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         }
       }
       _this.props.onKeyDown && _this.props.onKeyDown(event);
+      if (_this.isCreateTeamA11yEnabled) {
+        if (event.key === 'Escape') {
+          _this.setState({
+            menuIsOpen: false,
+            options: []
+          });
+          _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+        }
+        if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
+          _this.props.setIsFooterFocused(true);
+        }
+      }
     });
     (0, _defineProperty2.default)(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
       _this.setState({
@@ -381,6 +400,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         });
       }
     });
+    (0, _defineProperty2.default)(_this, "shouldKeepMenuOpen", function () {
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+    });
     _this.state = {
       options: [],
       isDefaultSet: false,
@@ -415,6 +437,11 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     get: function get() {
       return this.props.openMenuOnClick && !this.props.isMulti;
     }
+  }, {
+    key: "isCreateTeamA11yEnabled",
+    get: function get() {
+      return (0, _platformFeatureFlags.fg)('a11y-create-team-is-not-focusable-and-has-no-btn');
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -431,7 +458,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this$state2 = this.state,
         menuIsOpen = _this$state2.menuIsOpen,
         options = _this$state2.options,
@@ -439,6 +466,16 @@ 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()) {
+        this.resetInputState();
+        (0, _utils.callCallback)(this.props.onClose, this.getSessionId());
+        this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+      }
+
       // Create a new session when the menu is opened and there is no session
       if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
         this.startSession();
@@ -460,7 +497,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
           this.session.inputChangeTime = Date.now();
         }
       }
-      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
         this.optionsShownUfoExperienceInstance.success();
       }
     }

package/dist/cjs/components/MultiValue.js

@@ -83,8 +83,10 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
-      if ((0, _utils.isTeam)(data) && data.verified) {
-        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null);
+      if ((0, _utils.isGroup)(data) && data.includeTeamsUpdates || (0, _utils.isTeam)(data) && data.verified) {
+        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+          size: data.includeTeamsUpdates ? 'small' : 'medium'
+        });
       }
       return null;
     });

package/dist/cjs/components/SingleValue.js

@@ -25,9 +25,11 @@ var styles = {
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data,
     shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
-  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified;
+  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified || (0, _utils.isGroup)(data) && data.includeTeamsUpdates;
   if (showIcon) {
-    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
+      size: data.includeTeamsUpdates ? 'small' : 'medium'
+    });
   }
   return null;
 };

package/dist/cjs/components/UserOption.js

@@ -63,6 +63,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         }, ' ', (0, _react.jsx)("span", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           css: (0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix') ? styles(color) : (0, _AvatarItemOption.textWrapper)(color)
+          // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
         }, "(", (0, _react.jsx)(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));

package/dist/cjs/components/UserPicker.js

@@ -75,6 +75,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         captureMenuScroll = _this$props.captureMenuScroll,
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
+        menuIsOpen = _this$props.menuIsOpen,
         _this$props$required = _this$props.required,
         required = _this$props$required === void 0 ? false : _this$props$required,
         _this$props$showClear = _this$props.showClearIndicator,
@@ -91,7 +92,8 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         menuShouldBlockScroll: menuShouldBlockScroll,
         captureMenuScroll: captureMenuScroll,
         required: required,
-        includeTeamsUpdates: includeTeamsUpdates
+        includeTeamsUpdates: includeTeamsUpdates,
+        menuIsOpen: menuIsOpen
       };
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel

package/dist/es2019/components/BaseUserPicker.js

@@ -13,6 +13,7 @@ import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { groupOptionsByType } from '../util/group-options-by-type';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
+import { fg } from '@atlaskit/platform-feature-flags';
 const loadingMessage = () => null;
 const classNamePrefix = 'fabric-user-picker';
 export class BaseUserPickerWithoutAnalytics extends React.Component {
@@ -235,7 +236,16 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
       callCallback(this.props.onInputChange, '', this.getSessionId());
     });
+    _defineProperty(this, "handleOpen", () => {
+      callCallback(this.props.onOpen, this.getSessionId());
+      this.setState({
+        menuIsOpen: true
+      });
+    });
     _defineProperty(this, "handleBlur", () => {
+      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+        return;
+      }
       callCallback(this.props.onBlur, this.getSessionId());
       if (isPopupUserPickerByComponent(this.props.SelectComponent)) {
         return;
@@ -248,13 +258,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         options: []
       });
     });
-    _defineProperty(this, "handleOpen", () => {
-      callCallback(this.props.onOpen, this.getSessionId());
-      this.setState({
-        menuIsOpen: true
-      });
-    });
     _defineProperty(this, "handleClose", () => {
+      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+        return;
+      }
       this.resetInputState();
       callCallback(this.props.onClose, this.getSessionId());
       this.setState({
@@ -315,6 +322,18 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         }
       }
       this.props.onKeyDown && this.props.onKeyDown(event);
+      if (this.isCreateTeamA11yEnabled) {
+        if (event.key === 'Escape') {
+          this.setState({
+            menuIsOpen: false,
+            options: []
+          });
+          this.props.setIsFooterFocused && this.props.setIsFooterFocused(false);
+        }
+        if (event.key === 'Tab' && this.props.setIsFooterFocused && this.props.footer) {
+          this.props.setIsFooterFocused(true);
+        }
+      }
     });
     _defineProperty(this, "handleClearIndicatorHover", hoveringClearIndicator => {
       this.setState({
@@ -366,6 +385,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         }));
       }
     });
+    _defineProperty(this, "shouldKeepMenuOpen", () => Boolean(!!this.props.footer) && Boolean(this.props.isFooterFocused));
     this.state = {
       options: [],
       isDefaultSet: false,
@@ -396,6 +416,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   get isMenuOpenOnClickForSingleSelect() {
     return this.props.openMenuOnClick && !this.props.isMulti;
   }
+  get isCreateTeamA11yEnabled() {
+    return fg('a11y-create-team-is-not-focusable-and-has-no-btn');
+  }
   componentDidMount() {
     const {
       open,
@@ -409,7 +432,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       this.executeLoadOptions(search);
     }
   }
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     const {
       menuIsOpen,
       options,
@@ -418,6 +441,16 @@ 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()) {
+      this.resetInputState();
+      callCallback(this.props.onClose, this.getSessionId());
+      this.setState({
+        menuIsOpen: false,
+        options: []
+      });
+    }
+
     // Create a new session when the menu is opened and there is no session
     if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
       this.startSession();
@@ -439,7 +472,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.session.inputChangeTime = Date.now();
       }
     }
-    if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+    if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
       this.optionsShownUfoExperienceInstance.success();
     }
   }

package/dist/es2019/components/MultiValue.js

@@ -77,8 +77,10 @@ export class MultiValue extends React.Component {
           data
         }
       } = this.props;
-      if (isTeam(data) && data.verified) {
-        return jsx(VerifiedTeamIcon, null);
+      if (isGroup(data) && data.includeTeamsUpdates || isTeam(data) && data.verified) {
+        return jsx(VerifiedTeamIcon, {
+          size: data.includeTeamsUpdates ? 'small' : 'medium'
+        });
       }
       return null;
     });

package/dist/es2019/components/SingleValue.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { getAvatarUrl, isTeam } from './utils';
+import { getAvatarUrl, isTeam, isGroup } from './utils';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
@@ -21,9 +21,11 @@ const ElementAfter = props => {
     },
     shouldShowVerifiedIcon
   } = props;
-  const showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified;
+  const showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified || isGroup(data) && data.includeTeamsUpdates;
   if (showIcon) {
-    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
+      size: data.includeTeamsUpdates ? 'small' : 'medium'
+    });
   }
   return null;
 };

package/dist/es2019/components/UserOption.js

@@ -47,6 +47,7 @@ export class UserOption extends React.PureComponent {
         }, ' ', jsx("span", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           css: fg('platform_user_picker_firefox_tab_fix') ? styles(color) : textWrapper(color)
+          // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
         }, "(", jsx(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));

package/dist/es2019/components/UserPicker.js

@@ -50,6 +50,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       captureMenuScroll,
       closeMenuOnScroll,
       loadUserSource,
+      menuIsOpen,
       required = false,
       showClearIndicator = false,
       includeTeamsUpdates = false
@@ -64,7 +65,8 @@ export class UserPickerWithoutAnalytics extends React.Component {
       menuShouldBlockScroll,
       captureMenuScroll,
       required,
-      includeTeamsUpdates
+      includeTeamsUpdates,
+      menuIsOpen
     };
     const pickerProps = allowEmail ? {
       ...defaultPickerProps,

package/dist/esm/components/BaseUserPicker.js

@@ -27,6 +27,7 @@ import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { groupOptionsByType } from '../util/group-options-by-type';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
+import { fg } from '@atlaskit/platform-feature-flags';
 var loadingMessage = function loadingMessage() {
   return null;
 };
@@ -239,7 +240,16 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       });
       callCallback(_this.props.onInputChange, '', _this.getSessionId());
     });
+    _defineProperty(_this, "handleOpen", function () {
+      callCallback(_this.props.onOpen, _this.getSessionId());
+      _this.setState({
+        menuIsOpen: true
+      });
+    });
     _defineProperty(_this, "handleBlur", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       callCallback(_this.props.onBlur, _this.getSessionId());
       if (isPopupUserPickerByComponent(_this.props.SelectComponent)) {
         return;
@@ -252,13 +262,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         options: []
       });
     });
-    _defineProperty(_this, "handleOpen", function () {
-      callCallback(_this.props.onOpen, _this.getSessionId());
-      _this.setState({
-        menuIsOpen: true
-      });
-    });
     _defineProperty(_this, "handleClose", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       _this.resetInputState();
       callCallback(_this.props.onClose, _this.getSessionId());
       _this.setState({
@@ -319,6 +326,18 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         }
       }
       _this.props.onKeyDown && _this.props.onKeyDown(event);
+      if (_this.isCreateTeamA11yEnabled) {
+        if (event.key === 'Escape') {
+          _this.setState({
+            menuIsOpen: false,
+            options: []
+          });
+          _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+        }
+        if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
+          _this.props.setIsFooterFocused(true);
+        }
+      }
     });
     _defineProperty(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
       _this.setState({
@@ -375,6 +394,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         });
       }
     });
+    _defineProperty(_this, "shouldKeepMenuOpen", function () {
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+    });
     _this.state = {
       options: [],
       isDefaultSet: false,
@@ -409,6 +431,11 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     get: function get() {
       return this.props.openMenuOnClick && !this.props.isMulti;
     }
+  }, {
+    key: "isCreateTeamA11yEnabled",
+    get: function get() {
+      return fg('a11y-create-team-is-not-focusable-and-has-no-btn');
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -425,7 +452,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this$state2 = this.state,
         menuIsOpen = _this$state2.menuIsOpen,
         options = _this$state2.options,
@@ -433,6 +460,16 @@ 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()) {
+        this.resetInputState();
+        callCallback(this.props.onClose, this.getSessionId());
+        this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+      }
+
       // Create a new session when the menu is opened and there is no session
       if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
         this.startSession();
@@ -454,7 +491,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           this.session.inputChangeTime = Date.now();
         }
       }
-      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
         this.optionsShownUfoExperienceInstance.success();
       }
     }

package/dist/esm/components/MultiValue.js

@@ -78,8 +78,10 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
-      if (isTeam(data) && data.verified) {
-        return jsx(VerifiedTeamIcon, null);
+      if (isGroup(data) && data.includeTeamsUpdates || isTeam(data) && data.verified) {
+        return jsx(VerifiedTeamIcon, {
+          size: data.includeTeamsUpdates ? 'small' : 'medium'
+        });
       }
       return null;
     });

package/dist/esm/components/SingleValue.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { getAvatarUrl, isTeam } from './utils';
+import { getAvatarUrl, isTeam, isGroup } from './utils';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
@@ -17,9 +17,11 @@ var styles = {
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data,
     shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
-  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified;
+  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified || isGroup(data) && data.includeTeamsUpdates;
   if (showIcon) {
-    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
+      size: data.includeTeamsUpdates ? 'small' : 'medium'
+    });
   }
   return null;
 };

package/dist/esm/components/UserOption.js

@@ -58,6 +58,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         }, ' ', jsx("span", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           css: fg('platform_user_picker_firefox_tab_fix') ? styles(color) : textWrapper(color)
+          // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
         }, "(", jsx(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));

package/dist/esm/components/UserPicker.js

@@ -67,6 +67,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         captureMenuScroll = _this$props.captureMenuScroll,
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
+        menuIsOpen = _this$props.menuIsOpen,
         _this$props$required = _this$props.required,
         required = _this$props$required === void 0 ? false : _this$props$required,
         _this$props$showClear = _this$props.showClearIndicator,
@@ -83,7 +84,8 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         menuShouldBlockScroll: menuShouldBlockScroll,
         captureMenuScroll: captureMenuScroll,
         required: required,
-        includeTeamsUpdates: includeTeamsUpdates
+        includeTeamsUpdates: includeTeamsUpdates,
+        menuIsOpen: menuIsOpen
       };
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel

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

@@ -46,23 +46,25 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
+    private get isCreateTeamA11yEnabled();
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;
-    private handleBlur;
     private handleOpen;
+    private handleBlur;
     private handleClose;
     private handleInputChange;
     private fireEvent;
     private startSession;
     componentDidMount(): void;
-    componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
+    componentDidUpdate(prevProps: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;
     private getOptions;
     private getAppearance;
     get ariaProps(): Partial<AriaAttributes>;
     private handleClickDraggableParentComponent;
+    private shouldKeepMenuOpen;
     render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
@@ -102,6 +104,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     }) => React.ReactNode;
     loadUserSource?: import("../types").LoadUserSource;
     maxOptions?: number;
+    menuIsOpen?: boolean;
     maxPickerHeight?: number;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
@@ -138,6 +141,8 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("../types").Value;
     width?: number | string;
+    isFooterFocused?: boolean;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 } & {
     components: any;
     name?: string;
@@ -151,7 +156,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "isFooterFocused" | "setIsFooterFocused" | "pickerProps" | "SelectComponent"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

package/dist/types/components/ExternalUserOption/SourcesTooltipContent.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
-export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => React.JSX.Element;
+export declare const SourcesTooltipContent: ({ sources, sourcesLoading, }: ExternalUserSourcesData) => React.JSX.Element;

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

@@ -56,6 +56,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     }) => React.ReactNode;
     loadUserSource?: import("../types").LoadUserSource;
     maxOptions?: number;
+    menuIsOpen?: boolean;
     maxPickerHeight?: number;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
@@ -92,6 +93,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("../types").Value;
     width?: number | string;
+    isFooterFocused?: boolean;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 } & {
     boundariesElement?: import("../types").BoundariesElement;
     offset?: [number, number];
@@ -117,6 +120,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isLoading?: boolean | undefined;
     isMulti?: boolean | undefined;
+    menuIsOpen?: boolean | undefined;
     menuPosition?: "absolute" | "fixed" | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     menuShouldBlockScroll?: boolean | undefined;
@@ -175,6 +179,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     textFieldBackgroundColor?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     width?: number | string | undefined;
+    isFooterFocused?: boolean | undefined;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

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

package/dist/types/types.d.ts

@@ -109,6 +109,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     loadUserSource?: LoadUserSource;
     /** The maximum number options to be displayed in the dropdown menu during any state of search. The value should be non-negative. */
     maxOptions?: number;
+    /** Whether the menu is open or not. */
+    menuIsOpen?: boolean;
     /** Sets max height of the user picker. If not set, the height will grow based on number of picked users. */
     maxPickerHeight?: number;
     /** Sets the minimum width for the menu. If not set, menu will always have the same width of the field. */
@@ -190,6 +192,10 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     value?: Value;
     /** Width of the user picker field. It can be the amount of pixels as numbers or a string with the percentage. */
     width?: number | string;
+    /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
+    isFooterFocused?: boolean;
+    /** 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>>;
 };
 export type UserPickerRef = {
     blur: () => void;

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

@@ -46,23 +46,25 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
+    private get isCreateTeamA11yEnabled();
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;
-    private handleBlur;
     private handleOpen;
+    private handleBlur;
     private handleClose;
     private handleInputChange;
     private fireEvent;
     private startSession;
     componentDidMount(): void;
-    componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
+    componentDidUpdate(prevProps: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;
     private getOptions;
     private getAppearance;
     get ariaProps(): Partial<AriaAttributes>;
     private handleClickDraggableParentComponent;
+    private shouldKeepMenuOpen;
     render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
@@ -102,6 +104,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     }) => React.ReactNode;
     loadUserSource?: import("../types").LoadUserSource;
     maxOptions?: number;
+    menuIsOpen?: boolean;
     maxPickerHeight?: number;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
@@ -138,6 +141,8 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("../types").Value;
     width?: number | string;
+    isFooterFocused?: boolean;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 } & {
     components: any;
     name?: string;
@@ -151,7 +156,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "isFooterFocused" | "setIsFooterFocused" | "pickerProps" | "SelectComponent"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

package/dist/types-ts4.5/components/ExternalUserOption/SourcesTooltipContent.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
-export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => React.JSX.Element;
+export declare const SourcesTooltipContent: ({ sources, sourcesLoading, }: ExternalUserSourcesData) => React.JSX.Element;

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

@@ -56,6 +56,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     }) => React.ReactNode;
     loadUserSource?: import("../types").LoadUserSource;
     maxOptions?: number;
+    menuIsOpen?: boolean;
     maxPickerHeight?: number;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
@@ -92,6 +93,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("../types").Value;
     width?: number | string;
+    isFooterFocused?: boolean;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 } & {
     boundariesElement?: import("../types").BoundariesElement;
     offset?: [
@@ -123,6 +126,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isLoading?: boolean | undefined;
     isMulti?: boolean | undefined;
+    menuIsOpen?: boolean | undefined;
     menuPosition?: "absolute" | "fixed" | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     menuShouldBlockScroll?: boolean | undefined;
@@ -181,6 +185,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     textFieldBackgroundColor?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     width?: number | string | undefined;
+    isFooterFocused?: boolean | undefined;
+    setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

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

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

@@ -109,6 +109,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     loadUserSource?: LoadUserSource;
     /** The maximum number options to be displayed in the dropdown menu during any state of search. The value should be non-negative. */
     maxOptions?: number;
+    /** Whether the menu is open or not. */
+    menuIsOpen?: boolean;
     /** Sets max height of the user picker. If not set, the height will grow based on number of picked users. */
     maxPickerHeight?: number;
     /** Sets the minimum width for the menu. If not set, menu will always have the same width of the field. */
@@ -190,6 +192,10 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     value?: Value;
     /** Width of the user picker field. It can be the amount of pixels as numbers or a string with the percentage. */
     width?: number | string;
+    /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
+    isFooterFocused?: boolean;
+    /** 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>>;
 };
 export type UserPickerRef = {
     blur: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.16.0",
+	"version": "11.17.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,12 +51,12 @@
 		"@atlaskit/people-teams-ui-public": "^3.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^16.2.0",
+		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/select": "^21.4.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/teams-avatar": "^2.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -121,7 +121,7 @@
 		"jira_ai_agent_avatar_user_picker_user_option": {
 			"type": "boolean"
 		},
-		"confluence_frontend_perms_exp_teams_as_principals": {
+		"a11y-create-team-is-not-focusable-and-has-no-btn": {
 			"type": "boolean"
 		}
 	}