@atlaskit/user-picker 11.0.7 → 11.0.9

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/user-picker
 
+## 11.0.9
+
+### Patch Changes
+
+- [#137751](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137751)
+  [`bffaf88f6c035`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bffaf88f6c035) -
+  Add support for a clear indicator
+
+## 11.0.8
+
+### Patch Changes
+
+- [#129972](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129972)
+  [`b2d69a39e6687`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d69a39e6687) -
+  Update `@compiled/react` dependency for improved type checking support.
+- Updated dependencies
+
 ## 11.0.7
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 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; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.0.7";
+var packageVersion = "11.0.9";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/PopupUserPicker.js

@@ -61,7 +61,8 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
         shouldFlip = _this$props.shouldFlip,
-        styles = _this$props.styles;
+        styles = _this$props.styles,
+        strategy = _this$props.strategy;
       var width = this.props.width;
       var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
@@ -71,7 +72,7 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
         width: width,
         styles: selectStyles,
         components: (0, _components.getPopupComponents)(!!popupTitle),
-        pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
+        pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy)
       }));
     }
   }]);
@@ -83,6 +84,7 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
   offset: [0, 0],
   placement: 'auto',
   rootBoundary: 'viewport',
-  shouldFlip: true
+  shouldFlip: true,
+  strategy: 'fixed'
 });
 var PopupUserPicker = exports.PopupUserPicker = (0, _analyticsNext.withAnalyticsEvents)()(PopupUserPickerWithoutAnalytics);

package/dist/cjs/components/UserPicker.js

@@ -73,7 +73,9 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
         _this$props$required = _this$props.required,
-        required = _this$props$required === void 0 ? false : _this$props$required;
+        required = _this$props$required === void 0 ? false : _this$props$required,
+        _this$props$showClear = _this$props.showClearIndicator,
+        showClearIndicator = _this$props$showClear === void 0 ? false : _this$props$showClear;
       var width = this.props.width;
       var SelectComponent = allowEmail ? _select.CreatableSelect : _select.default;
       var creatableProps = suggestEmailsForDomain ? (0, _creatableEmailSuggestion.getCreatableSuggestedEmailProps)(suggestEmailsForDomain, isValidEmail) : (0, _creatable.getCreatableProps)(isValidEmail);
@@ -100,7 +102,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
         (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (0, _platformFeatureFlags.fg)('visual-refresh-user-picker')),
-        components: (0, _components.getComponents)(isMulti, anchor),
+        components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator && (0, _platformFeatureFlags.fg)('user-picker-show-clear-indicator')),
         pickerProps: pickerProps
       })))));
     }

package/dist/cjs/components/components.js

@@ -22,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * Memoize getComponents to avoid rerenders.
  */
-var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (multi, anchor) {
+var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (multi, anchor, showClearIndicator) {
   if (anchor) {
     return {
       Control: anchor,
@@ -33,7 +33,7 @@ var getComponents = exports.getComponents = (0, _memoizeOne.default)(function (m
       MultiValue: _MultiValue.MultiValue,
       DropdownIndicator: null,
       SingleValue: _SingleValue.SingleValue,
-      ClearIndicator: multi ? null : _ClearIndicator.ClearIndicator,
+      ClearIndicator: showClearIndicator || !multi ? _ClearIndicator.ClearIndicator : null,
       Option: _Option.Option,
       ValueContainer: multi ? _MultiValueContainer.MultiValueContainer : _SingleValueContainer.SingleValueContainer,
       Input: _Input.Input,

package/dist/cjs/components/popup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPopupProps = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle) {
+var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy) {
   return {
     searchThreshold: -1,
     controlShouldRenderValue: true,
@@ -17,7 +17,7 @@ var getPopupProps = exports.getPopupProps = (0, _memoizeOne.default)(function (w
     popupTitle: popupTitle,
     popperProps: {
       placement: placement || 'auto',
-      strategy: 'fixed',
+      strategy: strategy || 'fixed',
       modifiers: [{
         name: 'offset',
         options: {

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.0.7";
+const packageVersion = "11.0.9";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/PopupUserPicker.js

@@ -44,7 +44,8 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
       placement,
       rootBoundary,
       shouldFlip,
-      styles
+      styles,
+      strategy
     } = this.props;
     const width = this.props.width;
     const selectStyles = getPopupStyles(width, isMulti, styles,
@@ -55,7 +56,7 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
       width: width,
       styles: selectStyles,
       components: getPopupComponents(!!popupTitle),
-      pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
+      pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy)
     }));
   }
 }
@@ -66,6 +67,7 @@ _defineProperty(PopupUserPickerWithoutAnalytics, "defaultProps", {
   offset: [0, 0],
   placement: 'auto',
   rootBoundary: 'viewport',
-  shouldFlip: true
+  shouldFlip: true,
+  strategy: 'fixed'
 });
 export const PopupUserPicker = withAnalyticsEvents()(PopupUserPickerWithoutAnalytics);

package/dist/es2019/components/UserPicker.js

@@ -45,7 +45,8 @@ export class UserPickerWithoutAnalytics extends React.Component {
       captureMenuScroll,
       closeMenuOnScroll,
       loadUserSource,
-      required = false
+      required = false,
+      showClearIndicator = false
     } = this.props;
     const width = this.props.width;
     const SelectComponent = allowEmail ? CreatableSelect : Select;
@@ -77,7 +78,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker')),
-      components: getComponents(isMulti, anchor),
+      components: getComponents(isMulti, anchor, showClearIndicator && fg('user-picker-show-clear-indicator')),
       pickerProps: pickerProps
     })))));
   }

