@atlaskit/user-picker 11.2.3 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 11.3.0
+
+### Minor Changes
+
+- [#175242](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175242)
+  [`f01b0e8dbc8ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f01b0e8dbc8ba) -
+  [ux] add a new props: groupByTypeOrder to allow group the options by type
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.2.3
 
 ### Patch Changes

package/dist/cjs/components/AvatarItemOption.js

@@ -45,7 +45,6 @@ var wrapper = function wrapper(isDisabled) {
 var optionWrapper = (0, _react2.css)({
   maxWidth: '100%',
   minWidth: 0,
-  flex: '1 1 100%',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -62,7 +61,8 @@ var getTextStyle = function getTextStyle(isSecondary) {
   }, secondaryCssArgs));
 };
 var additionalInfo = (0, _react2.css)({
-  float: 'right'
+  float: 'right',
+  marginLeft: "var(--ds-space-100, 8px)"
 });
 var textWrapper = exports.textWrapper = function textWrapper(color) {
   return (0, _react2.css)({

package/dist/cjs/components/BaseUserPicker.js

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ufo = require("@atlaskit/ufo");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +23,7 @@ var _analytics = require("../analytics");
 var _batch = require("./batch");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
+var _groupOptionsByType = require("../util/group-options-by-type");
 var _ufoExperiences = require("../util/ufoExperiences");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -332,7 +334,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       var options = (0, _utils.getOptions)(_this.state.options) || [];
       var _this$props2 = _this.props,
         maxOptions = _this$props2.maxOptions,
-        isMulti = _this$props2.isMulti;
+        isMulti = _this$props2.isMulti,
+        groupByTypeOrder = _this$props2.groupByTypeOrder;
       if (maxOptions === 0) {
         return [];
       }
@@ -348,9 +351,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
             return valueIds.indexOf(option.data.id) === -1;
           });
         }
-        return filteredOptions.slice(0, maxOptions);
+        return groupByTypeOrder && (0, _platformFeatureFlags.fg)('support_group_by_type_for_user_picker') ? (0, _groupOptionsByType.groupOptionsByType)(filteredOptions.slice(0, maxOptions), groupByTypeOrder) : filteredOptions.slice(0, maxOptions);
       }
-      return options;
+      return groupByTypeOrder && (0, _platformFeatureFlags.fg)('support_group_by_type_for_user_picker') ? (0, _groupOptionsByType.groupOptionsByType)(options, groupByTypeOrder) : options;
     });
     (0, _defineProperty2.default)(_this, "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';

package/dist/cjs/components/i18n.js

@@ -135,5 +135,40 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.elements.user-picker.guest.lozenge.tooltip.group',
     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'
+  },
+  userTypeLabel: {
+    id: 'fabric.elements.user-picker.user.type.label',
+    defaultMessage: 'People',
+    description: 'Label for user type'
+  },
+  teamTypeLabel: {
+    id: 'fabric.elements.user-picker.team.type.label',
+    defaultMessage: 'Teams',
+    description: 'Label for team type'
+  },
+  emailTypeLabel: {
+    id: 'fabric.elements.user-picker.email.type.label',
+    defaultMessage: 'Emails',
+    description: 'Label for email type'
+  },
+  groupTypeLabel: {
+    id: 'fabric.elements.user-picker.group.type.label',
+    defaultMessage: 'Groups',
+    description: 'Label for group type'
+  },
+  externalUserTypeLabel: {
+    id: 'fabric.elements.user-picker.external.user.type.label',
+    defaultMessage: 'External Users',
+    description: 'Label for external user type'
+  },
+  customTypeLabel: {
+    id: 'fabric.elements.user-picker.custom.type.label',
+    defaultMessage: 'Customs',
+    description: 'Label for custom type'
+  },
+  otherTypeLabel: {
+    id: 'fabric.elements.user-picker.other.type.label',
+    defaultMessage: 'Others',
+    description: 'Label for other type'
   }
 });

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.groupOptionsByType = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _i18n = require("../../components/i18n");
+var getLabelForType = function getLabelForType(type) {
+  switch (type) {
+    case 'user':
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.userTypeLabel);
+    case 'team':
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.teamTypeLabel);
+    case 'group':
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupTypeLabel);
+    case 'custom':
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.customTypeLabel);
+    case 'external_user':
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserTypeLabel);
+    default:
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.otherTypeLabel);
+  }
+};
+var groupOptionsByType = exports.groupOptionsByType = (0, _memoizeOne.default)(function (options, groupByTypeOrder) {
+  // If groupByTypeOrder is empty, just return the original options
+  if (groupByTypeOrder.length === 0) {
+    return options;
+  }
+  var groupedMap = new Map();
+  options.forEach(function (option) {
+    var type = option.data.type || 'other';
+    if (!groupedMap.has(type)) {
+      groupedMap.set(type, []);
+    }
+    groupedMap.get(type).push(option);
+  });
+  var result = [];
+
+  // add groups in the specified order
+  // type is not in groupByTypeOrder, don't add it to the result
+  groupByTypeOrder.forEach(function (type) {
+    if (groupedMap.has(type)) {
+      result.push({
+        label: getLabelForType(type),
+        options: groupedMap.get(type)
+      });
+      groupedMap.delete(type);
+    }
+  });
+  return result;
+});

package/dist/es2019/components/AvatarItemOption.js

@@ -29,7 +29,6 @@ const wrapper = isDisabled => css({
 const optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
-  flex: '1 1 100%',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -48,7 +47,8 @@ const getTextStyle = isSecondary => {
   });
 };
 const additionalInfo = css({
-  float: 'right'
+  float: 'right',
+  marginLeft: "var(--ds-space-100, 8px)"
 });
 export const textWrapper = color => css({
   overflow: 'hidden',

package/dist/es2019/components/BaseUserPicker.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
@@ -10,6 +11,7 @@ import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEve
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { groupOptionsByType } from "../util/group-options-by-type";
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 const loadingMessage = () => null;
 const classNamePrefix = 'fabric-user-picker';
@@ -323,7 +325,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       const options = getOptions(this.state.options) || [];
       const {
         maxOptions,
-        isMulti
+        isMulti,
+        groupByTypeOrder
       } = this.props;
       if (maxOptions === 0) {
         return [];
@@ -338,9 +341,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
           const valueIds = value.map(item => item.data.id);
           filteredOptions = options.filter(option => valueIds.indexOf(option.data.id) === -1);
         }
-        return filteredOptions.slice(0, maxOptions);
+        return groupByTypeOrder && fg('support_group_by_type_for_user_picker') ? groupOptionsByType(filteredOptions.slice(0, maxOptions), groupByTypeOrder) : filteredOptions.slice(0, maxOptions);
       }
-      return options;
+      return groupByTypeOrder && fg('support_group_by_type_for_user_picker') ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
     _defineProperty(this, "getAppearance", () => this.props.appearance ? this.props.appearance : 'normal');
     _defineProperty(this, "handleClickDraggableParentComponent", () => {

package/dist/es2019/components/i18n.js

@@ -129,5 +129,40 @@ export const messages = defineMessages({
     id: 'fabric.elements.user-picker.guest.lozenge.tooltip.group',
     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'
+  },
+  userTypeLabel: {
+    id: 'fabric.elements.user-picker.user.type.label',
+    defaultMessage: 'People',
+    description: 'Label for user type'
+  },
+  teamTypeLabel: {
+    id: 'fabric.elements.user-picker.team.type.label',
+    defaultMessage: 'Teams',
+    description: 'Label for team type'
+  },
+  emailTypeLabel: {
+    id: 'fabric.elements.user-picker.email.type.label',
+    defaultMessage: 'Emails',
+    description: 'Label for email type'
+  },
+  groupTypeLabel: {
+    id: 'fabric.elements.user-picker.group.type.label',
+    defaultMessage: 'Groups',
+    description: 'Label for group type'
+  },
+  externalUserTypeLabel: {
+    id: 'fabric.elements.user-picker.external.user.type.label',
+    defaultMessage: 'External Users',
+    description: 'Label for external user type'
+  },
+  customTypeLabel: {
+    id: 'fabric.elements.user-picker.custom.type.label',
+    defaultMessage: 'Customs',
+    description: 'Label for custom type'
+  },
+  otherTypeLabel: {
+    id: 'fabric.elements.user-picker.other.type.label',
+    defaultMessage: 'Others',
+    description: 'Label for other type'
   }
 });

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { FormattedMessage } from "react-intl-next";
+import memoizeOne from "memoize-one";
+import { messages } from "../../components/i18n";
+const getLabelForType = type => {
+  switch (type) {
+    case 'user':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.userTypeLabel);
+    case 'team':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.teamTypeLabel);
+    case 'group':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.groupTypeLabel);
+    case 'custom':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.customTypeLabel);
+    case 'external_user':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserTypeLabel);
+    default:
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.otherTypeLabel);
+  }
+};
+export const groupOptionsByType = memoizeOne((options, groupByTypeOrder) => {
+  // If groupByTypeOrder is empty, just return the original options
+  if (groupByTypeOrder.length === 0) {
+    return options;
+  }
+  const groupedMap = new Map();
+  options.forEach(option => {
+    const type = option.data.type || 'other';
+    if (!groupedMap.has(type)) {
+      groupedMap.set(type, []);
+    }
+    groupedMap.get(type).push(option);
+  });
+  const result = [];
+
+  // add groups in the specified order
+  // type is not in groupByTypeOrder, don't add it to the result
+  groupByTypeOrder.forEach(type => {
+    if (groupedMap.has(type)) {
+      result.push({
+        label: getLabelForType(type),
+        options: groupedMap.get(type)
+      });
+      groupedMap.delete(type);
+    }
+  });
+  return result;
+});

package/dist/esm/components/AvatarItemOption.js

@@ -36,7 +36,6 @@ var wrapper = function wrapper(isDisabled) {
 var optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
-  flex: '1 1 100%',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -53,7 +52,8 @@ var getTextStyle = function getTextStyle(isSecondary) {
   }, secondaryCssArgs));
 };
 var additionalInfo = css({
-  float: 'right'
+  float: 'right',
+  marginLeft: "var(--ds-space-100, 8px)"
 });
 export var textWrapper = function textWrapper(color) {
   return css({

package/dist/esm/components/BaseUserPicker.js

@@ -13,6 +13,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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 { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
@@ -22,6 +23,7 @@ import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEve
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { groupOptionsByType } from "../util/group-options-by-type";
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 var loadingMessage = function loadingMessage() {
   return null;
@@ -325,7 +327,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       var options = getOptions(_this.state.options) || [];
       var _this$props2 = _this.props,
         maxOptions = _this$props2.maxOptions,
-        isMulti = _this$props2.isMulti;
+        isMulti = _this$props2.isMulti,
+        groupByTypeOrder = _this$props2.groupByTypeOrder;
       if (maxOptions === 0) {
         return [];
       }
@@ -341,9 +344,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
             return valueIds.indexOf(option.data.id) === -1;
           });
         }
-        return filteredOptions.slice(0, maxOptions);
+        return groupByTypeOrder && fg('support_group_by_type_for_user_picker') ? groupOptionsByType(filteredOptions.slice(0, maxOptions), groupByTypeOrder) : filteredOptions.slice(0, maxOptions);
       }
-      return options;
+      return groupByTypeOrder && fg('support_group_by_type_for_user_picker') ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
     _defineProperty(_this, "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';

package/dist/esm/components/i18n.js

@@ -129,5 +129,40 @@ export var messages = defineMessages({
     id: 'fabric.elements.user-picker.guest.lozenge.tooltip.group',
     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'
+  },
+  userTypeLabel: {
+    id: 'fabric.elements.user-picker.user.type.label',
+    defaultMessage: 'People',
+    description: 'Label for user type'
+  },
+  teamTypeLabel: {
+    id: 'fabric.elements.user-picker.team.type.label',
+    defaultMessage: 'Teams',
+    description: 'Label for team type'
+  },
+  emailTypeLabel: {
+    id: 'fabric.elements.user-picker.email.type.label',
+    defaultMessage: 'Emails',
+    description: 'Label for email type'
+  },
+  groupTypeLabel: {
+    id: 'fabric.elements.user-picker.group.type.label',
+    defaultMessage: 'Groups',
+    description: 'Label for group type'
+  },
+  externalUserTypeLabel: {
+    id: 'fabric.elements.user-picker.external.user.type.label',
+    defaultMessage: 'External Users',
+    description: 'Label for external user type'
+  },
+  customTypeLabel: {
+    id: 'fabric.elements.user-picker.custom.type.label',
+    defaultMessage: 'Customs',
+    description: 'Label for custom type'
+  },
+  otherTypeLabel: {
+    id: 'fabric.elements.user-picker.other.type.label',
+    defaultMessage: 'Others',
+    description: 'Label for other type'
   }
 });

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { FormattedMessage } from "react-intl-next";
+import memoizeOne from "memoize-one";
+import { messages } from "../../components/i18n";
+var getLabelForType = function getLabelForType(type) {
+  switch (type) {
+    case 'user':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.userTypeLabel);
+    case 'team':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.teamTypeLabel);
+    case 'group':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.groupTypeLabel);
+    case 'custom':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.customTypeLabel);
+    case 'external_user':
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserTypeLabel);
+    default:
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.otherTypeLabel);
+  }
+};
+export var groupOptionsByType = memoizeOne(function (options, groupByTypeOrder) {
+  // If groupByTypeOrder is empty, just return the original options
+  if (groupByTypeOrder.length === 0) {
+    return options;
+  }
+  var groupedMap = new Map();
+  options.forEach(function (option) {
+    var type = option.data.type || 'other';
+    if (!groupedMap.has(type)) {
+      groupedMap.set(type, []);
+    }
+    groupedMap.get(type).push(option);
+  });
+  var result = [];
+
+  // add groups in the specified order
+  // type is not in groupByTypeOrder, don't add it to the result
+  groupByTypeOrder.forEach(function (type) {
+    if (groupedMap.has(type)) {
+      result.push({
+        label: getLabelForType(type),
+        options: groupedMap.get(type)
+      });
+      groupedMap.delete(type);
+    }
+  });
+  return result;
+});

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

@@ -66,6 +66,11 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
+    /**
+     * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
+     * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
+     * It may be removed in a future minor or patch when a longer-term workaround is found.
+     */
     options?: OptionData[] | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -108,7 +113,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -130,9 +135,10 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
 } & {
     SelectComponent: React.ComponentType<any>;
     pickerProps?: any;
@@ -146,7 +152,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "SelectComponent" | "pickerProps"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "anchor" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "groupByTypeOrder" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -63,7 +63,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -85,9 +85,10 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
 } & {
     target: import("../types").Target;
     popupTitle?: string | undefined;
@@ -111,7 +112,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isLoading?: boolean | undefined;
     isMulti?: boolean | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     menuShouldBlockScroll?: boolean | undefined;
     name?: string | undefined;
@@ -131,6 +132,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     footer?: React.ReactNode;
     target?: import("../types").Target | undefined;
     defaultValue?: import("../types").DefaultValue;
+    anchor?: React.ComponentType<any> | undefined;
     fieldId?: string | null | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -141,7 +143,6 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
         inputValue: string;
     }) => React.ReactNode) | undefined;
     loadUserSource?: import("../types").LoadUserSource | undefined;
-    anchor?: React.ComponentType<any> | undefined;
     open?: boolean | undefined;
     onSelection?: import("../types").OnOption | undefined;
     onClear?: import("../types").OnPicker | undefined;
@@ -164,9 +165,10 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

@@ -54,7 +54,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -76,10 +76,11 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef"> & {
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "anchor" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "groupByTypeOrder"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -63,7 +63,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
         isInvalid?: boolean | undefined;
         isClearable?: boolean | undefined;
         clearValueLabel?: string | undefined;
-        menuPosition?: "absolute" | "fixed" | undefined;
+        menuPosition?: "fixed" | "absolute" | undefined;
         captureMenuScroll?: boolean | undefined;
         menuPortalTarget?: HTMLElement | undefined;
         allowEmail?: boolean | undefined;
@@ -85,9 +85,10 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
         required?: boolean | undefined;
         UNSAFE_hasDraggableParentComponent?: boolean | undefined;
         openMenuOnClick?: boolean | undefined;
-        strategy?: "absolute" | "fixed" | undefined;
+        strategy?: "fixed" | "absolute" | undefined;
         showClearIndicator?: boolean | undefined;
         forwardedRef?: import("react").ForwardedRef<import("../types").UserPickerRef> | undefined;
+        groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
     }) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
     DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
     GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;

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

@@ -129,4 +129,39 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    userTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    teamTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emailTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    groupTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    externalUserTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    customTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    otherTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -10,7 +10,7 @@ export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: str
     popupTitle: string | undefined;
     popperProps: {
         placement: Placement;
-        strategy: "absolute" | "fixed";
+        strategy: "fixed" | "absolute";
         modifiers: ({
             name: string;
             options: {

package/dist/types/types.d.ts

@@ -182,6 +182,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     showClearIndicator?: boolean;
     /** Ref to the underlying select */
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
+    /** group the options by type */
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
 };
 export type UserPickerRef = {
     focus: () => void;
@@ -340,6 +342,10 @@ export type Option<Data = OptionData> = {
     label: string;
     value: string;
 };
+export type GroupedOptions = {
+    label: React.JSX.Element;
+    options: Option[];
+};
 export interface UserSourceResult {
     sourceId: string;
     sourceType: UserSource;

package/dist/types/util/group-options-by-type/index.d.ts

@@ -0,0 +1,2 @@
+import type { OptionData, Option, GroupedOptions } from "../../types";
+export declare const groupOptionsByType: import("memoize-one").MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData['type']>[]) => Option[] | GroupedOptions[]>;

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

@@ -66,6 +66,11 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
+    /**
+     * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
+     * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
+     * It may be removed in a future minor or patch when a longer-term workaround is found.
+     */
     options?: OptionData[] | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -108,7 +113,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -130,9 +135,10 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
 } & {
     SelectComponent: React.ComponentType<any>;
     pickerProps?: any;
@@ -146,7 +152,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "SelectComponent" | "pickerProps"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "anchor" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "groupByTypeOrder" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -63,7 +63,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -85,9 +85,10 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
 } & {
     target: import("../types").Target;
     popupTitle?: string | undefined;
@@ -117,7 +118,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isInvalid?: boolean | undefined;
     isLoading?: boolean | undefined;
     isMulti?: boolean | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     menuShouldBlockScroll?: boolean | undefined;
     name?: string | undefined;
@@ -137,6 +138,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     footer?: React.ReactNode;
     target?: import("../types").Target | undefined;
     defaultValue?: import("../types").DefaultValue;
+    anchor?: React.ComponentType<any> | undefined;
     fieldId?: string | null | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -147,7 +149,6 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
         inputValue: string;
     }) => React.ReactNode) | undefined;
     loadUserSource?: import("../types").LoadUserSource | undefined;
-    anchor?: React.ComponentType<any> | undefined;
     open?: boolean | undefined;
     onSelection?: import("../types").OnOption | undefined;
     onClear?: import("../types").OnPicker | undefined;
@@ -170,9 +171,10 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

@@ -54,7 +54,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isInvalid?: boolean | undefined;
     isClearable?: boolean | undefined;
     clearValueLabel?: string | undefined;
-    menuPosition?: "absolute" | "fixed" | undefined;
+    menuPosition?: "fixed" | "absolute" | undefined;
     captureMenuScroll?: boolean | undefined;
     menuPortalTarget?: HTMLElement | undefined;
     allowEmail?: boolean | undefined;
@@ -76,10 +76,11 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    strategy?: "absolute" | "fixed" | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
     showClearIndicator?: boolean | undefined;
     forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef"> & {
+    groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "anchor" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "groupByTypeOrder"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -63,7 +63,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
         isInvalid?: boolean | undefined;
         isClearable?: boolean | undefined;
         clearValueLabel?: string | undefined;
-        menuPosition?: "absolute" | "fixed" | undefined;
+        menuPosition?: "fixed" | "absolute" | undefined;
         captureMenuScroll?: boolean | undefined;
         menuPortalTarget?: HTMLElement | undefined;
         allowEmail?: boolean | undefined;
@@ -85,9 +85,10 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
         required?: boolean | undefined;
         UNSAFE_hasDraggableParentComponent?: boolean | undefined;
         openMenuOnClick?: boolean | undefined;
-        strategy?: "absolute" | "fixed" | undefined;
+        strategy?: "fixed" | "absolute" | undefined;
         showClearIndicator?: boolean | undefined;
         forwardedRef?: import("react").ForwardedRef<import("../types").UserPickerRef> | undefined;
+        groupByTypeOrder?: NonNullable<"user" | "team" | "email" | "group" | "custom" | "external_user" | undefined>[] | undefined;
     }) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
     DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
     GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;

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

@@ -129,4 +129,39 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    userTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    teamTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emailTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    groupTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    externalUserTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    customTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    otherTypeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -10,7 +10,7 @@ export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: str
     popupTitle: string | undefined;
     popperProps: {
         placement: Placement;
-        strategy: "absolute" | "fixed";
+        strategy: "fixed" | "absolute";
         modifiers: ({
             name: string;
             options: {

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

@@ -182,6 +182,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     showClearIndicator?: boolean;
     /** Ref to the underlying select */
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
+    /** group the options by type */
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
 };
 export type UserPickerRef = {
     focus: () => void;
@@ -343,6 +345,10 @@ export type Option<Data = OptionData> = {
     label: string;
     value: string;
 };
+export type GroupedOptions = {
+    label: React.JSX.Element;
+    options: Option[];
+};
 export interface UserSourceResult {
     sourceId: string;
     sourceType: UserSource;

package/dist/types-ts4.5/util/group-options-by-type/index.d.ts

@@ -0,0 +1,2 @@
+import type { OptionData, Option, GroupedOptions } from "../../types";
+export declare const groupOptionsByType: import("memoize-one").MemoizedFn<(options: Option[], groupByTypeOrder: NonNullable<OptionData['type']>[]) => Option[] | GroupedOptions[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.2.3",
+	"version": "11.3.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,18 +51,18 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.1.0",
 		"@atlaskit/logo": "^19.1.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/people-teams-ui-public": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
-		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/select": "^20.7.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -114,6 +114,9 @@
 		},
 		"user-picker-show-clear-indicator": {
 			"type": "boolean"
+		},
+		"support_group_by_type_for_user_picker": {
+			"type": "boolean"
 		}
 	}
 }