@atlaskit/user-picker 11.24.0 → 11.25.1

package/dist/esm/components/BaseUserPicker.js

@@ -14,6 +14,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
@@ -345,7 +346,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         hoveringClearIndicator: hoveringClearIndicator
       });
     });
-    _defineProperty(_this, "getOptions", function () {
+    _defineProperty(_this, "getOptionsOld", function () {
       var options = getOptions(_this.state.options) || [];
       var _this$props2 = _this.props,
         maxOptions = _this$props2.maxOptions,
@@ -370,6 +371,35 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
       return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
+    _defineProperty(_this, "getOptionsNew", function () {
+      var options = getOptions(_this.state.options) || [];
+      var _this$props3 = _this.props,
+        maxOptions = _this$props3.maxOptions,
+        isMulti = _this$props3.isMulti,
+        groupByTypeOrder = _this$props3.groupByTypeOrder,
+        customGroupLabels = _this$props3.customGroupLabels;
+      if (maxOptions === 0) {
+        return [];
+      }
+      if (maxOptions && maxOptions > 0 && maxOptions < options.length) {
+        var _value3 = _this.state.value;
+        var filteredOptions = options;
+        // Filter out previously selected options
+        if (isMulti && Array.isArray(_value3)) {
+          var valueIds = _value3.map(function (item) {
+            return item.data.id;
+          });
+          filteredOptions = options.filter(function (option) {
+            return valueIds.indexOf(option.data.id) === -1;
+          });
+        }
+        return groupByTypeOrder ? groupOptionsByType(filteredOptions.slice(0, maxOptions), groupByTypeOrder, customGroupLabels) : filteredOptions.slice(0, maxOptions);
+      }
+      return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder, customGroupLabels) : options;
+    });
+    _defineProperty(_this, "getOptions", function () {
+      return fg('jsm-wfo-assignee-recommendation-on-queues') ? _this.getOptionsNew() : _this.getOptionsOld();
+    });
     _defineProperty(_this, "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';
     });
@@ -435,9 +465,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-        open = _this$props3.open,
-        search = _this$props3.search;
+      var _this$props4 = this.props,
+        open = _this$props4.open,
+        search = _this$props4.search;
       // load options when the picker open
       if (open) {
         if (!this.session) {
@@ -505,41 +535,41 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        isMulti = _this$props4.isMulti,
-        isLoading = _this$props4.isLoading,
-        subtle = _this$props4.subtle,
-        noBorder = _this$props4.noBorder,
-        placeholder = _this$props4.placeholder,
-        isClearable = _this$props4.isClearable,
-        isDisabled = _this$props4.isDisabled,
-        isInvalid = _this$props4.isInvalid,
-        clearValueLabel = _this$props4.clearValueLabel,
-        menuMinWidth = _this$props4.menuMinWidth,
-        menuPortalTarget = _this$props4.menuPortalTarget,
-        loadOptionsErrorMessage = _this$props4.loadOptionsErrorMessage,
-        addMoreMessage = _this$props4.addMoreMessage,
-        noOptionsMessage = _this$props4.noOptionsMessage,
-        footer = _this$props4.footer,
-        disableInput = _this$props4.disableInput,
-        components = _this$props4.components,
-        pickerProps = _this$props4.pickerProps,
-        SelectComponent = _this$props4.SelectComponent,
-        styles = _this$props4.styles,
-        autoFocus = _this$props4.autoFocus,
-        fieldId = _this$props4.fieldId,
-        inputId = _this$props4.inputId,
-        maxPickerHeight = _this$props4.maxPickerHeight,
-        textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
-        ariaLabelledBy = _this$props4.ariaLabelledBy,
-        ariaDescribedBy = _this$props4.ariaDescribedBy,
-        ariaLive = _this$props4.ariaLive,
-        ariaLabel = _this$props4.ariaLabel,
-        name = _this$props4.name,
-        header = _this$props4.header,
-        required = _this$props4.required,
-        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent,
-        placeholderAvatar = _this$props4.placeholderAvatar;
+      var _this$props5 = this.props,
+        isMulti = _this$props5.isMulti,
+        isLoading = _this$props5.isLoading,
+        subtle = _this$props5.subtle,
+        noBorder = _this$props5.noBorder,
+        placeholder = _this$props5.placeholder,
+        isClearable = _this$props5.isClearable,
+        isDisabled = _this$props5.isDisabled,
+        isInvalid = _this$props5.isInvalid,
+        clearValueLabel = _this$props5.clearValueLabel,
+        menuMinWidth = _this$props5.menuMinWidth,
+        menuPortalTarget = _this$props5.menuPortalTarget,
+        loadOptionsErrorMessage = _this$props5.loadOptionsErrorMessage,
+        addMoreMessage = _this$props5.addMoreMessage,
+        noOptionsMessage = _this$props5.noOptionsMessage,
+        footer = _this$props5.footer,
+        disableInput = _this$props5.disableInput,
+        components = _this$props5.components,
+        pickerProps = _this$props5.pickerProps,
+        SelectComponent = _this$props5.SelectComponent,
+        styles = _this$props5.styles,
+        autoFocus = _this$props5.autoFocus,
+        fieldId = _this$props5.fieldId,
+        inputId = _this$props5.inputId,
+        maxPickerHeight = _this$props5.maxPickerHeight,
+        textFieldBackgroundColor = _this$props5.textFieldBackgroundColor,
+        ariaLabelledBy = _this$props5.ariaLabelledBy,
+        ariaDescribedBy = _this$props5.ariaDescribedBy,
+        ariaLive = _this$props5.ariaLive,
+        ariaLabel = _this$props5.ariaLabel,
+        name = _this$props5.name,
+        header = _this$props5.header,
+        required = _this$props5.required,
+        UNSAFE_hasDraggableParentComponent = _this$props5.UNSAFE_hasDraggableParentComponent,
+        placeholderAvatar = _this$props5.placeholderAvatar;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,

package/dist/esm/components/CustomOption/main.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

package/dist/esm/components/EmailOption/main.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 var outerWrapper = function outerWrapper(isDisabled) {

package/dist/esm/components/ExternalUserOption/InfoIcon.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsx jsx
  */
 import { useCallback, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { N50, N200 } from '@atlaskit/theme/colors';

package/dist/esm/components/GroupOption/main.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/people-group';

package/dist/esm/components/MultiValue.js

@@ -21,14 +21,17 @@ import { components } from '@atlaskit/select';
 import { css, jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { AvatarTag } from '@atlaskit/tag';
+import { AvatarTag, default as Tag } from '@atlaskit/tag';
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
+import Lozenge from '@atlaskit/lozenge';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from './i18n';
 export var scrollToValue = function scrollToValue(valueContainer, control) {
   var _valueContainer$getBo = valueContainer.getBoundingClientRect(),
     top = _valueContainer$getBo.top,
@@ -49,6 +52,10 @@ var groupTagContainerOld = xcss({
 var groupTagContainer = xcss({
   paddingLeft: 'space.050'
 });
+var archivedLozengeWrapper = xcss({
+  display: 'flex',
+  paddingLeft: 'space.050'
+});
 var iconStyle = css({
   display: 'flex',
   alignItems: 'center',
@@ -106,11 +113,19 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
+      var canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
       if (isGroup(data) && data.includeTeamsUpdates || isTeam(data) && data.verified) {
         return jsx(VerifiedTeamIcon, {
           size: data.includeTeamsUpdates ? 'small' : 'medium'
         });
       }
+      if (canShowArchivedLozenge) {
+        return jsx(Box, {
+          xcss: archivedLozengeWrapper
+        }, jsx(Lozenge, {
+          appearance: "default"
+        }, jsx(FormattedMessage, messages.archivedLozenge)));
+      }
       return null;
     });
     _this.containerRef = /*#__PURE__*/React.createRef();
@@ -165,6 +180,7 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
         var isEmailOption = isEmail(data);
         var avatarUrl = getAvatarUrl(data);
         var isDisabled = Boolean((_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.isDisabled);
+        var canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
         var avatarProps = avatarUrl ? {
           name: data.name,
           src: avatarUrl
@@ -176,70 +192,52 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           return true;
         };
         if (isEmailOption) {
-          var emailAvatar = function emailAvatar(props) {
-            return jsx(Avatar, _extends({}, props, {
-              children: jsx(AddOptionAvatar, {
-                isLozenge: true,
-                isPendingAction: data.isPendingAction
-              })
-            }));
-          };
           return jsx("span", {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, jsx(AvatarTag, {
+          }, jsx(Tag, {
             text: label,
-            type: "other",
-            avatar: emailAvatar,
+            elemBefore: jsx(AddOptionAvatar, {
+              isLozenge: true,
+              isPendingAction: data.isPendingAction
+            }),
             isRemovable: !isDisabled,
             onBeforeRemoveAction: removeAction
           }));
         }
         if (isGroupOption) {
-          var groupAvatar = function groupAvatar(props) {
-            return jsx(Avatar, _extends({}, props, {
-              children: jsx(Box, {
-                xcss: groupTagContainer
-              }, jsx(PeopleIcon, {
-                color: "currentColor",
-                label: "" // This element is a decorative icon and does not require a label
-                ,
-                size: "small"
-              }))
-            }));
-          };
           return jsx("span", {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, jsx(AvatarTag, {
-            type: "other",
+          }, jsx(Tag, {
             text: label,
-            isVerified: data.includeTeamsUpdates,
+            elemBefore: jsx(Box, {
+              xcss: groupTagContainer
+            }, jsx(PeopleIcon, {
+              color: "currentColor",
+              label: "" // This element is a decorative icon and does not require a label
+              ,
+              size: "small"
+            })),
             isRemovable: !isDisabled,
-            onBeforeRemoveAction: removeAction,
-            avatar: groupAvatar
+            onBeforeRemoveAction: removeAction
           }));
         }
         if (data.icon) {
-          var iconAvatar = function iconAvatar(props) {
-            return jsx(Avatar, _extends({}, props, {
-              children: jsx("div", {
-                css: iconStyle,
-                style: {
-                  color: data.iconColor
-                }
-              }, data.icon)
-            }));
-          };
           return jsx("span", {
+            ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, jsx(AvatarTag, {
+          }, jsx(Tag, {
             text: label,
-            type: isTeamOption ? 'other' : 'user',
-            avatar: iconAvatar,
+            elemBefore: jsx("div", {
+              css: iconStyle,
+              style: {
+                color: data.iconColor
+              }
+            }, data.icon),
             isRemovable: !isDisabled,
             onBeforeRemoveAction: removeAction
           }));
@@ -248,7 +246,7 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           ref: this.containerRef,
           css: avatarTagWrapperStyle,
           "data-user-picker-multi-value": true
-        }, isTeamOption ? jsx(AvatarTag, {
+        }, isTeamOption ? jsx(React.Fragment, null, jsx(AvatarTag, {
           type: "other",
           text: label,
           isVerified: isTeamOption ? data.verified : undefined,
@@ -257,7 +255,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           avatar: function avatar(props) {
             return jsx(TeamAvatar, _extends({}, props, avatarProps));
           }
-        }) : jsx(AvatarTag, {
+        }), canShowArchivedLozenge ? jsx(Box, {
+          xcss: archivedLozengeWrapper
+        }, jsx(Lozenge, {
+          appearance: "default"
+        }, jsx(FormattedMessage, messages.archivedLozenge))) : null) : jsx(AvatarTag, {
           type: "user",
           text: label,
           isRemovable: !isDisabled,

package/dist/esm/components/SingleValue.compiled.css

@@ -1,6 +1,8 @@
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1ul953f4{min-width:75pt}

package/dist/esm/components/SingleValue.js

@@ -3,17 +3,21 @@ import "./SingleValue.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
+import Lozenge from '@atlaskit/lozenge';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam, isGroup } from './utils';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+import { messages } from './i18n';
 var styles = {
   avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
   avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
-  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
+  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c",
+  archivedLozengeWrapper: "_1e0c1txw _19bv1b66"
 };
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data,
@@ -33,6 +37,7 @@ export var SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
+  var canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
   return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.avatarItem
   }, data.icon ? /*#__PURE__*/React.createElement(AvatarOrIcon, {
@@ -55,5 +60,9 @@ export var SingleValue = function SingleValue(props) {
     xcss: styles.avatarItemText
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center"
-  }, label, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
+  }, label, canShowArchivedLozenge ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.archivedLozengeWrapper
+  }, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))) : null, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
 };

package/dist/esm/components/i18n.js

@@ -170,6 +170,11 @@ export var messages = defineMessages({
     defaultMessage: 'Guest groups can only access certain spaces and have limited access to user info.',
     description: 'Tooltip text for lozenge showing that a group is for guests in Confluence'
   },
+  archivedLozenge: {
+    id: 'fabric.elements.user-picker.archived.lozenge.text',
+    defaultMessage: 'Archived',
+    description: 'Text within the lozenge when the selected team has been archived/disbanded'
+  },
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',

package/dist/esm/components/utils.js

@@ -12,7 +12,7 @@ export var isUser = function isUser(option) {
   return option.type === undefined || option.type === UserType;
 };
 export var isTeam = function isTeam(option) {
-  return option.type === TeamType;
+  return (option === null || option === void 0 ? void 0 : option.type) === TeamType;
 };
 export var isGroup = function isGroup(option) {
   return option.type === GroupType;

package/dist/esm/util/group-options-by-type/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage } from 'react-intl-next';
 import memoizeOne from 'memoize-one';
 import { messages } from '../../components/i18n';
-var getLabelForType = function getLabelForType(type) {
+var getLabelForType = function getLabelForType(type, customLabels) {
+  if (customLabels && type in customLabels && fg('jsm-wfo-assignee-recommendation-on-queues')) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, customLabels[type]);
+  }
   switch (type) {
     case 'user':
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.userTypeLabel);
@@ -18,7 +22,7 @@ var getLabelForType = function getLabelForType(type) {
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.otherTypeLabel);
   }
 };
-export var groupOptionsByType = memoizeOne(function (options, groupByTypeOrder) {
+export var groupOptionsByType = memoizeOne(function (options, groupByTypeOrder, customGroupLabels) {
   // If groupByTypeOrder is empty, just return the original options
   if (groupByTypeOrder.length === 0) {
     return options;
@@ -38,7 +42,7 @@ export var groupOptionsByType = memoizeOne(function (options, groupByTypeOrder)
   groupByTypeOrder.forEach(function (type) {
     if (groupedMap.has(type)) {
       result.push({
-        label: getLabelForType(type),
+        label: getLabelForType(type, customGroupLabels),
         options: groupedMap.get(type)
       });
       groupedMap.delete(type);

package/dist/types/analytics.d.ts

@@ -1,4 +1,4 @@
-import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { UIAnalyticsEvent, type AnalyticsEventPayload, type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type UserPickerProps, type UserPickerState } from './types';
 export type UserPickerSession = {
     downCount: number;
@@ -9,7 +9,7 @@ export type UserPickerSession = {
     upCount: number;
 };
 export declare const startSession: () => UserPickerSession;
-export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => UIAnalyticsEvent;
 export interface EventCreator {
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession): AnalyticsEventPayload;
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession, ...args: any[]): AnalyticsEventPayload;

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

@@ -3,9 +3,9 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
+import { jsx, type SerializedStyles } from '@emotion/react';
 import { type LozengeProps } from '../types';
-export declare const textWrapper: (color?: string) => import("@emotion/utils").SerializedStyles;
+export declare const textWrapper: (color?: string) => SerializedStyles;
 export type AvatarItemOptionProps = {
     avatar: ReactNode;
     isDisabled?: boolean;

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

@@ -62,6 +62,8 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     componentDidUpdate(prevProps: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;
+    private getOptionsOld;
+    private getOptionsNew;
     private getOptions;
     private getAppearance;
     get ariaProps(): Partial<AriaAttributes>;
@@ -90,6 +92,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     footer?: React.ReactNode;
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
     groupByTypeOrder?: NonNullable<OptionData['type']>[];
+    customGroupLabels?: Partial<Record<NonNullable<OptionData['type']>, React.ReactNode>>;
     header?: React.ReactNode;
     height?: number | string;
     includeTeamsUpdates?: boolean;
@@ -160,7 +163,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' | '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' | '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' | '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' | '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/ExternalUserOption/index.d.ts

@@ -1,7 +1,9 @@
+import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import React from 'react';
+import type { ExternalUser } from '../../types';
 declare const AsyncExternalUserOption: React.LazyExoticComponent<React.ForwardRefExoticComponent<Omit<{
     isSelected: boolean;
     status?: string;
-    user: import("../..").ExternalUser;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
+    user: ExternalUser;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
 export default AsyncExternalUserOption;

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

@@ -3,10 +3,11 @@
  * @jsx jsx
  */
 import React from 'react';
+import { type SerializedStyles } from '@emotion/react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type ExternalUser } from '../../types';
-export declare const imageContainer: import("@emotion/utils").SerializedStyles;
-export declare const emailDomainWrapper: import("@emotion/utils").SerializedStyles;
+export declare const imageContainer: SerializedStyles;
+export declare const emailDomainWrapper: SerializedStyles;
 export type ExternalUserOptionProps = WithAnalyticsEventsProps & {
     isSelected: boolean;
     status?: string;

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

@@ -3,9 +3,9 @@
  * @jsx jsx
  */
 import React from 'react';
-import { jsx } from '@emotion/react';
+import { jsx, type SerializedStyles } from '@emotion/react';
 import { type Group } from '../../types';
-export declare const groupOptionIconWrapper: import("@emotion/utils").SerializedStyles;
+export declare const groupOptionIconWrapper: SerializedStyles;
 export type GroupOptionProps = {
     group: Group;
     includeTeamsUpdates?: boolean;