package/dist/es2019/components/components.js

@@ -9,11 +9,10 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
-
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export const getComponents = memoizeOne((multi, anchor) => {
+export const getComponents = memoizeOne((multi, anchor, showClearIndicator) => {
   if (anchor) {
     return {
       Control: anchor,
@@ -24,7 +23,7 @@ export const getComponents = memoizeOne((multi, anchor) => {
       MultiValue,
       DropdownIndicator: null,
       SingleValue,
-      ClearIndicator: multi ? null : ClearIndicator,
+      ClearIndicator: showClearIndicator || !multi ? ClearIndicator : null,
       Option,
       ValueContainer: multi ? MultiValueContainer : SingleValueContainer,
       Input,

package/dist/es2019/components/popup.js

@@ -1,5 +1,5 @@
 import memoizeOne from 'memoize-one';
-export const getPopupProps = memoizeOne((width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle) => ({
+export const getPopupProps = memoizeOne((width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy) => ({
   searchThreshold: -1,
   controlShouldRenderValue: true,
   minMenuWidth: width,
@@ -9,7 +9,7 @@ export const getPopupProps = memoizeOne((width, target, onFlip, boundariesElemen
   popupTitle,
   popperProps: {
     placement: placement || 'auto',
-    strategy: 'fixed',
+    strategy: strategy || 'fixed',
     modifiers: [{
       name: 'offset',
       options: {

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.0.7";
+var packageVersion = "11.0.9";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/PopupUserPicker.js

@@ -54,7 +54,8 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
         shouldFlip = _this$props.shouldFlip,
-        styles = _this$props.styles;
+        styles = _this$props.styles,
+        strategy = _this$props.strategy;
       var width = this.props.width;
       var selectStyles = getPopupStyles(width, isMulti, styles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
@@ -64,7 +65,7 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         width: width,
         styles: selectStyles,
         components: getPopupComponents(!!popupTitle),
-        pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
+        pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy)
       }));
     }
   }]);
@@ -76,6 +77,7 @@ _defineProperty(PopupUserPickerWithoutAnalytics, "defaultProps", {
   offset: [0, 0],
   placement: 'auto',
   rootBoundary: 'viewport',
-  shouldFlip: true
+  shouldFlip: true,
+  strategy: 'fixed'
 });
 export var PopupUserPicker = withAnalyticsEvents()(PopupUserPickerWithoutAnalytics);

package/dist/esm/components/UserPicker.js

@@ -63,7 +63,9 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
         _this$props$required = _this$props.required,
-        required = _this$props$required === void 0 ? false : _this$props$required;
+        required = _this$props$required === void 0 ? false : _this$props$required,
+        _this$props$showClear = _this$props.showClearIndicator,
+        showClearIndicator = _this$props$showClear === void 0 ? false : _this$props$showClear;
       var width = this.props.width;
       var SelectComponent = allowEmail ? CreatableSelect : Select;
       var creatableProps = suggestEmailsForDomain ? getCreatableSuggestedEmailProps(suggestEmailsForDomain, isValidEmail) : getCreatableProps(isValidEmail);
@@ -90,7 +92,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
         fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker')),
-        components: getComponents(isMulti, anchor),
+        components: getComponents(isMulti, anchor, showClearIndicator && fg('user-picker-show-clear-indicator')),
         pickerProps: pickerProps
       })))));
     }

package/dist/esm/components/components.js

@@ -12,11 +12,10 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
-
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export var getComponents = memoizeOne(function (multi, anchor) {
+export var getComponents = memoizeOne(function (multi, anchor, showClearIndicator) {
   if (anchor) {
     return {
       Control: anchor,
@@ -27,7 +26,7 @@ export var getComponents = memoizeOne(function (multi, anchor) {
       MultiValue: MultiValue,
       DropdownIndicator: null,
       SingleValue: SingleValue,
-      ClearIndicator: multi ? null : ClearIndicator,
+      ClearIndicator: showClearIndicator || !multi ? ClearIndicator : null,
       Option: Option,
       ValueContainer: multi ? MultiValueContainer : SingleValueContainer,
       Input: Input,

package/dist/esm/components/popup.js

@@ -1,5 +1,5 @@
 import memoizeOne from 'memoize-one';
-export var getPopupProps = memoizeOne(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle) {
+export var getPopupProps = memoizeOne(function (width, target, onFlip, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle, strategy) {
   return {
     searchThreshold: -1,
     controlShouldRenderValue: true,
@@ -10,7 +10,7 @@ export var getPopupProps = memoizeOne(function (width, target, onFlip, boundarie
     popupTitle: popupTitle,
     popperProps: {
       placement: placement || 'auto',
-      strategy: 'fixed',
+      strategy: strategy || 'fixed',
       modifiers: [{
         name: 'offset',
         options: {

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

@@ -129,6 +129,8 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
 } & {
     SelectComponent: React.ComponentType<any>;
     pickerProps?: any;
@@ -142,7 +144,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" | "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" | "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" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -84,6 +84,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
 } & {
     target: import("../types").Target;
     popupTitle?: string | undefined;
@@ -159,6 +161,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

@@ -75,7 +75,9 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "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?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "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"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -10,7 +10,7 @@ import { Menu } from './Menu';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>) => {
+export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean) => {
     Control: import("react").ComponentType<any>;
     Option: import("react").FC<import("./Option").OptionProps>;
     MultiValue?: undefined;

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

@@ -1,6 +1,6 @@
 import { type Placement } from '@atlaskit/popper';
 import { type Target, type BoundariesElement, type RootBoundary } from '../types';
-export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string) => {
+export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: 'fixed' | 'absolute') => {
     searchThreshold: number;
     controlShouldRenderValue: boolean;
     minMenuWidth: string | number;
@@ -10,7 +10,7 @@ export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: str
     popupTitle: string | undefined;
     popperProps: {
         placement: Placement;
-        strategy: string;
+        strategy: "absolute" | "fixed";
         modifiers: ({
             name: string;
             options: {

package/dist/types/types.d.ts

@@ -174,6 +174,10 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     UNSAFE_hasDraggableParentComponent?: boolean;
     /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
     openMenuOnClick?: boolean;
+    /** Positioning strategy for the popper element */
+    strategy?: 'fixed' | 'absolute';
+    /** Override default behavior and show the clear indicator. */
+    showClearIndicator?: boolean;
 };
 export type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */

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

@@ -129,6 +129,8 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
 } & {
     SelectComponent: React.ComponentType<any>;
     pickerProps?: any;
@@ -142,7 +144,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" | "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" | "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" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -84,6 +84,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
 } & {
     target: import("../types").Target;
     popupTitle?: string | undefined;
@@ -165,6 +167,8 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
+    strategy?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
     popupTitle?: string | undefined;
     placement?: import("@popperjs/core").Placement | undefined;
     rootBoundary?: import("../types").RootBoundary | undefined;

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

@@ -75,7 +75,9 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "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?: "absolute" | "fixed" | undefined;
+    showClearIndicator?: boolean | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "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"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -10,7 +10,7 @@ import { Menu } from './Menu';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>) => {
+export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean) => {
     Control: import("react").ComponentType<any>;
     Option: import("react").FC<import("./Option").OptionProps>;
     MultiValue?: undefined;

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

@@ -1,6 +1,6 @@
 import { type Placement } from '@atlaskit/popper';
 import { type Target, type BoundariesElement, type RootBoundary } from '../types';
-export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string) => {
+export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: 'fixed' | 'absolute') => {
     searchThreshold: number;
     controlShouldRenderValue: boolean;
     minMenuWidth: string | number;
@@ -10,7 +10,7 @@ export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: str
     popupTitle: string | undefined;
     popperProps: {
         placement: Placement;
-        strategy: string;
+        strategy: "absolute" | "fixed";
         modifiers: ({
             name: string;
             options: {

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

@@ -174,6 +174,10 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     UNSAFE_hasDraggableParentComponent?: boolean;
     /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
     openMenuOnClick?: boolean;
+    /** Positioning strategy for the popper element */
+    strategy?: 'fixed' | 'absolute';
+    /** Override default behavior and show the clear indicator. */
+    showClearIndicator?: boolean;
 };
 export type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.0.7",
+	"version": "11.0.9",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,22 +51,22 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/avatar": "^25.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
-		"@atlaskit/people-teams-ui-public": "^3.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.1.0",
-		"@atlaskit/select": "^20.0.0",
+		"@atlaskit/primitives": "^14.4.0",
+		"@atlaskit/select": "^20.3.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/teams-avatar": "^2.1.0",
+		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.2",
+		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -80,7 +80,7 @@
 	"devDependencies": {
 		"@atlaskit/analytics-viewer": "^0.8.0",
 		"@atlaskit/elements-test-helpers": "^0.9.0",
-		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/visual-regression": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/styled": "^11.0.0",
@@ -120,6 +120,9 @@
 		},
 		"visual-refresh-user-picker": {
 			"type": "boolean"
+		},
+		"user-picker-show-clear-indicator": {
+			"type": "boolean"
 		}
 	}
 }