@atlaskit/user-picker 12.0.6 → 12.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 12.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 12.0.6
4
10
 
5
11
  ### Patch Changes
@@ -15,7 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
15
15
  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
16
16
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
17
17
  var packageName = "@atlaskit/user-picker";
18
- var packageVersion = "0.0.0-development";
18
+ var packageVersion = "12.0.6";
19
19
  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}$/;
20
20
  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}$/;
21
21
  var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -78,24 +78,26 @@ var buildValueForAnalytics = function buildValueForAnalytics(value) {
78
78
  }
79
79
  return [];
80
80
  };
81
- /**
82
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
83
- */
84
- var customGroupLabelsAnalyticsAttributes = function customGroupLabelsAnalyticsAttributes(props) {
81
+ var selectedCustomGroupAnalyticsAttributes = function selectedCustomGroupAnalyticsAttributes(props, option) {
82
+ var _props$customGroupAna;
85
83
  if (!props.customGroupLabels) {
86
84
  return {};
87
85
  }
88
- return {
86
+ var selectedType = option === null || option === void 0 ? void 0 : option.data.type;
87
+ var analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
88
+ return _objectSpread({
89
89
  hasCustomGroupLabels: true
90
- };
90
+ }, analyticsLabel ? {
91
+ selectedLabel: analyticsLabel
92
+ } : {});
91
93
  };
92
94
  var createDefaultPickerAttributes = function createDefaultPickerAttributes(props, session, journeyId) {
93
- return _objectSpread({
95
+ return {
94
96
  context: props.fieldId,
95
97
  sessionId: sessionId(session),
96
98
  pickerType: pickerType(props),
97
99
  journeyId: journeyId
98
- }, (0, _platformFeatureFlags.fg)('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {});
100
+ };
99
101
  };
100
102
  var focusEvent = exports.focusEvent = function focusEvent(props, state, session, journeyId) {
101
103
  return createEvent('ui', 'focused', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
@@ -142,7 +144,7 @@ var selectEvent = exports.selectEvent = function selectEvent(props, state, sessi
142
144
  downKeyCount: downKeyCount(session),
143
145
  result: result(arguments.length <= 4 ? undefined : arguments[4]),
144
146
  numberOfResults: numberOfResults(state)
145
- }));
147
+ }, (0, _platformFeatureFlags.fg)('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
146
148
  };
147
149
  var searchedEvent = exports.searchedEvent = function searchedEvent(props, state, session, journeyId) {
148
150
  var searchResults = results(state);
@@ -34,7 +34,7 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
34
34
  teamByline: {
35
35
  id: 'fabric.elements.user-picker.team.byline',
36
36
  defaultMessage: 'Team',
37
- description: 'Byline for team'
37
+ description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
38
38
  },
39
39
  officialTeamByline: {
40
40
  id: 'fabric.elements.user-picker.team.byline.official',
@@ -84,12 +84,12 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
84
84
  addEmail: {
85
85
  id: 'fabric.elements.user-picker.email.add',
86
86
  defaultMessage: 'Add user',
87
- description: 'Byline for valid email option.'
87
+ description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
88
88
  },
89
89
  selectToAddEmail: {
90
90
  id: 'fabric.elements.user-picker.email.select.to.add',
91
91
  defaultMessage: 'Select an email address',
92
- description: 'Byline for valid email option.'
92
+ description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
93
93
  },
94
94
  continueToAddEmail: {
95
95
  id: 'fabric.elements.user-picker.email.add.potential',
@@ -104,12 +104,12 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
104
104
  groupByline: {
105
105
  id: 'fabric.elements.user-picker.group.byline',
106
106
  defaultMessage: 'Admin-managed group',
107
- description: 'Byline for admin-managed groups'
107
+ description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
108
108
  },
109
109
  externalUserSourcesHeading: {
110
110
  id: 'fabric.elements.user-picker.external.sourced.from',
111
111
  defaultMessage: 'Found in:',
112
- description: 'From where the external user is coming'
112
+ description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
113
113
  },
114
114
  externalUserSourcesError: {
115
115
  id: 'fabric.elements.user-picker.external.sourced.error',
@@ -139,7 +139,7 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
139
139
  jiraSource: {
140
140
  id: 'fabric.elements.user-picker.source.jira',
141
141
  defaultMessage: 'Jira',
142
- description: 'This external user is sourced from Jira'
142
+ description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
143
143
  },
144
144
  confluenceSource: {
145
145
  id: 'fabric.elements.user-picker.source.confluence',
@@ -184,36 +184,36 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
184
184
  userTypeLabel: {
185
185
  id: 'fabric.elements.user-picker.user.type.label',
186
186
  defaultMessage: 'People',
187
- description: 'Label for user type'
187
+ description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
188
188
  },
189
189
  teamTypeLabel: {
190
190
  id: 'fabric.elements.user-picker.team.type.label',
191
191
  defaultMessage: 'Teams',
192
- description: 'Label for team type'
192
+ description: 'Tab or section heading label in the user picker that groups results of type Teams.'
193
193
  },
194
194
  emailTypeLabel: {
195
195
  id: 'fabric.elements.user-picker.email.type.label',
196
196
  defaultMessage: 'Emails',
197
- description: 'Label for email type'
197
+ description: 'Tab or section heading label in the user picker that groups results of type Emails.'
198
198
  },
199
199
  groupTypeLabel: {
200
200
  id: 'fabric.elements.user-picker.group.type.label',
201
201
  defaultMessage: 'Groups',
202
- description: 'Label for group type'
202
+ description: 'Tab or section heading label in the user picker that groups results of type Groups.'
203
203
  },
204
204
  externalUserTypeLabel: {
205
205
  id: 'fabric.elements.user-picker.external.user.type.label',
206
206
  defaultMessage: 'External Users',
207
- description: 'Label for external user type'
207
+ description: 'Tab or section heading label in the user picker that groups results of type External Users.'
208
208
  },
209
209
  customTypeLabel: {
210
210
  id: 'fabric.elements.user-picker.custom.type.label',
211
211
  defaultMessage: 'Customs',
212
- description: 'Label for custom type'
212
+ description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
213
213
  },
214
214
  otherTypeLabel: {
215
215
  id: 'fabric.elements.user-picker.other.type.label',
216
216
  defaultMessage: 'Others',
217
- description: 'Label for other type'
217
+ description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
218
218
  }
219
219
  });
@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
6
6
  import { v4 as uuidv4 } from 'uuid';
7
7
  import { isCustom, isExternalUser } from './components/utils';
8
8
  const packageName = "@atlaskit/user-picker";
9
- const packageVersion = "0.0.0-development";
9
+ const packageVersion = "12.0.6";
10
10
  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}$/;
11
11
  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}$/;
12
12
  const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -68,23 +68,25 @@ const buildValueForAnalytics = value => {
68
68
  }
69
69
  return [];
70
70
  };
71
- /**
72
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
73
- */
74
- const customGroupLabelsAnalyticsAttributes = props => {
71
+ const selectedCustomGroupAnalyticsAttributes = (props, option) => {
72
+ var _props$customGroupAna;
75
73
  if (!props.customGroupLabels) {
76
74
  return {};
77
75
  }
76
+ const selectedType = option === null || option === void 0 ? void 0 : option.data.type;
77
+ const analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
78
78
  return {
79
- hasCustomGroupLabels: true
79
+ hasCustomGroupLabels: true,
80
+ ...(analyticsLabel ? {
81
+ selectedLabel: analyticsLabel
82
+ } : {})
80
83
  };
81
84
  };
82
85
  const createDefaultPickerAttributes = (props, session, journeyId) => ({
83
86
  context: props.fieldId,
84
87
  sessionId: sessionId(session),
85
88
  pickerType: pickerType(props),
86
- journeyId,
87
- ...(fg('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {})
89
+ journeyId
88
90
  });
89
91
  export const focusEvent = (props, state, session, journeyId) => createEvent('ui', 'focused', 'userPicker', {
90
92
  ...createDefaultPickerAttributes(props, session, journeyId),
@@ -126,7 +128,8 @@ export const selectEvent = (props, state, session, journeyId, ...args) => {
126
128
  upKeyCount: upKeyCount(session),
127
129
  downKeyCount: downKeyCount(session),
128
130
  result: result(args[0]),
129
- numberOfResults: numberOfResults(state)
131
+ numberOfResults: numberOfResults(state),
132
+ ...(fg('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, args[0]) : {})
130
133
  });
131
134
  };
132
135
  export const searchedEvent = (props, state, session, journeyId) => {
@@ -28,7 +28,7 @@ export const messages = defineMessages({
28
28
  teamByline: {
29
29
  id: 'fabric.elements.user-picker.team.byline',
30
30
  defaultMessage: 'Team',
31
- description: 'Byline for team'
31
+ description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
32
32
  },
33
33
  officialTeamByline: {
34
34
  id: 'fabric.elements.user-picker.team.byline.official',
@@ -78,12 +78,12 @@ export const messages = defineMessages({
78
78
  addEmail: {
79
79
  id: 'fabric.elements.user-picker.email.add',
80
80
  defaultMessage: 'Add user',
81
- description: 'Byline for valid email option.'
81
+ description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
82
82
  },
83
83
  selectToAddEmail: {
84
84
  id: 'fabric.elements.user-picker.email.select.to.add',
85
85
  defaultMessage: 'Select an email address',
86
- description: 'Byline for valid email option.'
86
+ description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
87
87
  },
88
88
  continueToAddEmail: {
89
89
  id: 'fabric.elements.user-picker.email.add.potential',
@@ -98,12 +98,12 @@ export const messages = defineMessages({
98
98
  groupByline: {
99
99
  id: 'fabric.elements.user-picker.group.byline',
100
100
  defaultMessage: 'Admin-managed group',
101
- description: 'Byline for admin-managed groups'
101
+ description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
102
102
  },
103
103
  externalUserSourcesHeading: {
104
104
  id: 'fabric.elements.user-picker.external.sourced.from',
105
105
  defaultMessage: 'Found in:',
106
- description: 'From where the external user is coming'
106
+ description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
107
107
  },
108
108
  externalUserSourcesError: {
109
109
  id: 'fabric.elements.user-picker.external.sourced.error',
@@ -133,7 +133,7 @@ export const messages = defineMessages({
133
133
  jiraSource: {
134
134
  id: 'fabric.elements.user-picker.source.jira',
135
135
  defaultMessage: 'Jira',
136
- description: 'This external user is sourced from Jira'
136
+ description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
137
137
  },
138
138
  confluenceSource: {
139
139
  id: 'fabric.elements.user-picker.source.confluence',
@@ -178,36 +178,36 @@ export const messages = defineMessages({
178
178
  userTypeLabel: {
179
179
  id: 'fabric.elements.user-picker.user.type.label',
180
180
  defaultMessage: 'People',
181
- description: 'Label for user type'
181
+ description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
182
182
  },
183
183
  teamTypeLabel: {
184
184
  id: 'fabric.elements.user-picker.team.type.label',
185
185
  defaultMessage: 'Teams',
186
- description: 'Label for team type'
186
+ description: 'Tab or section heading label in the user picker that groups results of type Teams.'
187
187
  },
188
188
  emailTypeLabel: {
189
189
  id: 'fabric.elements.user-picker.email.type.label',
190
190
  defaultMessage: 'Emails',
191
- description: 'Label for email type'
191
+ description: 'Tab or section heading label in the user picker that groups results of type Emails.'
192
192
  },
193
193
  groupTypeLabel: {
194
194
  id: 'fabric.elements.user-picker.group.type.label',
195
195
  defaultMessage: 'Groups',
196
- description: 'Label for group type'
196
+ description: 'Tab or section heading label in the user picker that groups results of type Groups.'
197
197
  },
198
198
  externalUserTypeLabel: {
199
199
  id: 'fabric.elements.user-picker.external.user.type.label',
200
200
  defaultMessage: 'External Users',
201
- description: 'Label for external user type'
201
+ description: 'Tab or section heading label in the user picker that groups results of type External Users.'
202
202
  },
203
203
  customTypeLabel: {
204
204
  id: 'fabric.elements.user-picker.custom.type.label',
205
205
  defaultMessage: 'Customs',
206
- description: 'Label for custom type'
206
+ description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
207
207
  },
208
208
  otherTypeLabel: {
209
209
  id: 'fabric.elements.user-picker.other.type.label',
210
210
  defaultMessage: 'Others',
211
- description: 'Label for other type'
211
+ description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
212
212
  }
213
213
  });
@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { v4 as uuidv4 } from 'uuid';
10
10
  import { isCustom, isExternalUser } from './components/utils';
11
11
  var packageName = "@atlaskit/user-picker";
12
- var packageVersion = "0.0.0-development";
12
+ var packageVersion = "12.0.6";
13
13
  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}$/;
14
14
  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}$/;
15
15
  var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -72,24 +72,26 @@ var buildValueForAnalytics = function buildValueForAnalytics(value) {
72
72
  }
73
73
  return [];
74
74
  };
75
- /**
76
- * `customGroupLabels` values are React nodes; analytics only records that custom labels are in use.
77
- */
78
- var customGroupLabelsAnalyticsAttributes = function customGroupLabelsAnalyticsAttributes(props) {
75
+ var selectedCustomGroupAnalyticsAttributes = function selectedCustomGroupAnalyticsAttributes(props, option) {
76
+ var _props$customGroupAna;
79
77
  if (!props.customGroupLabels) {
80
78
  return {};
81
79
  }
82
- return {
80
+ var selectedType = option === null || option === void 0 ? void 0 : option.data.type;
81
+ var analyticsLabel = selectedType ? (_props$customGroupAna = props.customGroupAnalyticsLabels) === null || _props$customGroupAna === void 0 ? void 0 : _props$customGroupAna[selectedType] : undefined;
82
+ return _objectSpread({
83
83
  hasCustomGroupLabels: true
84
- };
84
+ }, analyticsLabel ? {
85
+ selectedLabel: analyticsLabel
86
+ } : {});
85
87
  };
86
88
  var createDefaultPickerAttributes = function createDefaultPickerAttributes(props, session, journeyId) {
87
- return _objectSpread({
89
+ return {
88
90
  context: props.fieldId,
89
91
  sessionId: sessionId(session),
90
92
  pickerType: pickerType(props),
91
93
  journeyId: journeyId
92
- }, fg('jsm-wfo-assignee-recommendation-on-queues') ? customGroupLabelsAnalyticsAttributes(props) : {});
94
+ };
93
95
  };
94
96
  export var focusEvent = function focusEvent(props, state, session, journeyId) {
95
97
  return createEvent('ui', 'focused', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
@@ -136,7 +138,7 @@ export var selectEvent = function selectEvent(props, state, session, journeyId)
136
138
  downKeyCount: downKeyCount(session),
137
139
  result: result(arguments.length <= 4 ? undefined : arguments[4]),
138
140
  numberOfResults: numberOfResults(state)
139
- }));
141
+ }, fg('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
140
142
  };
141
143
  export var searchedEvent = function searchedEvent(props, state, session, journeyId) {
142
144
  var searchResults = results(state);
@@ -28,7 +28,7 @@ export var messages = defineMessages({
28
28
  teamByline: {
29
29
  id: 'fabric.elements.user-picker.team.byline',
30
30
  defaultMessage: 'Team',
31
- description: 'Byline for team'
31
+ description: 'Secondary text shown below a team name in the user picker drop-down list to indicate the option is a team.'
32
32
  },
33
33
  officialTeamByline: {
34
34
  id: 'fabric.elements.user-picker.team.byline.official',
@@ -78,12 +78,12 @@ export var messages = defineMessages({
78
78
  addEmail: {
79
79
  id: 'fabric.elements.user-picker.email.add',
80
80
  defaultMessage: 'Add user',
81
- description: 'Byline for valid email option.'
81
+ description: 'Label for the add-user option shown in the user picker when the user has typed a valid email address.'
82
82
  },
83
83
  selectToAddEmail: {
84
84
  id: 'fabric.elements.user-picker.email.select.to.add',
85
85
  defaultMessage: 'Select an email address',
86
- description: 'Byline for valid email option.'
86
+ description: 'Instruction text shown in the user picker prompting the user to select a typed email address to add it.'
87
87
  },
88
88
  continueToAddEmail: {
89
89
  id: 'fabric.elements.user-picker.email.add.potential',
@@ -98,12 +98,12 @@ export var messages = defineMessages({
98
98
  groupByline: {
99
99
  id: 'fabric.elements.user-picker.group.byline',
100
100
  defaultMessage: 'Admin-managed group',
101
- description: 'Byline for admin-managed groups'
101
+ description: 'Secondary text shown below a group name in the user picker drop-down list to indicate the option is an admin-managed group.'
102
102
  },
103
103
  externalUserSourcesHeading: {
104
104
  id: 'fabric.elements.user-picker.external.sourced.from',
105
105
  defaultMessage: 'Found in:',
106
- description: 'From where the external user is coming'
106
+ description: 'Label shown in the user picker beside the list of sources where an external user was found (e.g. Jira, Confluence).'
107
107
  },
108
108
  externalUserSourcesError: {
109
109
  id: 'fabric.elements.user-picker.external.sourced.error',
@@ -133,7 +133,7 @@ export var messages = defineMessages({
133
133
  jiraSource: {
134
134
  id: 'fabric.elements.user-picker.source.jira',
135
135
  defaultMessage: 'Jira',
136
- description: 'This external user is sourced from Jira'
136
+ description: 'Source label shown in the user picker to indicate that an external user was found via Jira.'
137
137
  },
138
138
  confluenceSource: {
139
139
  id: 'fabric.elements.user-picker.source.confluence',
@@ -178,36 +178,36 @@ export var messages = defineMessages({
178
178
  userTypeLabel: {
179
179
  id: 'fabric.elements.user-picker.user.type.label',
180
180
  defaultMessage: 'People',
181
- description: 'Label for user type'
181
+ description: 'Tab or section heading label in the user picker that groups results of type People (individual users).'
182
182
  },
183
183
  teamTypeLabel: {
184
184
  id: 'fabric.elements.user-picker.team.type.label',
185
185
  defaultMessage: 'Teams',
186
- description: 'Label for team type'
186
+ description: 'Tab or section heading label in the user picker that groups results of type Teams.'
187
187
  },
188
188
  emailTypeLabel: {
189
189
  id: 'fabric.elements.user-picker.email.type.label',
190
190
  defaultMessage: 'Emails',
191
- description: 'Label for email type'
191
+ description: 'Tab or section heading label in the user picker that groups results of type Emails.'
192
192
  },
193
193
  groupTypeLabel: {
194
194
  id: 'fabric.elements.user-picker.group.type.label',
195
195
  defaultMessage: 'Groups',
196
- description: 'Label for group type'
196
+ description: 'Tab or section heading label in the user picker that groups results of type Groups.'
197
197
  },
198
198
  externalUserTypeLabel: {
199
199
  id: 'fabric.elements.user-picker.external.user.type.label',
200
200
  defaultMessage: 'External Users',
201
- description: 'Label for external user type'
201
+ description: 'Tab or section heading label in the user picker that groups results of type External Users.'
202
202
  },
203
203
  customTypeLabel: {
204
204
  id: 'fabric.elements.user-picker.custom.type.label',
205
205
  defaultMessage: 'Customs',
206
- description: 'Label for custom type'
206
+ description: 'Tab or section heading label in the user picker that groups results of a custom type defined by the host application.'
207
207
  },
208
208
  otherTypeLabel: {
209
209
  id: 'fabric.elements.user-picker.other.type.label',
210
210
  defaultMessage: 'Others',
211
- description: 'Label for other type'
211
+ description: 'Tab or section heading label in the user picker that groups results that do not fit any standard type category.'
212
212
  }
213
213
  });
@@ -85,6 +85,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
85
85
  clearValueLabel?: string;
86
86
  closeMenuOnScroll?: boolean | EventListener;
87
87
  components?: SelectComponentsConfig<OptionData, boolean>;
88
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
88
89
  customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
89
90
  defaultValue?: DefaultValue;
90
91
  disableInput?: boolean;
@@ -164,7 +165,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
164
165
  */
165
166
  UNSAFE_hasDraggableParentComponent?: boolean;
166
167
  width: string | number;
167
- }, 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'> & {
168
+ }, 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'> & {
168
169
  isClearable?: boolean | undefined;
169
170
  isMulti?: boolean | undefined;
170
171
  loadOptionsErrorMessage?: ((value: {
@@ -31,6 +31,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
31
31
  clearValueLabel?: string;
32
32
  closeMenuOnScroll?: boolean | EventListener;
33
33
  components?: SelectComponentsConfig<OptionData, boolean>;
34
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
34
35
  customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
35
36
  defaultValue?: DefaultValue;
36
37
  disableInput?: boolean;
@@ -98,7 +99,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
98
99
  UNSAFE_hasDraggableParentComponent?: boolean;
99
100
  value?: Value;
100
101
  width?: number | string;
101
- }, 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'> & {
102
+ }, 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'> & {
102
103
  isMulti?: boolean | undefined;
103
104
  width?: number | string | undefined;
104
105
  } & {} & React.RefAttributes<any>>;
@@ -1,56 +1,61 @@
1
+ import { type MemoizedFn } from 'memoize-one';
1
2
  import { ClearIndicator } from './ClearIndicator';
2
3
  import { MultiValue } from './MultiValue';
3
4
  import { MultiValueContainer } from './MultiValueContainer';
5
+ import { type OptionProps } from './Option';
6
+ import { type Props } from './SingleValue';
4
7
  import { Input } from './Input';
5
8
  import { SingleValueContainer } from './SingleValueContainer';
6
9
  import { PopupInput } from './PopupInput';
7
10
  import { PopupControl } from './PopupControl';
8
11
  import { Menu } from './Menu';
9
- import { type SelectComponentsConfig } from '@atlaskit/select';
10
- import { type OptionData } from '../types';
12
+ 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';
13
+ import { type OptionData, type UserPickerProps } from '../types';
14
+ import type { OptionProps as ReactSelectOptionProps, GroupBase, GroupProps, ControlProps as ReactSelectControlProps, GroupHeadingProps, MenuProps, MenuListProps, MenuPortalProps, PlaceholderProps, ContainerProps, ValueContainerProps } from '@atlaskit/react-select';
15
+ import type { ComponentType, FC } from 'react';
11
16
  /**
12
17
  * Memoize getComponents to avoid rerenders.
13
18
  */
14
- export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
15
- Control: import("react").ComponentType<any>;
16
- Option: import("react").FC<import("./Option").OptionProps>;
19
+ export declare const getComponents: MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
20
+ Control: ComponentType<any>;
21
+ Option: FC<OptionProps>;
17
22
  } | {
18
- 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>>>;
19
- Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
20
- ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
21
- 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>>>;
22
- DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
23
- GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
24
- IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
25
- Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
26
- LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
27
- Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
28
- MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
29
- MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
30
- LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
31
- NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
32
- MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
33
- MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
34
- MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
35
- MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
36
- Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
37
- SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
38
- SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
39
- ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
23
+ ClearIndicator: typeof ClearIndicator | ComponentType<ClearIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
24
+ Control: ((props: ControlProps<any> & UserPickerProps) => JSX.Element) | ComponentType<ReactSelectControlProps<OptionData, boolean, GroupBase<OptionData>>>;
25
+ DropdownIndicator: ComponentType<DropdownIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
26
+ Group?: ComponentType<GroupProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
27
+ GroupHeading?: ComponentType<GroupHeadingProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
28
+ IndicatorsContainer?: ComponentType<IndicatorsContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
29
+ Input: typeof Input | ComponentType<InputProps<OptionData, boolean, GroupBase<OptionData>>>;
30
+ LoadingIndicator?: ComponentType<LoadingIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
31
+ LoadingMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
32
+ Menu: typeof Menu | ComponentType<MenuProps<OptionData, boolean, GroupBase<OptionData>>>;
33
+ MenuList?: ComponentType<MenuListProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
34
+ MenuPortal?: ComponentType<MenuPortalProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
35
+ MultiValue: typeof MultiValue | ComponentType<MultiValueProps<OptionData, boolean, GroupBase<OptionData>>>;
36
+ MultiValueContainer?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
37
+ MultiValueLabel?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
38
+ MultiValueRemove?: ComponentType<MultiValueRemoveProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
39
+ NoOptionsMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
40
+ Option: FC<OptionProps> | ComponentType<ReactSelectOptionProps<OptionData, boolean, GroupBase<OptionData>>>;
41
+ Placeholder?: ComponentType<PlaceholderProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
42
+ SelectContainer?: ComponentType<ContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
43
+ SingleValue: ((props: Props) => JSX.Element | null) | ComponentType<SingleValueProps<OptionData, boolean, GroupBase<OptionData>>>;
44
+ ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | ComponentType<ValueContainerProps<OptionData, boolean, GroupBase<OptionData>>>;
40
45
  }>;
41
- export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
42
- DropdownIndicator: null;
43
- SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
46
+ export declare const getPopupComponents: MemoizedFn<(hasPopupTitle: boolean) => {
44
47
  ClearIndicator: typeof ClearIndicator;
45
- Option: import("react").FC<import("./Option").OptionProps>;
46
- ValueContainer: typeof SingleValueContainer;
48
+ DropdownIndicator: null;
47
49
  Input: typeof PopupInput;
50
+ Option: FC<OptionProps>;
51
+ SingleValue: (props: Props) => JSX.Element | null;
52
+ ValueContainer: typeof SingleValueContainer;
48
53
  } | {
54
+ ClearIndicator: typeof ClearIndicator;
49
55
  Control: typeof PopupControl;
50
56
  DropdownIndicator: null;
51
- SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
52
- ClearIndicator: typeof ClearIndicator;
53
- Option: import("react").FC<import("./Option").OptionProps>;
54
- ValueContainer: typeof SingleValueContainer;
55
57
  Input: typeof PopupInput;
58
+ Option: FC<OptionProps>;
59
+ SingleValue: (props: Props) => JSX.Element | null;
60
+ ValueContainer: typeof SingleValueContainer;
56
61
  }>;
@@ -33,6 +33,15 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
33
33
  closeMenuOnScroll?: boolean | EventListener;
34
34
  /** Override the default components used in the user picker. */
35
35
  components?: SelectComponentsConfig<OptionData, boolean>;
36
+ /**
37
+ * Stable, locale-independent labels keyed by option type, used only for analytics events.
38
+ * When provided alongside `customGroupLabels`, the corresponding string will be emitted as the
39
+ * `selectedLabel` analytics attribute instead of the raw option type, allowing consumers to
40
+ * report meaningful group identifiers (e.g. `'recommendedAgents'`) without leaking display text.
41
+ */
42
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
43
+ /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
44
+ customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
36
45
  /** Default value for the field to be used on initial render.
37
46
  * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
38
47
  * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
@@ -66,8 +75,6 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
66
75
  forwardedRef?: React.ForwardedRef<UserPickerRef>;
67
76
  /** group the options by type */
68
77
  groupByTypeOrder?: NonNullable<OptionData['type']>[];
69
- /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
70
- customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
71
78
  /** Header to be displayed in MenuList */
72
79
  header?: React.ReactNode;
73
80
  /** Sets the height of the user picker. If not set, the height settings will be based on the "compact" or "normal" appearance. */
@@ -85,6 +85,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
85
85
  clearValueLabel?: string;
86
86
  closeMenuOnScroll?: boolean | EventListener;
87
87
  components?: SelectComponentsConfig<OptionData, boolean>;
88
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
88
89
  customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
89
90
  defaultValue?: DefaultValue;
90
91
  disableInput?: boolean;
@@ -164,7 +165,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
164
165
  */
165
166
  UNSAFE_hasDraggableParentComponent?: boolean;
166
167
  width: string | number;
167
- }, 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'> & {
168
+ }, 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'> & {
168
169
  isClearable?: boolean | undefined;
169
170
  isMulti?: boolean | undefined;
170
171
  loadOptionsErrorMessage?: ((value: {
@@ -31,6 +31,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
31
31
  clearValueLabel?: string;
32
32
  closeMenuOnScroll?: boolean | EventListener;
33
33
  components?: SelectComponentsConfig<OptionData, boolean>;
34
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
34
35
  customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
35
36
  defaultValue?: DefaultValue;
36
37
  disableInput?: boolean;
@@ -98,7 +99,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
98
99
  UNSAFE_hasDraggableParentComponent?: boolean;
99
100
  value?: Value;
100
101
  width?: number | string;
101
- }, 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'> & {
102
+ }, 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'> & {
102
103
  isMulti?: boolean | undefined;
103
104
  width?: number | string | undefined;
104
105
  } & {} & React.RefAttributes<any>>;
@@ -1,56 +1,61 @@
1
+ import { type MemoizedFn } from 'memoize-one';
1
2
  import { ClearIndicator } from './ClearIndicator';
2
3
  import { MultiValue } from './MultiValue';
3
4
  import { MultiValueContainer } from './MultiValueContainer';
5
+ import { type OptionProps } from './Option';
6
+ import { type Props } from './SingleValue';
4
7
  import { Input } from './Input';
5
8
  import { SingleValueContainer } from './SingleValueContainer';
6
9
  import { PopupInput } from './PopupInput';
7
10
  import { PopupControl } from './PopupControl';
8
11
  import { Menu } from './Menu';
9
- import { type SelectComponentsConfig } from '@atlaskit/select';
10
- import { type OptionData } from '../types';
12
+ 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';
13
+ import { type OptionData, type UserPickerProps } from '../types';
14
+ import type { OptionProps as ReactSelectOptionProps, GroupBase, GroupProps, ControlProps as ReactSelectControlProps, GroupHeadingProps, MenuProps, MenuListProps, MenuPortalProps, PlaceholderProps, ContainerProps, ValueContainerProps } from '@atlaskit/react-select';
15
+ import type { ComponentType, FC } from 'react';
11
16
  /**
12
17
  * Memoize getComponents to avoid rerenders.
13
18
  */
14
- export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
15
- Control: import("react").ComponentType<any>;
16
- Option: import("react").FC<import("./Option").OptionProps>;
19
+ export declare const getComponents: MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
20
+ Control: ComponentType<any>;
21
+ Option: FC<OptionProps>;
17
22
  } | {
18
- 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>>>;
19
- Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
20
- ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
21
- 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>>>;
22
- DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
23
- GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
24
- IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
25
- Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
26
- LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
27
- Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
28
- MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
29
- MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
30
- LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
31
- NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
32
- MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
33
- MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
34
- MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
35
- MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
36
- Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
37
- SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
38
- SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
39
- ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
23
+ ClearIndicator: typeof ClearIndicator | ComponentType<ClearIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
24
+ Control: ((props: ControlProps<any> & UserPickerProps) => JSX.Element) | ComponentType<ReactSelectControlProps<OptionData, boolean, GroupBase<OptionData>>>;
25
+ DropdownIndicator: ComponentType<DropdownIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | null;
26
+ Group?: ComponentType<GroupProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
27
+ GroupHeading?: ComponentType<GroupHeadingProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
28
+ IndicatorsContainer?: ComponentType<IndicatorsContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
29
+ Input: typeof Input | ComponentType<InputProps<OptionData, boolean, GroupBase<OptionData>>>;
30
+ LoadingIndicator?: ComponentType<LoadingIndicatorProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
31
+ LoadingMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
32
+ Menu: typeof Menu | ComponentType<MenuProps<OptionData, boolean, GroupBase<OptionData>>>;
33
+ MenuList?: ComponentType<MenuListProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
34
+ MenuPortal?: ComponentType<MenuPortalProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
35
+ MultiValue: typeof MultiValue | ComponentType<MultiValueProps<OptionData, boolean, GroupBase<OptionData>>>;
36
+ MultiValueContainer?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
37
+ MultiValueLabel?: ComponentType<MultiValueGenericProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
38
+ MultiValueRemove?: ComponentType<MultiValueRemoveProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
39
+ NoOptionsMessage?: ComponentType<NoticeProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
40
+ Option: FC<OptionProps> | ComponentType<ReactSelectOptionProps<OptionData, boolean, GroupBase<OptionData>>>;
41
+ Placeholder?: ComponentType<PlaceholderProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
42
+ SelectContainer?: ComponentType<ContainerProps<OptionData, boolean, GroupBase<OptionData>>> | undefined;
43
+ SingleValue: ((props: Props) => JSX.Element | null) | ComponentType<SingleValueProps<OptionData, boolean, GroupBase<OptionData>>>;
44
+ ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | ComponentType<ValueContainerProps<OptionData, boolean, GroupBase<OptionData>>>;
40
45
  }>;
41
- export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
42
- DropdownIndicator: null;
43
- SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
46
+ export declare const getPopupComponents: MemoizedFn<(hasPopupTitle: boolean) => {
44
47
  ClearIndicator: typeof ClearIndicator;
45
- Option: import("react").FC<import("./Option").OptionProps>;
46
- ValueContainer: typeof SingleValueContainer;
48
+ DropdownIndicator: null;
47
49
  Input: typeof PopupInput;
50
+ Option: FC<OptionProps>;
51
+ SingleValue: (props: Props) => JSX.Element | null;
52
+ ValueContainer: typeof SingleValueContainer;
48
53
  } | {
54
+ ClearIndicator: typeof ClearIndicator;
49
55
  Control: typeof PopupControl;
50
56
  DropdownIndicator: null;
51
- SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
52
- ClearIndicator: typeof ClearIndicator;
53
- Option: import("react").FC<import("./Option").OptionProps>;
54
- ValueContainer: typeof SingleValueContainer;
55
57
  Input: typeof PopupInput;
58
+ Option: FC<OptionProps>;
59
+ SingleValue: (props: Props) => JSX.Element | null;
60
+ ValueContainer: typeof SingleValueContainer;
56
61
  }>;
@@ -33,6 +33,15 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
33
33
  closeMenuOnScroll?: boolean | EventListener;
34
34
  /** Override the default components used in the user picker. */
35
35
  components?: SelectComponentsConfig<OptionData, boolean>;
36
+ /**
37
+ * Stable, locale-independent labels keyed by option type, used only for analytics events.
38
+ * When provided alongside `customGroupLabels`, the corresponding string will be emitted as the
39
+ * `selectedLabel` analytics attribute instead of the raw option type, allowing consumers to
40
+ * report meaningful group identifiers (e.g. `'recommendedAgents'`) without leaking display text.
41
+ */
42
+ customGroupAnalyticsLabels?: Partial<Record<NonNullable<OptionData['type']>, string>>;
43
+ /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
44
+ customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
36
45
  /** Default value for the field to be used on initial render.
37
46
  * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
38
47
  * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
@@ -66,8 +75,6 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
66
75
  forwardedRef?: React.ForwardedRef<UserPickerRef>;
67
76
  /** group the options by type */
68
77
  groupByTypeOrder?: NonNullable<OptionData['type']>[];
69
- /** Custom labels for grouped option types. Overrides default labels when groupByTypeOrder is used. */
70
- customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
71
78
  /** Header to be displayed in MenuList */
72
79
  header?: React.ReactNode;
73
80
  /** 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "12.0.6",
3
+ "version": "12.0.7",
4
4
  "description": "Fabric component for display a dropdown to select a user from",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,21 +44,21 @@
44
44
  "dependencies": {
45
45
  "@atlaskit/afm-i18n-platform-elements-user-picker": "2.87.0",
46
46
  "@atlaskit/analytics-next": "^11.2.0",
47
- "@atlaskit/avatar": "^25.13.0",
47
+ "@atlaskit/avatar": "^25.14.0",
48
48
  "@atlaskit/feature-gate-js-client": "^5.5.0",
49
49
  "@atlaskit/icon": "^34.3.0",
50
- "@atlaskit/logo": "^20.0.0",
51
- "@atlaskit/lozenge": "^13.7.0",
50
+ "@atlaskit/logo": "^20.1.0",
51
+ "@atlaskit/lozenge": "^13.8.0",
52
52
  "@atlaskit/people-teams-ui-public": "^4.0.0",
53
53
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
54
  "@atlaskit/popper": "^7.2.0",
55
55
  "@atlaskit/primitives": "^19.0.0",
56
56
  "@atlaskit/select": "^21.10.0",
57
57
  "@atlaskit/spinner": "^19.1.0",
58
- "@atlaskit/tag": "^14.12.0",
58
+ "@atlaskit/tag": "^14.13.0",
59
59
  "@atlaskit/teams-avatar": "^2.6.0",
60
60
  "@atlaskit/tokens": "^13.0.0",
61
- "@atlaskit/tooltip": "^21.2.0",
61
+ "@atlaskit/tooltip": "^22.0.0",
62
62
  "@atlaskit/ufo": "^0.4.0",
63
63
  "@babel/runtime": "^7.0.0",
64
64
  "@compiled/react": "^0.20.0",
@@ -123,6 +123,9 @@
123
123
  "enable-sup-archive-experience": {
124
124
  "type": "boolean"
125
125
  },
126
+ "jsm_routing_recommended_agent_minor_fix": {
127
+ "type": "boolean"
128
+ },
126
129
  "jsm-wfo-assignee-recommendation-on-queues": {
127
130
  "type": "boolean"
128
131
  }