@atlaskit/user-picker 11.16.1 → 11.18.0

package/dist/cjs/i18n/zh_TW.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _zh_TW = _interopRequireDefault(require("@atlaskit/afm-i18n-platform-elements-user-picker/i18n/zh_TW"));
 /* prettier-ignore */
 /**
  * NOTE:
@@ -13,4 +11,47 @@ var _zh_TW = _interopRequireDefault(require("@atlaskit/afm-i18n-platform-element
  * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-var _default = exports.default = _zh_TW.default;
+//Chinese (Traditional)
+var _default = exports.default = {
+  'fabric.elements.user-picker.custom.type.label': '客戶',
+  'fabric.elements.user-picker.email.add': '新增使用者',
+  'fabric.elements.user-picker.email.add.potential': '輸入電子郵件地址',
+  'fabric.elements.user-picker.email.select.to.add': '選取電子郵件地址',
+  'fabric.elements.user-picker.email.type.label': '電子郵件',
+  'fabric.elements.user-picker.error.message': '發生錯誤',
+  'fabric.elements.user-picker.external.sourced.error': '我們目前無法與您建立連線。',
+  'fabric.elements.user-picker.external.sourced.from': '尋找位置：',
+  'fabric.elements.user-picker.external.user.type.label': '外部使用者',
+  'fabric.elements.user-picker.github.provider': 'GitHub',
+  'fabric.elements.user-picker.google.provider': 'Google',
+  'fabric.elements.user-picker.group.byline': '由系統管理員所管理的群組',
+  'fabric.elements.user-picker.group.byline.admin-managed': '管理員群組 {verifiedIcon}',
+  'fabric.elements.user-picker.group.type.label': '群組',
+  'fabric.elements.user-picker.guest.lozenge.text': '訪客',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.group': '訪客群組只能存取特定空間，而且只能存取有限的使用者資訊。',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.user': '訪客只能存取特定空間，而且只能存取有限的使用者資訊。',
+  'fabric.elements.user-picker.member.lozenge.text': '成員',
+  'fabric.elements.user-picker.microsoft.provider': 'Microsoft',
+  'fabric.elements.user-picker.multi.remove-item': '移除',
+  'fabric.elements.user-picker.other.type.label': '其他',
+  'fabric.elements.user-picker.placeholder': '輸入人員或團隊...',
+  'fabric.elements.user-picker.placeholder.add-more': '新增更多人員...',
+  'fabric.elements.user-picker.single.clear': '清除',
+  'fabric.elements.user-picker.slack.provider': 'Slack',
+  'fabric.elements.user-picker.source.confluence': 'Confluence',
+  'fabric.elements.user-picker.source.jira': 'Jira',
+  'fabric.elements.user-picker.source.other-atlassian': '其他 Atlassian 產品',
+  'fabric.elements.user-picker.source.other-atlassian-appify': '其他 Atlassian 應用程式',
+  'fabric.elements.user-picker.team.byline': '團隊',
+  'fabric.elements.user-picker.team.byline.official': '官方團隊 {verifiedIcon}',
+  'fabric.elements.user-picker.team.member.50plus': '團隊 • 50 名以上的成員',
+  'fabric.elements.user-picker.team.member.50plus.including.you': '團隊 • 50 名以上的成員，包含您',
+  'fabric.elements.user-picker.team.member.50plus.official': '官方團隊 {verifiedIcon} • 超過 50 名成員',
+  'fabric.elements.user-picker.team.member.50plus.official.including.you': '官方團隊 {verifiedIcon} • 超過 50 名成員，包括您',
+  'fabric.elements.user-picker.team.member.count': '{count, plural, other {團隊 • {count} 名成員}}',
+  'fabric.elements.user-picker.team.member.count.including.you': '{count, plural, other {團隊 • {count} 名成員，包含您}}',
+  'fabric.elements.user-picker.team.member.count.official': '{count, plural, other {官方團隊 {verifiedIcon} • {count} 位成員}}',
+  'fabric.elements.user-picker.team.member.count.official.including.you': '{count, plural, other {官方團隊 {verifiedIcon} • {count} 名成員，包括您}}',
+  'fabric.elements.user-picker.team.type.label': '團隊',
+  'fabric.elements.user-picker.user.type.label': '人員'
+};

package/dist/es2019/analytics.js

@@ -3,7 +3,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 = "0.0.0-development";
+const packageVersion = "11.17.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/AvatarOrIcon.js

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { SizeableAvatar } from './SizeableAvatar';
+import { getAvatarSize } from './utils';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const iconStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
+});
+const iconSizes = {
+  xsmall: css({
+    width: '20px',
+    height: '20px'
+  }),
+  small: css({
+    width: '28px',
+    height: '28px'
+  }),
+  medium: css({
+    width: '36px',
+    height: '36px'
+  })
+};
+export const AvatarOrIcon = ({
+  appearance = 'big',
+  avatarAppearanceShape,
+  icon,
+  iconColor,
+  presence,
+  src,
+  type = 'person'
+}) => {
+  // If icon is provided, render it instead of avatar
+  if (icon) {
+    const avatarSize = getAvatarSize(appearance);
+    return jsx("div", {
+      css: [iconStyle, iconSizes[avatarSize]],
+      style: {
+        color: iconColor
+      }
+    }, icon);
+  }
+
+  // Otherwise, render the avatar as before
+  return jsx(SizeableAvatar, {
+    appearance: appearance,
+    src: src,
+    presence: presence,
+    type: type,
+    avatarAppearanceShape: avatarAppearanceShape
+  });
+};

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/CustomOption/main.js

@@ -7,8 +7,10 @@ import { B400, N800, N200 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { HighlightText } from '../HighlightText';
+import { AvatarOrIcon } from '../AvatarOrIcon';
 import { SizeableAvatar } from '../SizeableAvatar';
 export class CustomOption extends React.PureComponent {
   constructor(...args) {
@@ -44,9 +46,21 @@ export class CustomOption extends React.PureComponent {
     _defineProperty(this, "renderAvatar", () => {
       const {
         data: {
-          avatarUrl
+          avatarUrl,
+          icon,
+          iconColor
         }
       } = this.props;
+      // Only use icon if feature gate is enabled
+      if (icon && fg('atlaskit_user_picker_support_icon')) {
+        return jsx(AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl
+        });
+      }
+      // Fallback to original behavior
       return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl

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

@@ -11,6 +11,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
+import { AvatarOrIcon } from '../AvatarOrIcon';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
@@ -86,10 +87,24 @@ class ExternalUserOptionImpl extends React.PureComponent {
       const {
         user: {
           avatarUrl,
-          appType
+          appType,
+          icon,
+          iconColor
         },
         status
       } = this.props;
+      // Only use icon if feature gate is enabled
+      if (icon && fg('atlaskit_user_picker_support_icon')) {
+        return jsx(AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          presence: status,
+          avatarAppearanceShape: fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(appType) : undefined
+        });
+      }
+      // Fallback to original behavior
       return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,

package/dist/es2019/components/MultiValue.js

@@ -11,10 +11,12 @@ import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
+import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const scrollToValue = (valueContainer, control) => {
   const {
     top,
@@ -65,6 +67,18 @@ export class MultiValue extends React.Component {
           LEGACY_size: "small"
         }));
       }
+
+      // Only use icon if feature gate is enabled
+      if (data.icon && fg('atlaskit_user_picker_support_icon')) {
+        return jsx(AvatarOrIcon, {
+          appearance: "multi",
+          icon: data.icon,
+          iconColor: data.iconColor,
+          src: getAvatarUrl(data),
+          type: isTeam(data) ? 'team' : 'person'
+        });
+      }
+      // Fallback to original behavior
       return jsx(SizeableAvatar, {
         appearance: "multi",
         src: getAvatarUrl(data),
@@ -77,8 +91,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

@@ -3,8 +3,9 @@ import "./SingleValue.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
+import { AvatarOrIcon } from './AvatarOrIcon';
 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 +22,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;
 };
@@ -41,7 +44,14 @@ export const SingleValue = props => {
   } = props;
   return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.avatarItem
-  }, /*#__PURE__*/React.createElement(SizeableAvatar, {
+  }, data.icon && fg('atlaskit_user_picker_support_icon') ? /*#__PURE__*/React.createElement(AvatarOrIcon, {
+    icon: data.icon,
+    iconColor: data.iconColor,
+    src: getAvatarUrl(data),
+    appearance: appearance,
+    type: isTeam(data) ? 'team' : 'person',
+    avatarAppearanceShape: fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(data.appType) : undefined
+  }) : /*#__PURE__*/React.createElement(SizeableAvatar, {
     src: getAvatarUrl(data),
     appearance: appearance,
     type: isTeam(data) ? 'team' : 'person',

package/dist/es2019/components/SingleValueContainer.js

@@ -5,6 +5,7 @@ import "./SingleValueContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { components } from '@atlaskit/select';
+import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import ValueContainerWrapper from './ValueContainerWrapper';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
@@ -31,11 +32,24 @@ export class SingleValueContainer extends React.Component {
         }
       } = this.props;
       if (isFocused || !hasValue) {
+        const userData = showUserAvatar(inputValue, value) ? value.data : undefined;
+        // Only use icon if feature gate is enabled
+        if (userData !== null && userData !== void 0 && userData.icon && fg('atlaskit_user_picker_support_icon')) {
+          return /*#__PURE__*/React.createElement(AvatarOrIcon, {
+            appearance: appearance,
+            icon: userData.icon,
+            iconColor: userData.iconColor,
+            type: placeholderAvatar,
+            src: userData.avatarUrl,
+            avatarAppearanceShape: userData && fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(userData.appType) : undefined
+          });
+        }
+        // Fallback to original behavior
         return /*#__PURE__*/React.createElement(SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
-          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined,
-          avatarAppearanceShape: value && value.data && fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(value.data.appType) : undefined
+          src: userData === null || userData === void 0 ? void 0 : userData.avatarUrl,
+          avatarAppearanceShape: userData && fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(userData.appType) : undefined
         });
       }
       return null;

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

@@ -11,9 +11,11 @@ import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { HighlightText } from '../HighlightText';
 import { messages } from '../i18n';
+import { AvatarOrIcon } from '../AvatarOrIcon';
 import { SizeableAvatar } from '../SizeableAvatar';
 export class TeamOption extends React.PureComponent {
   constructor(...args) {
@@ -103,9 +105,22 @@ export class TeamOption extends React.PureComponent {
     _defineProperty(this, "renderAvatar", () => {
       const {
         team: {
-          avatarUrl
+          avatarUrl,
+          icon,
+          iconColor
         }
       } = this.props;
+      // Only use icon if feature gate is enabled
+      if (icon && fg('atlaskit_user_picker_support_icon')) {
+        return jsx(AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          type: "team"
+        });
+      }
+      // Fallback to original behavior
       return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,

package/dist/es2019/components/UserOption.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
+import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { hasValue } from './utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -62,12 +63,27 @@ export class UserOption extends React.PureComponent {
       const {
         user: {
           avatarUrl,
-          appType
+          appType,
+          icon,
+          iconColor
         },
         status
       } = this.props;
+      const appearance = fg('platform-component-visual-refresh') ? 'medium' : 'big';
+      // Only use icon if feature gate is enabled
+      if (icon && fg('atlaskit_user_picker_support_icon')) {
+        return jsx(AvatarOrIcon, {
+          appearance: appearance,
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          presence: status,
+          avatarAppearanceShape: fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(appType) : undefined
+        });
+      }
+      // Fallback to original behavior
       return jsx(SizeableAvatar, {
-        appearance: fg('platform-component-visual-refresh') ? 'medium' : 'big',
+        appearance: appearance,
         src: avatarUrl,
         presence: status,
         avatarAppearanceShape: fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(appType) : undefined

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/es2019/i18n/cs.js

@@ -5,6 +5,47 @@
  * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-
-import translations from '@atlaskit/afm-i18n-platform-elements-user-picker/i18n/cs';
-export default translations;
+//Czech
+export default {
+  'fabric.elements.user-picker.custom.type.label': 'Vlastní',
+  'fabric.elements.user-picker.email.add': 'Přidat uživatele',
+  'fabric.elements.user-picker.email.add.potential': 'Zadejte e-mailovou adresu.',
+  'fabric.elements.user-picker.email.select.to.add': 'Vyberte e-mailovou adresu.',
+  'fabric.elements.user-picker.email.type.label': 'E-maily',
+  'fabric.elements.user-picker.error.message': 'Něco se pokazilo',
+  'fabric.elements.user-picker.external.sourced.error': 'Momentálně vás nejde připojit.',
+  'fabric.elements.user-picker.external.sourced.from': 'Nalezen v:',
+  'fabric.elements.user-picker.external.user.type.label': 'Externí uživatelé',
+  'fabric.elements.user-picker.github.provider': 'GitHub',
+  'fabric.elements.user-picker.google.provider': 'Google',
+  'fabric.elements.user-picker.group.byline': 'Skupina spravovaná administrátorem',
+  'fabric.elements.user-picker.group.byline.admin-managed': 'Skupina správců {verifiedIcon}',
+  'fabric.elements.user-picker.group.type.label': 'Skupiny',
+  'fabric.elements.user-picker.guest.lozenge.text': 'HOST',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.group': 'Skupiny hostů mají přístup pouze k určitým prostorům a mají omezený přístup k uživatelským údajům.',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.user': 'Hosté mají přístup pouze k určitým prostorům a mají omezený přístup k uživatelským údajům.',
+  'fabric.elements.user-picker.member.lozenge.text': 'ČLEN',
+  'fabric.elements.user-picker.microsoft.provider': 'Microsoft',
+  'fabric.elements.user-picker.multi.remove-item': 'Odstranit',
+  'fabric.elements.user-picker.other.type.label': 'Ostatní',
+  'fabric.elements.user-picker.placeholder': 'Zadejte osoby nebo týmy...',
+  'fabric.elements.user-picker.placeholder.add-more': 'přidat více lidí...',
+  'fabric.elements.user-picker.single.clear': 'Vymazat',
+  'fabric.elements.user-picker.slack.provider': 'Slack',
+  'fabric.elements.user-picker.source.confluence': 'Confluence',
+  'fabric.elements.user-picker.source.jira': 'Jira',
+  'fabric.elements.user-picker.source.other-atlassian': 'Ostatní produkty Atlassian',
+  'fabric.elements.user-picker.source.other-atlassian-appify': 'Ostatní aplikace Atlassian',
+  'fabric.elements.user-picker.team.byline': 'Tým',
+  'fabric.elements.user-picker.team.byline.official': 'Oficiální tým {verifiedIcon}',
+  'fabric.elements.user-picker.team.member.50plus': 'Tým • 50 a více členů',
+  'fabric.elements.user-picker.team.member.50plus.including.you': 'Tým • 50 a více členů včetně vás',
+  'fabric.elements.user-picker.team.member.50plus.official': 'Oficiální tým {verifiedIcon} • 50+ členů',
+  'fabric.elements.user-picker.team.member.50plus.official.including.you': 'Oficiální tým {verifiedIcon} • 50+ členů, včetně vás',
+  'fabric.elements.user-picker.team.member.count': '{count, plural, one {Tým • {count} člen} few {Tým • {count} členové} many {Tým • {count} člena} other {Tým • {count} členů}}',
+  'fabric.elements.user-picker.team.member.count.including.you': '{count, plural, one {Tým • {count} člen včetně vás} few {Tým • {count} členové včetně vás} many {Tým • {count} člena včetně vás} other {Tým • {count} členů včetně vás}}',
+  'fabric.elements.user-picker.team.member.count.official': '{count, plural, one {Oficiální tým {verifiedIcon} • {count} člen} few {Oficiální tým {verifiedIcon} • {count} členové} many {Oficiální tým {verifiedIcon} • {count} člena} other {Oficiální tým {verifiedIcon} • {count} členů}}',
+  'fabric.elements.user-picker.team.member.count.official.including.you': '{count, plural, one {Oficiální tým {verifiedIcon} • {count} člen, včetně vás} few {Oficiální tým {verifiedIcon} • {count} členové, včetně vás} many {Oficiální tým {verifiedIcon} • {count} člena, včetně vás} other {Oficiální tým {verifiedIcon} • {count} členů, včetně vás}}',
+  'fabric.elements.user-picker.team.type.label': 'Týmy',
+  'fabric.elements.user-picker.user.type.label': 'Lidé'
+};

package/dist/es2019/i18n/da.js

@@ -5,6 +5,47 @@
  * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-
-import translations from '@atlaskit/afm-i18n-platform-elements-user-picker/i18n/da';
-export default translations;
+//Danish (Denmark)
+export default {
+  'fabric.elements.user-picker.custom.type.label': 'Brugerdefineret',
+  'fabric.elements.user-picker.email.add': 'Tilføj bruger',
+  'fabric.elements.user-picker.email.add.potential': 'Indtast en e-mailadresse',
+  'fabric.elements.user-picker.email.select.to.add': 'Vælg en e-mailadresse',
+  'fabric.elements.user-picker.email.type.label': 'E-mails',
+  'fabric.elements.user-picker.error.message': 'Noget gik galt',
+  'fabric.elements.user-picker.external.sourced.error': 'Vi kan ikke oprette forbindelse lige nu.',
+  'fabric.elements.user-picker.external.sourced.from': 'Fundet i:',
+  'fabric.elements.user-picker.external.user.type.label': 'Eksterne brugere',
+  'fabric.elements.user-picker.github.provider': 'GitHub',
+  'fabric.elements.user-picker.google.provider': 'Google',
+  'fabric.elements.user-picker.group.byline': 'Administreret gruppe',
+  'fabric.elements.user-picker.group.byline.admin-managed': 'Administratorgruppe {verifiedIcon}',
+  'fabric.elements.user-picker.group.type.label': 'Grupper',
+  'fabric.elements.user-picker.guest.lozenge.text': 'GÆST',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.group': 'Gæstegrupper har kun adgang til bestemte områder og har begrænset adgang til brugeroplysninger.',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.user': 'Gæster har kun adgang til bestemte områder og har begrænset adgang til brugeroplysninger.',
+  'fabric.elements.user-picker.member.lozenge.text': 'Medlem',
+  'fabric.elements.user-picker.microsoft.provider': 'Microsoft',
+  'fabric.elements.user-picker.multi.remove-item': 'Fjern',
+  'fabric.elements.user-picker.other.type.label': 'Andet',
+  'fabric.elements.user-picker.placeholder': 'Indtast personer eller hold ...',
+  'fabric.elements.user-picker.placeholder.add-more': 'tilføj flere personer ...',
+  'fabric.elements.user-picker.single.clear': 'Ryd',
+  'fabric.elements.user-picker.slack.provider': 'Slack',
+  'fabric.elements.user-picker.source.confluence': 'Confluence',
+  'fabric.elements.user-picker.source.jira': 'Jira',
+  'fabric.elements.user-picker.source.other-atlassian': 'Andre Atlassian-produkter',
+  'fabric.elements.user-picker.source.other-atlassian-appify': 'Andre Atlassian-apps',
+  'fabric.elements.user-picker.team.byline': 'Team',
+  'fabric.elements.user-picker.team.byline.official': 'Officielt team {verifiedIcon}',
+  'fabric.elements.user-picker.team.member.50plus': 'Team • Over 50 medlemmer',
+  'fabric.elements.user-picker.team.member.50plus.including.you': 'Team • Over 50 medlemmer, inklusive dig',
+  'fabric.elements.user-picker.team.member.50plus.official': 'Officielt team {verifiedIcon} • over 50 medlemmer',
+  'fabric.elements.user-picker.team.member.50plus.official.including.you': 'Officielt team {verifiedIcon} • over 50 medlemmer, inklusive dig',
+  'fabric.elements.user-picker.team.member.count': '{count, plural, one {Team • {count} medlem} other {Team • {count} medlemmer}}',
+  'fabric.elements.user-picker.team.member.count.including.you': '{count, plural, one {Team • {count} medlem, inklusive dig} other {Team • {count} medlemmer, inklusive dig}}',
+  'fabric.elements.user-picker.team.member.count.official': '{count, plural, one {Officielt team {verifiedIcon} • {count} medlem} other {Officielt team {verifiedIcon} • {count} medlemmer}}',
+  'fabric.elements.user-picker.team.member.count.official.including.you': '{count, plural, one {Officielt team {verifiedIcon} • {count} medlem, inklusive dig} other {Officielt team {verifiedIcon} • {count} medlemmer, inklusive dig}}',
+  'fabric.elements.user-picker.team.type.label': 'Teams',
+  'fabric.elements.user-picker.user.type.label': 'Personer'
+};