@atlaskit/user-picker 9.7.4 → 10.0.1

package/dist/es2019/components/BaseUserPicker.js

@@ -11,71 +11,54 @@ import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-
 const loadingMessage = () => null;
-
 export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
-
     if (nextProps.isDisabled || nextProps.disableInput) {
       derivedState.menuIsOpen = false;
     }
-
     if (nextProps.open !== undefined) {
       derivedState.menuIsOpen = nextProps.open;
     }
-
     if (nextProps.value !== undefined) {
       derivedState.value = optionToSelectableOptions(nextProps.value);
     } else if (isDefaultValuePopulated(nextProps.defaultValue) && !prevState.isDefaultSet) {
       derivedState.value = optionToSelectableOptions(nextProps.defaultValue);
       derivedState.isDefaultSet = true;
     }
-
     if (nextProps.search !== undefined && nextProps.search !== prevState.inputValue) {
       derivedState.inputValue = nextProps.search;
     }
-
     if (nextProps.options !== undefined) {
       derivedState.options = nextProps.options;
     }
-
     return derivedState;
   }
-
   constructor(props) {
     super(props);
-
     _defineProperty(this, "getSessionId", () => this.session && this.session.id ? this.session.id : undefined);
-
     _defineProperty(this, "withSelectRef", callback => () => {
       if (this.selectRef) {
         callback(this.selectRef);
       }
     });
-
     _defineProperty(this, "nextOption", this.withSelectRef(select => select.focusOption('down')));
-
     _defineProperty(this, "previousOption", this.withSelectRef(select => select.focusOption('up')));
-
     _defineProperty(this, "focus", () => {
       if (this.selectRef && this.selectRef.focus) {
         this.selectRef.focus();
       }
     });
-
     _defineProperty(this, "blur", () => {
       if (this.selectRef && this.selectRef.blur) {
         this.selectRef.blur();
       }
     });
-
     _defineProperty(this, "selectOption", this.withSelectRef(select => {
       const focusedOption = select.state.focusedOption;
       select.selectOption(focusedOption);
     }));
-
     _defineProperty(this, "handleChange", (value, {
       action,
       removedValue,
@@ -84,7 +67,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       if (removedValue && removedValue.data.fixed) {
         return;
       }
-
       this.resetInputState();
       const {
         onChange,
@@ -93,33 +75,26 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         isMulti
       } = this.props;
       callCallback(onChange, extractOptionValue(value), action);
-
       switch (action) {
         case 'select-option':
           if (value) {
             callCallback(onSelection, extractOptionValue(value), this.getSessionId());
           }
-
           this.fireEvent(selectEvent, isMulti ? option : value);
           this.session = isMulti ? startSession() : undefined;
           break;
-
         case 'clear':
           callCallback(onClear);
           this.fireEvent(clearEvent);
           break;
-
         case 'remove-value':
         case 'pop-value':
           if (removedValue) {
             this.fireEvent(deleteEvent, removedValue.data);
           }
-
           break;
       }
-
       this.fireEvent(searchedEvent);
-
       if (removedValue && this.state.value && Array.isArray(this.state.value)) {
         const remainingValues = this.state.value.filter(val => val.data.id !== removedValue.data.id);
         this.setState({
@@ -127,18 +102,15 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
           menuIsOpen: true
         });
       }
-
       if (!this.props.value) {
         this.setState({
           value: value ? value : []
         });
       }
     });
-
     _defineProperty(this, "handleSelectRef", ref => {
       this.selectRef = ref;
     });
-
     _defineProperty(this, "addOptions", batchByKey((request, newOptions) => {
       const {
         resolving
@@ -155,11 +127,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
             resolving: count - newOptions.length !== 0
           };
         }
-
         return null;
       });
     }));
