@atlaskit/user-picker 12.0.5 → 12.0.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/user-picker
 
+## 12.0.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.6
+
+### Patch Changes
+
+- [`42a9772eb71b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42a9772eb71b8) -
+  replace 'react-intl-next' alias with 'react-intl'
+
 ## 12.0.5
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -15,7 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 @typescript-eslint/consistent-type-imports
 // 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 = "12.0.6";
 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}$/;
@@ -78,24 +78,26 @@ var buildValueForAnalytics = function buildValueForAnalytics(value) {
   }
   return [];
 };
-/**
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
- */
-var customGroupLabelsAnalyticsAttributes = function customGroupLabelsAnalyticsAttributes(props) {
+var selectedCustomGroupAnalyticsAttributes = function selectedCustomGroupAnalyticsAttributes(props, option) {
+  var _props$customGroupAna;
   if (!props.customGroupLabels) {
     return {};
   }
-  return {
+  var selectedType = option === null || option === void 0 ? void 0 : option.data.type;
+  var analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
+  return _objectSpread({
     hasCustomGroupLabels: true
-  };
+  }, analyticsLabel ? {
+    selectedLabel: analyticsLabel
+  } : {});
 };
 var createDefaultPickerAttributes = function createDefaultPickerAttributes(props, session, journeyId) {
-  return _objectSpread({
+  return {
     context: props.fieldId,
     sessionId: sessionId(session),
     pickerType: pickerType(props),
     journeyId: journeyId
-  }, (0, _platformFeatureFlags.fg)('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {});
+  };
 };
 var focusEvent = exports.focusEvent = function focusEvent(props, state, session, journeyId) {
   return createEvent('ui', 'focused', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
@@ -142,7 +144,7 @@ var selectEvent = exports.selectEvent = function selectEvent(props, state, sessi
     downKeyCount: downKeyCount(session),
     result: result(arguments.length <= 4 ? undefined : arguments[4]),
     numberOfResults: numberOfResults(state)
-  }));
+  }, (0, _platformFeatureFlags.fg)('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
 };
 var searchedEvent = exports.searchedEvent = function searchedEvent(props, state, session, journeyId) {
   var searchResults = results(state);

package/dist/cjs/components/MultiValueContainer.js

@@ -19,7 +19,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _select = require("@atlaskit/select");
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
@@ -76,7 +76,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {

package/dist/cjs/components/i18n.js

@@ -34,7 +34,7 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
   teamByline: {
     id: 'fabric.elements.user-picker.team.byline',
     defaultMessage: 'Team',
-    description: 'Byline for team'
+    description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
@@ -84,12 +84,12 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
   addEmail: {
     id: 'fabric.elements.user-picker.email.add',
     defaultMessage: 'Add user',
-    description: 'Byline for valid email option.'
+    description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
     defaultMessage: 'Select an email address',
-    description: 'Byline for valid email option.'
+    description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
   },
   continueToAddEmail: {
     id: 'fabric.elements.user-picker.email.add.potential',
@@ -104,12 +104,12 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',
-    description: 'Byline for admin-managed groups'
+    description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
   },
   externalUserSourcesHeading: {
     id: 'fabric.elements.user-picker.external.sourced.from',
     defaultMessage: 'Found in:',
-    description: 'From where the external user is coming'
+    description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
   },
   externalUserSourcesError: {
     id: 'fabric.elements.user-picker.external.sourced.error',
@@ -139,7 +139,7 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
   jiraSource: {
     id: 'fabric.elements.user-picker.source.jira',
     defaultMessage: 'Jira',
-    description: 'This external user is sourced from Jira'
+    description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
   },
   confluenceSource: {
     id: 'fabric.elements.user-picker.source.confluence',
@@ -184,36 +184,36 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',
-    description: 'Label for user type'
+    description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
   },
   teamTypeLabel: {
     id: 'fabric.elements.user-picker.team.type.label',
     defaultMessage: 'Teams',
-    description: 'Label for team type'
+    description: 'Tab or section heading label in the user picker that groups results of type Teams.'
   },
   emailTypeLabel: {
     id: 'fabric.elements.user-picker.email.type.label',
     defaultMessage: 'Emails',
-    description: 'Label for email type'
+    description: 'Tab or section heading label in the user picker that groups results of type Emails.'
   },
   groupTypeLabel: {
     id: 'fabric.elements.user-picker.group.type.label',
     defaultMessage: 'Groups',
-    description: 'Label for group type'
+    description: 'Tab or section heading label in the user picker that groups results of type Groups.'
   },
   externalUserTypeLabel: {
     id: 'fabric.elements.user-picker.external.user.type.label',
     defaultMessage: 'External Users',
-    description: 'Label for external user type'
+    description: 'Tab or section heading label in the user picker that groups results of type External Users.'
   },
   customTypeLabel: {
     id: 'fabric.elements.user-picker.custom.type.label',
     defaultMessage: 'Customs',
-    description: 'Label for custom type'
+    description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
   },
   otherTypeLabel: {
     id: 'fabric.elements.user-picker.other.type.label',
     defaultMessage: 'Others',
-    description: 'Label for other type'
+    description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
   }
 });

package/dist/es2019/analytics.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 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 = "12.0.6";
 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}$/;
@@ -68,23 +68,25 @@ const buildValueForAnalytics = value => {
   }
   return [];
 };
-/**
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
- */
-const customGroupLabelsAnalyticsAttributes = props => {
+const selectedCustomGroupAnalyticsAttributes = (props, option) => {
+  var _props$customGroupAna;
   if (!props.customGroupLabels) {
     return {};
   }
+  const selectedType = option === null || option === void 0 ? void 0 : option.data.type;
+  const analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
   return {
-    hasCustomGroupLabels: true
+    hasCustomGroupLabels: true,
+    ...(analyticsLabel ? {
+      selectedLabel: analyticsLabel
+    } : {})
   };
 };
 const createDefaultPickerAttributes = (props, session, journeyId) => ({
   context: props.fieldId,
   sessionId: sessionId(session),
   pickerType: pickerType(props),
-  journeyId,
-  ...(fg('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {})
+  journeyId
 });
 export const focusEvent = (props, state, session, journeyId) => createEvent('ui', 'focused', 'userPicker', {
   ...createDefaultPickerAttributes(props, session, journeyId),
@@ -126,7 +128,8 @@ export const selectEvent = (props, state, session, journeyId, ...args) => {
     upKeyCount: upKeyCount(session),
     downKeyCount: downKeyCount(session),
     result: result(args[0]),
-    numberOfResults: numberOfResults(state)
+    numberOfResults: numberOfResults(state),
+    ...(fg('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, args[0]) : {})
   });
 };
 export const searchedEvent = (props, state, session, journeyId) => {

package/dist/es2019/components/MultiValueContainer.js

@@ -5,7 +5,7 @@ import "./MultiValueContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from './i18n';
 import { isChildInput } from './utils';

package/dist/es2019/components/i18n.js

@@ -28,7 +28,7 @@ export const messages = defineMessages({
   teamByline: {
     id: 'fabric.elements.user-picker.team.byline',
     defaultMessage: 'Team',
-    description: 'Byline for team'
+    description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
@@ -78,12 +78,12 @@ export const messages = defineMessages({
   addEmail: {
     id: 'fabric.elements.user-picker.email.add',
     defaultMessage: 'Add user',
-    description: 'Byline for valid email option.'
+    description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
     defaultMessage: 'Select an email address',
-    description: 'Byline for valid email option.'
+    description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
   },
   continueToAddEmail: {
     id: 'fabric.elements.user-picker.email.add.potential',
@@ -98,12 +98,12 @@ export const messages = defineMessages({
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',
-    description: 'Byline for admin-managed groups'
+    description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
   },
   externalUserSourcesHeading: {
     id: 'fabric.elements.user-picker.external.sourced.from',
     defaultMessage: 'Found in:',
-    description: 'From where the external user is coming'
+    description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
   },
   externalUserSourcesError: {
     id: 'fabric.elements.user-picker.external.sourced.error',
@@ -133,7 +133,7 @@ export const messages = defineMessages({
   jiraSource: {
     id: 'fabric.elements.user-picker.source.jira',
     defaultMessage: 'Jira',
-    description: 'This external user is sourced from Jira'
+    description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
   },
   confluenceSource: {
     id: 'fabric.elements.user-picker.source.confluence',
@@ -178,36 +178,36 @@ export const messages = defineMessages({
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',
-    description: 'Label for user type'
+    description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
   },
   teamTypeLabel: {
     id: 'fabric.elements.user-picker.team.type.label',
     defaultMessage: 'Teams',
-    description: 'Label for team type'
+    description: 'Tab or section heading label in the user picker that groups results of type Teams.'
   },
   emailTypeLabel: {
     id: 'fabric.elements.user-picker.email.type.label',
     defaultMessage: 'Emails',
-    description: 'Label for email type'
+    description: 'Tab or section heading label in the user picker that groups results of type Emails.'
   },
   groupTypeLabel: {
     id: 'fabric.elements.user-picker.group.type.label',
     defaultMessage: 'Groups',
-    description: 'Label for group type'
+    description: 'Tab or section heading label in the user picker that groups results of type Groups.'
   },
   externalUserTypeLabel: {
     id: 'fabric.elements.user-picker.external.user.type.label',
     defaultMessage: 'External Users',
-    description: 'Label for external user type'
+    description: 'Tab or section heading label in the user picker that groups results of type External Users.'
   },
   customTypeLabel: {
     id: 'fabric.elements.user-picker.custom.type.label',
     defaultMessage: 'Customs',
-    description: 'Label for custom type'
+    description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
   },
   otherTypeLabel: {
     id: 'fabric.elements.user-picker.other.type.label',
     defaultMessage: 'Others',
-    description: 'Label for other type'
+    description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
   }
 });

package/dist/esm/analytics.js

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 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 = "12.0.6";
 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}$/;
@@ -72,24 +72,26 @@ var buildValueForAnalytics = function buildValueForAnalytics(value) {
   }
   return [];
 };
-/**
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
- */
-var customGroupLabelsAnalyticsAttributes = function customGroupLabelsAnalyticsAttributes(props) {
+var selectedCustomGroupAnalyticsAttributes = function selectedCustomGroupAnalyticsAttributes(props, option) {
+  var _props$customGroupAna;
   if (!props.customGroupLabels) {
     return {};
   }
-  return {
+  var selectedType = option === null || option === void 0 ? void 0 : option.data.type;
+  var analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
+  return _objectSpread({
     hasCustomGroupLabels: true
-  };
+  }, analyticsLabel ? {
+    selectedLabel: analyticsLabel
+  } : {});
 };
 var createDefaultPickerAttributes = function createDefaultPickerAttributes(props, session, journeyId) {
-  return _objectSpread({
+  return {
     context: props.fieldId,
     sessionId: sessionId(session),
     pickerType: pickerType(props),
     journeyId: journeyId
-  }, fg('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {});
+  };
 };
 export var focusEvent = function focusEvent(props, state, session, journeyId) {
   return createEvent('ui', 'focused', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
@@ -136,7 +138,7 @@ export var selectEvent = function selectEvent(props, state, session, journeyId)
     downKeyCount: downKeyCount(session),
     result: result(arguments.length <= 4 ? undefined : arguments[4]),
     numberOfResults: numberOfResults(state)
-  }));
+  }, fg('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
 };
 export var searchedEvent = function searchedEvent(props, state, session, journeyId) {
   var searchResults = results(state);

package/dist/esm/components/MultiValueContainer.js

@@ -16,7 +16,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { components } from '@atlaskit/select';
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from './i18n';
 import { isChildInput } from './utils';

package/dist/esm/components/i18n.js

@@ -28,7 +28,7 @@ export var messages = defineMessages({
   teamByline: {
     id: 'fabric.elements.user-picker.team.byline',
     defaultMessage: 'Team',
-    description: 'Byline for team'
+    description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
@@ -78,12 +78,12 @@ export var messages = defineMessages({
   addEmail: {
     id: 'fabric.elements.user-picker.email.add',
     defaultMessage: 'Add user',
-    description: 'Byline for valid email option.'
+    description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
     defaultMessage: 'Select an email address',
-    description: 'Byline for valid email option.'
+    description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
   },
   continueToAddEmail: {
     id: 'fabric.elements.user-picker.email.add.potential',
@@ -98,12 +98,12 @@ export var messages = defineMessages({
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',
-    description: 'Byline for admin-managed groups'
+    description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
   },
   externalUserSourcesHeading: {
     id: 'fabric.elements.user-picker.external.sourced.from',
     defaultMessage: 'Found in:',
-    description: 'From where the external user is coming'
+    description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
   },
   externalUserSourcesError: {
     id: 'fabric.elements.user-picker.external.sourced.error',
@@ -133,7 +133,7 @@ export var messages = defineMessages({
   jiraSource: {
     id: 'fabric.elements.user-picker.source.jira',
     defaultMessage: 'Jira',
-    description: 'This external user is sourced from Jira'
+    description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
   },
   confluenceSource: {
     id: 'fabric.elements.user-picker.source.confluence',
@@ -178,36 +178,36 @@ export var messages = defineMessages({
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',
-    description: 'Label for user type'
+    description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
   },
   teamTypeLabel: {
     id: 'fabric.elements.user-picker.team.type.label',
     defaultMessage: 'Teams',
-    description: 'Label for team type'
+    description: 'Tab or section heading label in the user picker that groups results of type Teams.'
   },
   emailTypeLabel: {
     id: 'fabric.elements.user-picker.email.type.label',
     defaultMessage: 'Emails',
-    description: 'Label for email type'
+    description: 'Tab or section heading label in the user picker that groups results of type Emails.'
   },
   groupTypeLabel: {
     id: 'fabric.elements.user-picker.group.type.label',
     defaultMessage: 'Groups',
-    description: 'Label for group type'
+    description: 'Tab or section heading label in the user picker that groups results of type Groups.'
   },
   externalUserTypeLabel: {
     id: 'fabric.elements.user-picker.external.user.type.label',
     defaultMessage: 'External Users',
-    description: 'Label for external user type'
+    description: 'Tab or section heading label in the user picker that groups results of type External Users.'
   },
   customTypeLabel: {
     id: 'fabric.elements.user-picker.custom.type.label',
     defaultMessage: 'Customs',
-    description: 'Label for custom type'
+    description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
   },
   otherTypeLabel: {
     id: 'fabric.elements.user-picker.other.type.label',
     defaultMessage: 'Others',
-    description: 'Label for other type'
+    description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
   }
 });

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

@@ -85,6 +85,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
     customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
@@ -164,7 +165,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
+}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'customGroupAnalyticsLabels' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {

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

@@ -31,6 +31,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
     customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
@@ -98,7 +99,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: Value;
     width?: number | string;
-}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
+}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'customGroupAnalyticsLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,56 +1,61 @@
+import { type MemoizedFn } from 'memoize-one';
 import { ClearIndicator } from './ClearIndicator';
 import { MultiValue } from './MultiValue';
 import { MultiValueContainer } from './MultiValueContainer';
+import { type OptionProps } from './Option';
+import { type Props } from './SingleValue';
 import { Input } from './Input';
 import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
-import { type SelectComponentsConfig } from '@atlaskit/select';
-import { type OptionData } from '../types';
+import { type ClearIndicatorProps, type ControlProps, type DropdownIndicatorProps, type IndicatorsContainerProps, type InputProps, type LoadingIndicatorProps, type MultiValueGenericProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type SelectComponentsConfig, type SingleValueProps } from '@atlaskit/select';
+import { type OptionData, type UserPickerProps } from '../types';
+import type { OptionProps as ReactSelectOptionProps, GroupBase, GroupProps, ControlProps as ReactSelectControlProps, GroupHeadingProps, MenuProps, MenuListProps, MenuPortalProps, PlaceholderProps, ContainerProps, ValueContainerProps } from '@atlaskit/react-select';
+import type { ComponentType, FC } from 'react';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
-    Control: import("react").ComponentType<any>;
-    Option: import("react").FC<import("./Option").OptionProps>;
+export declare const getComponents: MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
+    Control: ComponentType<any>;
+    Option: FC<OptionProps>;
 } | {
-    Option: import("react").FC<import("./Option").OptionProps> | import("react").ComponentType<import("packages/design-system/react-select/dist/types").OptionProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
-    Control: ((props: import("@atlaskit/select").ControlProps<any> & import("..").UserPickerProps) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
-    GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    ClearIndicator: typeof ClearIndicator | ComponentType<ClearIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
+    Control: ((props: ControlProps<any> & UserPickerProps) => JSX.Element) | ComponentType<ReactSelectControlProps<OptionData, boolean, GroupBase<OptionData>>>;
+    DropdownIndicator: ComponentType<DropdownIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
+    Group?: ComponentType<GroupProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    GroupHeading?: ComponentType<GroupHeadingProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    IndicatorsContainer?: ComponentType<IndicatorsContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Input: typeof Input | ComponentType<InputProps<OptionData, boolean, GroupBase<OptionData>>>;
+    LoadingIndicator?: ComponentType<LoadingIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    LoadingMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Menu: typeof Menu | ComponentType<MenuProps<OptionData, boolean, GroupBase<OptionData>>>;
+    MenuList?: ComponentType<MenuListProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MenuPortal?: ComponentType<MenuPortalProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValue: typeof MultiValue | ComponentType<MultiValueProps<OptionData, boolean, GroupBase<OptionData>>>;
+    MultiValueContainer?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValueLabel?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValueRemove?: ComponentType<MultiValueRemoveProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    NoOptionsMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Option: FC<OptionProps> | ComponentType<ReactSelectOptionProps<OptionData, boolean, GroupBase<OptionData>>>;
+    Placeholder?: ComponentType<PlaceholderProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    SelectContainer?: ComponentType<ContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    SingleValue: ((props: Props) => JSX.Element | null) | ComponentType<SingleValueProps<OptionData, boolean, GroupBase<OptionData>>>;
+    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | ComponentType<ValueContainerProps<OptionData, boolean, GroupBase<OptionData>>>;
 }>;
-export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
-    DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
+export declare const getPopupComponents: MemoizedFn<(hasPopupTitle: boolean) => {
     ClearIndicator: typeof ClearIndicator;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof SingleValueContainer;
+    DropdownIndicator: null;
     Input: typeof PopupInput;
+    Option: FC<OptionProps>;
+    SingleValue: (props: Props) => JSX.Element | null;
+    ValueContainer: typeof SingleValueContainer;
 } | {
+    ClearIndicator: typeof ClearIndicator;
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
-    ClearIndicator: typeof ClearIndicator;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof SingleValueContainer;
     Input: typeof PopupInput;
+    Option: FC<OptionProps>;
+    SingleValue: (props: Props) => JSX.Element | null;
+    ValueContainer: typeof SingleValueContainer;
 }>;

package/dist/types/types.d.ts

@@ -33,6 +33,15 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     closeMenuOnScroll?: boolean | EventListener;
     /** Override the default components used in the user picker. */
     components?: SelectComponentsConfig<OptionData, boolean>;
+    /**
+     * Stable, locale-independent labels keyed by option type, used only for analytics events.
+     * When provided alongside `customGroupLabels`, the corresponding string will be emitted as the
+     * `selectedLabel` analytics attribute instead of the raw option type, allowing consumers to
+     * report meaningful group identifiers (e.g. `'recommendedAgents'`) without leaking display text.
+     */
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
+    /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
+    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     /** Default value for the field to be used on initial render.
      * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
      * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
@@ -66,8 +75,6 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
     /** group the options by type */
     groupByTypeOrder?: NonNullable<OptionData['type']>[];
-    /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
-    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     /** Header to be displayed in MenuList */
     header?: React.ReactNode;
     /** Sets the height of the user picker. If not set, the height settings will be based on the "compact" or "normal" appearance. */

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

@@ -85,6 +85,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
     customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
@@ -164,7 +165,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
+}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'customGroupAnalyticsLabels' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {

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

@@ -31,6 +31,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     clearValueLabel?: string;
     closeMenuOnScroll?: boolean | EventListener;
     components?: SelectComponentsConfig<OptionData, boolean>;
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
     customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     defaultValue?: DefaultValue;
     disableInput?: boolean;
@@ -98,7 +99,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: Value;
     width?: number | string;
-}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
+}, keyof WithAnalyticsEventsProps>, 'search' | 'appearance' | 'height' | 'minHeight' | 'open' | 'isDisabled' | 'options' | 'anchor' | 'footer' | 'header' | 'subtle' | 'value' | 'placeholderAvatar' | 'noOptionsMessage' | 'placeholder' | 'defaultValue' | 'autoFocus' | 'onFocus' | 'onBlur' | 'onChange' | 'onKeyDown' | 'name' | 'emailLabel' | 'addMoreMessage' | 'allowEmail' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'disableInput' | 'fieldId' | 'forwardedRef' | 'groupByTypeOrder' | 'customGroupLabels' | 'customGroupAnalyticsLabels' | 'includeTeamsUpdates' | 'inputId' | 'isClearable' | 'isFooterFocused' | 'isHeaderFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadOptionsErrorMessage' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'noBorder' | 'onClear' | 'onClose' | 'onInputChange' | 'onOpen' | 'onSelection' | 'openMenuOnClick' | 'openMenuOnFocus' | 'popupSelectProps' | 'required' | 'setIsFooterFocused' | 'setIsHeaderFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'textFieldBackgroundColor' | 'UNSAFE_hasDraggableParentComponent'> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,56 +1,61 @@
+import { type MemoizedFn } from 'memoize-one';
 import { ClearIndicator } from './ClearIndicator';
 import { MultiValue } from './MultiValue';
 import { MultiValueContainer } from './MultiValueContainer';
+import { type OptionProps } from './Option';
+import { type Props } from './SingleValue';
 import { Input } from './Input';
 import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
-import { type SelectComponentsConfig } from '@atlaskit/select';
-import { type OptionData } from '../types';
+import { type ClearIndicatorProps, type ControlProps, type DropdownIndicatorProps, type IndicatorsContainerProps, type InputProps, type LoadingIndicatorProps, type MultiValueGenericProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type SelectComponentsConfig, type SingleValueProps } from '@atlaskit/select';
+import { type OptionData, type UserPickerProps } from '../types';
+import type { OptionProps as ReactSelectOptionProps, GroupBase, GroupProps, ControlProps as ReactSelectControlProps, GroupHeadingProps, MenuProps, MenuListProps, MenuPortalProps, PlaceholderProps, ContainerProps, ValueContainerProps } from '@atlaskit/react-select';
+import type { ComponentType, FC } from 'react';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
-    Control: import("react").ComponentType<any>;
-    Option: import("react").FC<import("./Option").OptionProps>;
+export declare const getComponents: MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
+    Control: ComponentType<any>;
+    Option: FC<OptionProps>;
 } | {
-    Option: import("react").FC<import("./Option").OptionProps> | import("react").ComponentType<import("packages/design-system/react-select/dist/types").OptionProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
-    Control: ((props: import("@atlaskit/select").ControlProps<any> & import("..").UserPickerProps) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
-    GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
-    SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
-    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    ClearIndicator: typeof ClearIndicator | ComponentType<ClearIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
+    Control: ((props: ControlProps<any> & UserPickerProps) => JSX.Element) | ComponentType<ReactSelectControlProps<OptionData, boolean, GroupBase<OptionData>>>;
+    DropdownIndicator: ComponentType<DropdownIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
+    Group?: ComponentType<GroupProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    GroupHeading?: ComponentType<GroupHeadingProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    IndicatorsContainer?: ComponentType<IndicatorsContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Input: typeof Input | ComponentType<InputProps<OptionData, boolean, GroupBase<OptionData>>>;
+    LoadingIndicator?: ComponentType<LoadingIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    LoadingMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Menu: typeof Menu | ComponentType<MenuProps<OptionData, boolean, GroupBase<OptionData>>>;
+    MenuList?: ComponentType<MenuListProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MenuPortal?: ComponentType<MenuPortalProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValue: typeof MultiValue | ComponentType<MultiValueProps<OptionData, boolean, GroupBase<OptionData>>>;
+    MultiValueContainer?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValueLabel?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    MultiValueRemove?: ComponentType<MultiValueRemoveProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    NoOptionsMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    Option: FC<OptionProps> | ComponentType<ReactSelectOptionProps<OptionData, boolean, GroupBase<OptionData>>>;
+    Placeholder?: ComponentType<PlaceholderProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    SelectContainer?: ComponentType<ContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
+    SingleValue: ((props: Props) => JSX.Element | null) | ComponentType<SingleValueProps<OptionData, boolean, GroupBase<OptionData>>>;
+    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | ComponentType<ValueContainerProps<OptionData, boolean, GroupBase<OptionData>>>;
 }>;
-export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
-    DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
+export declare const getPopupComponents: MemoizedFn<(hasPopupTitle: boolean) => {
     ClearIndicator: typeof ClearIndicator;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof SingleValueContainer;
+    DropdownIndicator: null;
     Input: typeof PopupInput;
+    Option: FC<OptionProps>;
+    SingleValue: (props: Props) => JSX.Element | null;
+    ValueContainer: typeof SingleValueContainer;
 } | {
+    ClearIndicator: typeof ClearIndicator;
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
-    ClearIndicator: typeof ClearIndicator;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof SingleValueContainer;
     Input: typeof PopupInput;
+    Option: FC<OptionProps>;
+    SingleValue: (props: Props) => JSX.Element | null;
+    ValueContainer: typeof SingleValueContainer;
 }>;

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

@@ -33,6 +33,15 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     closeMenuOnScroll?: boolean | EventListener;
     /** Override the default components used in the user picker. */
     components?: SelectComponentsConfig<OptionData, boolean>;
+    /**
+     * Stable, locale-independent labels keyed by option type, used only for analytics events.
+     * When provided alongside `customGroupLabels`, the corresponding string will be emitted as the
+     * `selectedLabel` analytics attribute instead of the raw option type, allowing consumers to
+     * report meaningful group identifiers (e.g. `'recommendedAgents'`) without leaking display text.
+     */
+    customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
+    /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
+    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     /** Default value for the field to be used on initial render.
      * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
      * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
@@ -66,8 +75,6 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
     /** group the options by type */
     groupByTypeOrder?: NonNullable<OptionData['type']>[];
-    /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
-    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     /** Header to be displayed in MenuList */
     header?: React.ReactNode;
     /** Sets the height of the user picker. If not set, the height settings will be based on the "compact" or "normal" appearance. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "12.0.5",
+	"version": "12.0.7",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,21 +44,21 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-user-picker": "2.87.0",
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/avatar": "^25.12.0",
+		"@atlaskit/avatar": "^25.14.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^34.2.0",
-		"@atlaskit/logo": "^20.0.0",
-		"@atlaskit/lozenge": "^13.7.0",
+		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/logo": "^20.1.0",
+		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/people-teams-ui-public": "^4.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/select": "^21.10.0",
 		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tag": "^14.12.0",
+		"@atlaskit/tag": "^14.13.0",
 		"@atlaskit/teams-avatar": "^2.6.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.1.0",
+		"@atlaskit/tooltip": "^22.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -123,6 +123,9 @@
 		"enable-sup-archive-experience": {
 			"type": "boolean"
 		},
+		"jsm_routing_recommended_agent_minor_fix": {
+			"type": "boolean"
+		},
 		"jsm-wfo-assignee-recommendation-on-queues": {
 			"type": "boolean"
 		}