@atlaskit/user-picker 9.0.1 → 9.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.0.4
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 9.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.0.2
+
+### Patch Changes
+
+- [`85c0dcfe911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c0dcfe911) - Added analytics event when the sources tooltip is displayed for an external user
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.startSession = exports.selectEvent = exports.searchedEvent = exports.focusEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
+exports.userInfoEvent = exports.startSession = exports.selectEvent = exports.searchedEvent = exports.focusEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -173,6 +173,15 @@ var failedEvent = function failedEvent(props, _, session, journeyId) {
 
 exports.failedEvent = failedEvent;
 
+var userInfoEvent = function userInfoEvent(sources, accountId) {
+  return createEvent('ui', 'displayed', 'userInfo', {
+    sources: sources,
+    accountId: accountId
+  });
+};
+
+exports.userInfoEvent = userInfoEvent;
+
 function queryLength(state) {
   return state.inputValue.length;
 }

package/dist/cjs/components/ExternalUserOption/main.js

@@ -33,6 +33,10 @@ var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../../analytics");
+
 var _AvatarItemOption = require("../AvatarItemOption");
 
 var _SizeableAvatar = require("../SizeableAvatar");
@@ -63,21 +67,21 @@ var emailDomainWrapper = (0, _core.css)({
 });
 exports.emailDomainWrapper = emailDomainWrapper;
 
-var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ExternalUserOption, _React$PureComponent);
+var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(ExternalUserOptionImpl, _React$PureComponent);
 
-  var _super = _createSuper(ExternalUserOption);
+  var _super = _createSuper(ExternalUserOptionImpl);
 
-  function ExternalUserOption() {
+  function ExternalUserOptionImpl() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, ExternalUserOption);
+    (0, _classCallCheck2.default)(this, ExternalUserOptionImpl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrimaryText", function () {
       var name = _this.props.user.name;
       return (0, _core.jsx)("span", {
@@ -117,16 +121,33 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
         name: name
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireEvent", function (eventCreator) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)(eventCreator.apply(void 0, args))(createAnalyticsEvent);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onShow", function () {
+      var user = _this.props.user;
+
+      _this.fireEvent(_analytics.userInfoEvent, user.sources, user.id);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSourcesInfoTooltip", function () {
       return _this.props.user.isExternal ? (0, _core.jsx)(_tooltip.default, {
         content: _this.formattedTooltipContent(),
-        position: 'right-start'
+        position: 'right-start',
+        onShow: _this.onShow
       }, (0, _core.jsx)(_InfoIcon.default, null)) : undefined;
     });
     return _this;
   }
 
-  (0, _createClass2.default)(ExternalUserOption, [{
+  (0, _createClass2.default)(ExternalUserOptionImpl, [{
     key: "render",
     value: function render() {
       return (0, _core.jsx)(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
@@ -152,7 +173,8 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-  return ExternalUserOption;
+  return ExternalUserOptionImpl;
 }(_react.default.PureComponent);
 
+var ExternalUserOption = (0, _analyticsNext.withAnalyticsEvents)()(ExternalUserOptionImpl);
 exports.ExternalUserOption = ExternalUserOption;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/es2019/analytics.js

@@ -115,6 +115,10 @@ export const searchedEvent = (props, state, session, journeyId) => {
 };
 export const failedEvent = (props, _, session, journeyId) => createEvent('operational', 'failed', 'userPicker', { ...createDefaultPickerAttributes(props, session, journeyId)
 });
+export const userInfoEvent = (sources, accountId) => createEvent('ui', 'displayed', 'userInfo', {
+  sources,
+  accountId
+});
 
 function queryLength(state) {
   return state.inputValue.length;

package/dist/es2019/components/ExternalUserOption/main.js

@@ -6,6 +6,8 @@ import { css, jsx } from '@emotion/core';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
@@ -23,9 +25,10 @@ export const imageContainer = css({
 export const emailDomainWrapper = css({
   fontWeight: 'bold'
 });
-export class ExternalUserOption extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+
+class ExternalUserOptionImpl extends React.PureComponent {
+  constructor(..._args) {
+    super(..._args);
 
     _defineProperty(this, "getPrimaryText", () => {
       const {
@@ -73,9 +76,27 @@ export class ExternalUserOption extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "fireEvent", (eventCreator, ...args) => {
+      const {
+        createAnalyticsEvent
+      } = this.props;
+
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel(eventCreator(...args))(createAnalyticsEvent);
+      }
+    });
+
+    _defineProperty(this, "onShow", () => {
+      const {
+        user
+      } = this.props;
+      this.fireEvent(userInfoEvent, user.sources, user.id);
+    });
+
     _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? jsx(Tooltip, {
       content: this.formattedTooltipContent(),
-      position: 'right-start'
+      position: 'right-start',
+      onShow: this.onShow
     }, jsx(InfoIcon, null)) : undefined);
   }
 
@@ -103,4 +124,6 @@ export class ExternalUserOption extends React.PureComponent {
     }, sourceData => jsx(SourcesTooltipContent, sourceData));
   }
 
-}
+}
+
+export const ExternalUserOption = withAnalyticsEvents()(ExternalUserOptionImpl);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/esm/analytics.js

@@ -135,6 +135,12 @@ export var searchedEvent = function searchedEvent(props, state, session, journey
 export var failedEvent = function failedEvent(props, _, session, journeyId) {
   return createEvent('operational', 'failed', 'userPicker', _objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)));
 };
+export var userInfoEvent = function userInfoEvent(sources, accountId) {
+  return createEvent('ui', 'displayed', 'userInfo', {
+    sources: sources,
+    accountId: accountId
+  });
+};
 
 function queryLength(state) {
   return state.inputValue.length;

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

@@ -17,6 +17,8 @@ import { css, jsx } from '@emotion/core';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
@@ -34,21 +36,22 @@ export var imageContainer = css({
 export var emailDomainWrapper = css({
   fontWeight: 'bold'
 });
-export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ExternalUserOption, _React$PureComponent);
 
-  var _super = _createSuper(ExternalUserOption);
+var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(ExternalUserOptionImpl, _React$PureComponent);
 
-  function ExternalUserOption() {
+  var _super = _createSuper(ExternalUserOptionImpl);
+
+  function ExternalUserOptionImpl() {
     var _this;
 
-    _classCallCheck(this, ExternalUserOption);
+    _classCallCheck(this, ExternalUserOptionImpl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
 
     _defineProperty(_assertThisInitialized(_this), "getPrimaryText", function () {
       var name = _this.props.user.name;
@@ -92,17 +95,36 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "fireEvent", function (eventCreator) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel(eventCreator.apply(void 0, args))(createAnalyticsEvent);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onShow", function () {
+      var user = _this.props.user;
+
+      _this.fireEvent(userInfoEvent, user.sources, user.id);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getSourcesInfoTooltip", function () {
       return _this.props.user.isExternal ? jsx(Tooltip, {
         content: _this.formattedTooltipContent(),
-        position: 'right-start'
+        position: 'right-start',
+        onShow: _this.onShow
       }, jsx(InfoIcon, null)) : undefined;
     });
 
     return _this;
   }
 
-  _createClass(ExternalUserOption, [{
+  _createClass(ExternalUserOptionImpl, [{
     key: "render",
     value: function render() {
       return jsx(ExternalAvatarItemOption, {
@@ -129,5 +151,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 
-  return ExternalUserOption;
-}(React.PureComponent);
+  return ExternalUserOptionImpl;
+}(React.PureComponent);
+
+export var ExternalUserOption = withAnalyticsEvents()(ExternalUserOptionImpl);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/types/analytics.d.ts

@@ -9,7 +9,7 @@ export declare type UserPickerSession = {
     lastKey?: number;
 };
 export declare const startSession: () => UserPickerSession;
-export declare const createAndFireEventInElementsChannel: (payload: Record<string, any>) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
 export interface EventCreator {
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession): AnalyticsEventPayload;
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession, ...args: any[]): AnalyticsEventPayload;
@@ -21,3 +21,4 @@ export declare const cancelEvent: EventCreator;
 export declare const selectEvent: EventCreator;
 export declare const searchedEvent: EventCreator;
 export declare const failedEvent: EventCreator;
+export declare const userInfoEvent: (sources: string[], accountId: string) => AnalyticsEventPayload;

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

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Pick<BaseUserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Pick<BaseUserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const AsyncExternalUserOption: React.LazyExoticComponent<typeof import("./main").ExternalUserOption>;
+declare const AsyncExternalUserOption: React.LazyExoticComponent<React.ForwardRefExoticComponent<Omit<import("./main").ExternalUserOptionProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
 export default AsyncExternalUserOption;

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

@@ -1,18 +1,12 @@
 /** @jsx jsx */
 import React from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { ExternalUser } from '../../types';
 export declare const imageContainer: import("@emotion/utils").SerializedStyles;
 export declare const emailDomainWrapper: import("@emotion/utils").SerializedStyles;
-export declare type ExternalUserOptionProps = {
+export declare type ExternalUserOptionProps = WithAnalyticsEventsProps & {
     user: ExternalUser;
     status?: string;
     isSelected: boolean;
 };
-export declare class ExternalUserOption extends React.PureComponent<ExternalUserOptionProps> {
-    render(): JSX.Element;
-    private getPrimaryText;
-    private renderSecondaryText;
-    private renderAvatar;
-    private getSourcesInfoTooltip;
-    private formattedTooltipContent;
-}
+export declare const ExternalUserOption: React.ForwardRefExoticComponent<Omit<ExternalUserOptionProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<PopupUserPickerProps, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Pick<PopupUserPickerProps, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "isMulti" | "offset" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Pick<UserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Pick<UserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

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

@@ -9,7 +9,7 @@ import { PopupControl } from './PopupControl';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean | undefined, anchor?: import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined) => {
+export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean | undefined, anchor?: import("react").ComponentType<any> | undefined) => {
     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 { Placement } from '@atlaskit/popper';
-import { Target } from '../types';
-export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: HTMLElement | "scrollParent" | "window" | "viewport" | undefined, offset?: number[] | undefined, placement?: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined, rootBoundary?: "viewport" | "document" | undefined, shouldFlip?: boolean | undefined, popupTitle?: string | undefined) => {
+import { Target, BoundariesElement, RootBoundary } from '../types';
+export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement | undefined, offset?: number[] | undefined, placement?: Placement | undefined, rootBoundary?: RootBoundary | undefined, shouldFlip?: boolean | undefined, popupTitle?: string | undefined) => {
     searchThreshold: number;
     controlShouldRenderValue: boolean;
     minMenuWidth: string | number;
@@ -30,8 +30,8 @@ export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: str
         } | {
             name: string;
             options: {
-                rootBoundary: "viewport" | "document" | undefined;
-                boundary: HTMLElement | "scrollParent" | "window" | "viewport" | undefined;
+                rootBoundary: RootBoundary | undefined;
+                boundary: BoundariesElement | undefined;
                 offset?: undefined;
             };
             enabled?: undefined;

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

@@ -18,7 +18,7 @@ export interface OptionToSelectableOptions {
 }
 export declare const optionToSelectableOptions: OptionToSelectableOptions;
 export declare const getAvatarSize: (appearance: string) => 'xsmall' | 'small' | 'medium';
-export declare const isChildInput: (child: ReactChild) => child is ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+export declare const isChildInput: (child: ReactChild) => child is ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare const isSingleValue: (value?: AtlaskitSelectValue) => value is Option<OptionData>;
 export declare const hasValue: (value?: string | undefined) => value is string;
 export declare const callCallback: <U extends any[], R>(callback: ((...U: U) => R) | undefined, ...args: U) => R | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.0.1",
+  "version": "9.0.4",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.8.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.0",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",
@@ -73,7 +73,7 @@
     "faker": "^4.1.0",
     "mock-apollo-client": "^0.1.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "3.9.6"
+    "typescript": "4.2.4"
   },
   "techstack": {
     "@repo/internal": {