-
     _defineProperty(this, "handleLoadOptionsError", () => {
       const {
         count
@@ -171,12 +141,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
       this.fireEvent(failedEvent);
     });
-
     _defineProperty(this, "debouncedLoadOptions", debounce(search => {
       const {
         loadOptions
       } = this.props;
-
       if (loadOptions) {
         this.setState(({
           inflightRequest: previousRequest
@@ -185,7 +153,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
           const result = this.session && this.session.id ? loadOptions(search, this.session.id) : loadOptions(search);
           const addOptions = this.addOptions.bind(this, inflightRequest.toString());
           let count = 0;
-
           if (isIterable(result)) {
             for (const value of result) {
               Promise.resolve(value).then(addOptions).catch(this.handleLoadOptionsError);
@@ -195,7 +162,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
             Promise.resolve(result).then(addOptions).catch(this.handleLoadOptionsError);
             count++;
           }
-
           return {
             inflightRequest,
             count,
@@ -205,7 +171,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         });
       }
     }, 200));
-
     _defineProperty(this, "abortOptionsShownUfoExperience", () => {
       if (this.optionsShownUfoExperienceInstance.state.id === UFOExperienceState.STARTED.id) {
         // There may be an existing UFO timing running from previous key entry or focus,
@@ -213,40 +178,33 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.optionsShownUfoExperienceInstance.abort();
       }
     });
-
     _defineProperty(this, "startOptionsShownUfoExperience", () => {
       this.abortOptionsShownUfoExperience();
       this.optionsShownUfoExperienceInstance.start();
     });
-
     _defineProperty(this, "executeLoadOptions", search => {
       const {
         loadOptions
       } = this.props;
-
       if (loadOptions) {
         this.setState({
           resolving: true
         }, () => this.debouncedLoadOptions(search));
       }
     });
-
     _defineProperty(this, "handleFocus", event => {
       const {
         value,
         menuIsOpen
       } = this.state;
-
       if (!menuIsOpen || !this.session) {
         this.startSession();
       }
-
       this.startOptionsShownUfoExperience();
       callCallback(this.props.onFocus, this.getSessionId());
       this.setState({
         menuIsOpen: true
       });
-
       if (!this.props.isMulti && isSingleValue(value)) {
         const input = event.target;
         this.setState({
@@ -258,7 +216,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         });
       }
     });
-
     _defineProperty(this, "resetInputState", () => {
       // Prevent filter if query typed, then blurred with no selection
       this.setState({
@@ -266,14 +223,11 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
       callCallback(this.props.onInputChange, '', this.getSessionId());
     });
-
     _defineProperty(this, "handleBlur", () => {
       callCallback(this.props.onBlur, this.getSessionId());
-
       if (isPopupUserPickerByComponent(this.props.SelectComponent)) {
         return;
       }
-
       this.resetInputState();
       this.abortOptionsShownUfoExperience();
       this.setState({
@@ -281,7 +235,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         options: []
       });
     });
-
     _defineProperty(this, "handleClose", () => {
       this.resetInputState();
       callCallback(this.props.onClose, this.getSessionId());
@@ -290,7 +243,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         options: []
       });
     });
-
     _defineProperty(this, "handleInputChange", (search, {
       action
     }) => {
@@ -303,90 +255,75 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.executeLoadOptions(search);
       }
     });
-
     _defineProperty(this, "fireEvent", (eventCreator, ...args) => {
       const {
         createAnalyticsEvent
       } = this.props;
-
       if (createAnalyticsEvent) {
         createAndFireEventInElementsChannel(eventCreator(this.props, this.state, this.session, this.journeyId, ...args))(createAnalyticsEvent);
       }
     });
-
     _defineProperty(this, "startSession", () => {
       this.session = startSession();
       this.journeyId = this.getSessionId();
       this.fireEvent(focusEvent);
     });
-
     _defineProperty(this, "handleKeyDown", event => {
       // Escape
       if (event.keyCode === 27) {
         this.blur();
-      } // Space
-
+      }
 
+      // Space
       if (event.keyCode === 32 && !this.state.inputValue) {
         event.preventDefault();
         !this.props.disableInput && this.setState({
           inputValue: ' '
         });
       }
-
       if (this.session) {
         this.session.lastKey = event.keyCode;
-
         switch (event.keyCode) {
           // KeyUp 38
           case 38:
             this.session.upCount++;
             break;
           // KeyDown 40
-
           case 40:
             this.session.downCount++;
             break;
         }
       }
     });
-
     _defineProperty(this, "handleClearIndicatorHover", hoveringClearIndicator => {
       this.setState({
         hoveringClearIndicator
       });
     });
-
     _defineProperty(this, "getOptions", () => {
       const options = getOptions(this.state.options) || [];
       const {
         maxOptions,
         isMulti
       } = this.props;
-
       if (maxOptions === 0) {
         return [];
       }
-
       if (maxOptions && maxOptions > 0 && maxOptions < options.length) {
         const {
           value
         } = this.state;
-        let filteredOptions = options; // Filter out previously selected options
-
+        let filteredOptions = options;
+        // Filter out previously selected options
         if (isMulti && Array.isArray(value)) {
           const valueIds = value.map(item => item.data.id);
           filteredOptions = options.filter(option => valueIds.indexOf(option.data.id) === -1);
         }
-
         return filteredOptions.slice(0, maxOptions);
       }
-
       return options;
     });
-
     _defineProperty(this, "getAppearance", () => this.props.appearance ? this.props.appearance : 'normal');
-
     this.state = {
       options: [],
       isDefaultSet: false,
@@ -399,59 +336,50 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     };
     this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
-
   componentDidMount() {
     const {
       open,
       search
-    } = this.props; // load options when the picker open
-
+    } = this.props;
+    // load options when the picker open
     if (open) {
       if (!this.session) {
         this.startSession();
       }
-
       this.executeLoadOptions(search);
     }
   }
-
   componentDidUpdate(_, prevState) {
     const {
       menuIsOpen,
       options,
       resolving,
       count
-    } = this.state; // load options when the picker open
-
+    } = this.state;
+    // load options when the picker open
     if (menuIsOpen && !prevState.menuIsOpen) {
       if (!this.session) {
         // session should have been created onFocus
         this.startSession();
       }
-
       this.executeLoadOptions();
     }
-
     if (!menuIsOpen && prevState.menuIsOpen && this.session) {
       this.fireEvent(cancelEvent, prevState);
       this.session = undefined;
     }
-
     if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
       this.fireEvent(searchedEvent);
     }
-
     if (this.state.inputValue !== prevState.inputValue) {
       if (this.session) {
         this.session.inputChangeTime = Date.now();
       }
     }
-
     if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
       this.optionsShownUfoExperienceInstance.success();
     }
   }
-
   render() {
     const {
       isMulti,
@@ -530,7 +458,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       onChange: this.handleChange,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      onClose: this.handleClose,
+      onMenuClose: this.handleClose,
       onInputChange: this.handleInputChange,
       onClearIndicatorHover: this.handleClearIndicatorHover,
       onKeyDown: this.handleKeyDown,
@@ -538,9 +466,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       textFieldBackgroundColor: textFieldBackgroundColor
     }, pickerProps));
   }
-
 }
-
 _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   isMulti: false,
   subtle: false,
@@ -548,5 +474,4 @@ _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   textFieldBackgroundColor: false,
   isClearable: true
 });
-
 export const BaseUserPicker = withAnalyticsEvents()(BaseUserPickerWithoutAnalytics);

package/dist/es2019/components/ClearIndicator.js

@@ -2,9 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { components } from '@atlaskit/select';
-const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
-/* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
-'@atlaskit/tooltip').then(module => {
+const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
   return {
     default: module.default
   };
@@ -12,25 +10,21 @@ const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
 export class ClearIndicator extends React.PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleMouseDown", event => {
       if (event && event.type === 'mousedown' && event.button !== 0) {
         return;
-      } // Prevent focus when clear on blurred state
-
-
+      }
+      // Prevent focus when clear on blurred state
       const {
         clearValue,
         selectProps
       } = this.props;
       clearValue();
-
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }
     });
   }
-
   render() {
     const {
       selectProps: {
@@ -38,7 +32,8 @@ export class ClearIndicator extends React.PureComponent {
       }
     } = this.props;
     const Indicator = /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
-      innerProps: { ...this.props.innerProps,
+      innerProps: {
+        ...this.props.innerProps,
         onMouseDown: this.handleMouseDown
       }
     }));
@@ -48,5 +43,4 @@ export class ClearIndicator extends React.PureComponent {
       content: clearValueLabel
     }, Indicator)) : Indicator;
   }
-
 }

package/dist/es2019/components/CustomOption/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-const AsyncCustomOption = /*#__PURE__*/React.lazy(() => import(
-/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/custom-option" */
-'./main').then(module => {
+const AsyncCustomOption = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/custom-option" */'./main').then(module => {
   return {
     default: module.CustomOption
   };

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { jsx } from '@emotion/react';
@@ -10,7 +9,6 @@ import { SizeableAvatar } from '../SizeableAvatar';
 export class CustomOption extends React.PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "getPrimaryText", () => {
       const {
         data: {
@@ -25,21 +23,16 @@ export class CustomOption extends React.PureComponent {
         highlights: highlight && highlight.name
       }, name))];
     });
-
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
       css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
     }, message));
-
     _defineProperty(this, "renderByline", () => {
       var _this$props$data;
-
       if (!((_this$props$data = this.props.data) !== null && _this$props$data !== void 0 && _this$props$data.byline)) {
         return undefined;
       }
-
       return this.getBylineComponent(this.props.isSelected, this.props.data.byline);
     });
-
     _defineProperty(this, "renderAvatar", () => {
       const {
         data: {
@@ -53,12 +46,10 @@ export class CustomOption extends React.PureComponent {
         name: name
       });
     });
-
     _defineProperty(this, "getLozengeProps", () => typeof this.props.data.lozenge === 'string' ? {
       text: this.props.data.lozenge
     } : this.props.data.lozenge);
   }
-
   render() {
     return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
@@ -68,5 +59,4 @@ export class CustomOption extends React.PureComponent {
       secondaryText: this.renderByline()
     });
   }
-
 }

package/dist/es2019/components/EmailOption/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-const AsyncEmailOption = /*#__PURE__*/React.lazy(() => import(
-/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/email-option" */
-'./main').then(module => {
+const AsyncEmailOption = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/email-option" */'./main').then(module => {
   return {
     default: module.EmailOption
   };

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -8,17 +7,13 @@ import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
-
 const getAddEmailMessage = validity => validity === 'POTENTIAL' ? messages.continueToAddEmail : messages.selectToAddEmail;
-
 export class EmailOption extends React.PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "getLozengeProps", () => typeof this.props.email.lozenge === 'string' ? {
       text: this.props.email.lozenge
     } : this.props.email.lozenge);
-
     _defineProperty(this, "renderPrimaryText", () => {
       const {
         email: {
@@ -30,13 +25,11 @@ export class EmailOption extends React.PureComponent {
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, id);
     });
-
     _defineProperty(this, "renderSecondaryText", label => {
       return jsx("span", {
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
       }, label);
     });
-
     _defineProperty(this, "renderOption", label => jsx(AvatarItemOption, {
       avatar: jsx(AddOptionAvatar, {
         label: label
@@ -47,7 +40,6 @@ export class EmailOption extends React.PureComponent {
       secondaryText: this.renderSecondaryText(label)
     }));
   }
-
   render() {
     const {
       label,
@@ -55,5 +47,4 @@ export class EmailOption extends React.PureComponent {
     } = this.props;
     return label !== undefined ? this.renderOption(label) : jsx(FormattedMessage, getAddEmailMessage(emailValidity), label => this.renderOption(label));
   }
-
 }

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
-
 const outerWrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
@@ -13,7 +13,6 @@ const outerWrapper = isDisabled => css({
   cursor: isDisabled ? 'not-allowed' : 'pointer',
   opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
 });
-
 const detailsWrapper = css({
   display: 'flex',
   maxWidth: '100%',
@@ -27,7 +26,6 @@ const textSection = css({
   width: 'calc(100% - 32px)',
   flex: 'auto'
 });
-
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
     color: `var(--ds-text-selected, ${B400})`,
@@ -47,7 +45,6 @@ const getTextStyle = isSecondary => {
     }
   });
 };
-
 export const ExternalAvatarItemOption = ({
   avatar,
   isDisabled,

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

@@ -1,7 +1,5 @@
 import React from 'react';
-const AsyncExternalUserOption = /*#__PURE__*/React.lazy(() => import(
-/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/external-user-option" */
-'./main').then(module => {
+const AsyncExternalUserOption = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/external-user-option" */'./main').then(module => {
   return {
     default: module.ExternalUserOption
   };