box-ui-elements 17.1.0 → 17.2.0-beta.1

package/es/components/pill-selector-dropdown/PillSelector.js

@@ -207,6 +207,7 @@ function (_React$Component) {
           className = _this$props2.className,
           disabled = _this$props2.disabled,
           error = _this$props2.error,
+          errorTooltipPosition = _this$props2.errorTooltipPosition,
           getPillClassName = _this$props2.getPillClassName,
           getPillImageUrl = _this$props2.getPillImageUrl,
           inputProps = _this$props2.inputProps,
@@ -222,7 +223,7 @@ function (_React$Component) {
           suggestedPillsFilter = _this$props2.suggestedPillsFilter,
           suggestedPillsTitle = _this$props2.suggestedPillsTitle,
           validator = _this$props2.validator,
-          rest = _objectWithoutProperties(_this$props2, ["allowInvalidPills", "className", "disabled", "error", "getPillClassName", "getPillImageUrl", "inputProps", "onInput", "onRemove", "onSuggestedPillAdd", "placeholder", "innerRef", "selectedOptions", "showAvatars", "showRoundedPills", "suggestedPillsData", "suggestedPillsFilter", "suggestedPillsTitle", "validator"]);
+          rest = _objectWithoutProperties(_this$props2, ["allowInvalidPills", "className", "disabled", "error", "errorTooltipPosition", "getPillClassName", "getPillImageUrl", "inputProps", "onInput", "onRemove", "onSuggestedPillAdd", "placeholder", "innerRef", "selectedOptions", "showAvatars", "showRoundedPills", "suggestedPillsData", "suggestedPillsFilter", "suggestedPillsTitle", "validator"]);
 
       var suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;
       var hasError = !!error;
@@ -242,7 +243,7 @@ function (_React$Component) {
       return React.createElement(Tooltip, {
         isShown: hasError,
         text: error || '',
-        position: "bottom-left",
+        position: errorTooltipPosition,
         theme: "error"
       }, React.createElement("span", {
         className: classes,
@@ -262,7 +263,7 @@ function (_React$Component) {
           onRemove: onRemove.bind(_this2, option, index) // $FlowFixMe option.text is for backwards compatibility
           ,
           text: option.displayText || option.text,
-          showAvatar: true,
+          showAvatar: showAvatars,
           id: option.id,
           hasWarning: option.hasWarning,
           isExternal: option.isExternalUser
@@ -287,9 +288,7 @@ function (_React$Component) {
         "data-testid": "pill-selection-helper"
       }), React.createElement("textarea", _extends({}, ariaAttrs, rest, inputProps, {
         autoComplete: "off",
-        className: classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
-          'bdl-PillSelector-input--showAvatars': showAvatars
-        }),
+        className: classNames('bdl-PillSelector-input', 'pill-selector-input', className),
         disabled: disabled,
         onInput: onInput,
         placeholder: this.getNumSelected() === 0 ? placeholder : '',
@@ -317,6 +316,7 @@ _defineProperty(PillSelectorBase, "defaultProps", {
   allowInvalidPills: false,
   disabled: false,
   error: '',
+  errorTooltipPosition: 'bottom-left',
   inputProps: {},
   placeholder: '',
   selectedOptions: [],

package/es/components/pill-selector-dropdown/PillSelector.js.flow

@@ -11,6 +11,7 @@ import RoundPill from './RoundPill';
 import Pill from './Pill';
 import SuggestedPillsRow from './SuggestedPillsRow';
 import type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 function stopDefaultEvent(event) {
     event.preventDefault();
@@ -22,6 +23,8 @@ type Props = {
     className?: string,
     disabled?: boolean,
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -52,6 +55,7 @@ type DefaultProps = {
     allowInvalidPills: boolean,
     disabled: boolean,
     error: string,
+    errorTooltipPosition: Position,
     inputProps: Object,
     placeholder: string,
     selectedOptions: List<Object>,
@@ -65,6 +69,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         allowInvalidPills: false,
         disabled: false,
         error: '',
+        errorTooltipPosition: 'bottom-left',
         inputProps: {},
         placeholder: '',
         selectedOptions: [],
@@ -185,6 +190,7 @@ class PillSelectorBase extends React.Component<Props, State> {
             className,
             disabled,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -219,7 +225,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         };
 
         return (
-            <Tooltip isShown={hasError} text={error || ''} position="bottom-left" theme="error">
+            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme="error">
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}
@@ -242,7 +248,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                                       onRemove={onRemove.bind(this, option, index)}
                                       // $FlowFixMe option.text is for backwards compatibility
                                       text={option.displayText || option.text}
-                                      showAvatar
+                                      showAvatar={showAvatars}
                                       id={option.id}
                                       hasWarning={option.hasWarning}
                                       isExternal={option.isExternalUser}
@@ -278,9 +284,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                         {...rest}
                         {...inputProps}
                         autoComplete="off"
-                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
-                            'bdl-PillSelector-input--showAvatars': showAvatars,
-                        })}
+                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}
                         disabled={disabled}
                         onInput={onInput}
                         placeholder={this.getNumSelected() === 0 ? placeholder : ''}

package/es/components/pill-selector-dropdown/PillSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelector.js"],"names":["React","classNames","uniqueId","List","Tooltip","KEYS","RoundPill","Pill","SuggestedPillsRow","stopDefaultEvent","event","preventDefault","stopPropagation","PillSelectorBase","isFocused","selectedIndex","selectedOptions","props","size","length","key","map","option","inputEl","focus","setState","inputValue","value","numPills","getNumSelected","state","backspace","index","resetSelectedIndex","onRemove","selectedOption","get","arrowLeft","Math","max","hiddenEl","arrowRight","allowInvalidPills","className","disabled","error","getPillClassName","getPillImageUrl","inputProps","onInput","onSuggestedPillAdd","placeholder","innerRef","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","validator","rest","suggestedPillsEnabled","hasError","classes","ariaAttrs","errorMessageID","handleBlur","handleClick","handleFocus","handleKeyDown","undefined","bind","displayText","text","id","hasWarning","isExternalUser","hiddenRef","input","getPillsByKey","Component","PillSelector","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\nimport { List } from 'immutable';\n\nimport Tooltip from '../tooltip';\nimport { KEYS } from '../../constants';\n\nimport RoundPill from './RoundPill';\nimport Pill from './Pill';\nimport SuggestedPillsRow from './SuggestedPillsRow';\nimport type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';\n\nfunction stopDefaultEvent(event) {\n    event.preventDefault();\n    event.stopPropagation();\n}\n\ntype Props = {\n    allowInvalidPills: boolean,\n    className?: string,\n    disabled?: boolean,\n    error?: React.Node,\n    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */\n    getPillClassName?: (option: Option) => string,\n    /** Function to retrieve the image URL associated with a pill */\n    getPillImageUrl?: (data: { id: string | number, [key: string]: any }) => string,\n    innerRef?: React.Ref<any>,\n    inputProps: Object,\n    onInput: Function,\n    onRemove: Function,\n    onSuggestedPillAdd?: Function,\n    placeholder: string,\n    selectedOptions: List<Object>,\n    /** Whether to show avatars in pills (if rounded style is enabled) */\n    showAvatars?: boolean,\n    /** Whether to use rounded style for pills */\n    showRoundedPills?: boolean,\n    suggestedPillsData?: Array<Object>,\n    suggestedPillsFilter?: SuggestedPillsFilter,\n    suggestedPillsTitle?: string,\n    validator: (option: Option | OptionValue) => boolean,\n};\n\ntype State = {\n    isFocused: boolean,\n    selectedIndex: number,\n};\n\ntype DefaultProps = {\n    allowInvalidPills: boolean,\n    disabled: boolean,\n    error: string,\n    inputProps: Object,\n    placeholder: string,\n    selectedOptions: List<Object>,\n    validator: () => boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps>;\n\nclass PillSelectorBase extends React.Component<Props, State> {\n    static defaultProps: DefaultProps = {\n        allowInvalidPills: false,\n        disabled: false,\n        error: '',\n        inputProps: {},\n        placeholder: '',\n        selectedOptions: [],\n        validator: () => true,\n    };\n\n    state = {\n        isFocused: false,\n        selectedIndex: -1,\n    };\n\n    getNumSelected = (): number => {\n        const { selectedOptions } = this.props;\n\n        return typeof selectedOptions.size === 'number' ? selectedOptions.size : selectedOptions.length;\n    };\n\n    getPillsByKey = (key: string): Array<any> => {\n        const { selectedOptions } = this.props;\n\n        return selectedOptions.map(option => option[key]);\n    };\n\n    inputEl: HTMLInputElement;\n\n    handleClick = () => {\n        this.inputEl.focus();\n    };\n\n    handleFocus = () => {\n        this.setState({ isFocused: true });\n    };\n\n    handleBlur = () => {\n        this.setState({ isFocused: false });\n    };\n\n    hiddenEl: HTMLSpanElement;\n\n    handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        const inputValue = this.inputEl.value;\n        const numPills = this.getNumSelected();\n        const { selectedIndex } = this.state;\n\n        switch (event.key) {\n            case KEYS.backspace: {\n                let index = -1;\n                if (selectedIndex >= 0) {\n                    // remove selected pill\n                    index = selectedIndex;\n                    this.resetSelectedIndex();\n                    this.inputEl.focus();\n                } else if (inputValue === '') {\n                    // remove last pill\n                    index = numPills - 1;\n                }\n                if (index >= 0) {\n                    const { onRemove, selectedOptions } = this.props;\n                    const selectedOption =\n                        // $FlowFixMe\n                        typeof selectedOptions.get === 'function' ? selectedOptions.get(index) : selectedOptions[index];\n                    onRemove(selectedOption, index);\n                    stopDefaultEvent(event);\n                }\n                break;\n            }\n            case KEYS.arrowLeft:\n                if (selectedIndex >= 0) {\n                    // select previous pill\n                    this.setState({\n                        selectedIndex: Math.max(selectedIndex - 1, 0),\n                    });\n                    stopDefaultEvent(event);\n                } else if (inputValue === '' && numPills > 0) {\n                    // select last pill\n                    this.hiddenEl.focus();\n                    this.setState({ selectedIndex: numPills - 1 });\n                    stopDefaultEvent(event);\n                }\n                break;\n            case KEYS.arrowRight: {\n                if (selectedIndex >= 0) {\n                    const index = selectedIndex + 1;\n                    if (index >= numPills) {\n                        // deselect last pill\n                        this.resetSelectedIndex();\n                        this.inputEl.focus();\n                    } else {\n                        // select next pill\n                        this.setState({ selectedIndex: index });\n                    }\n                    stopDefaultEvent(event);\n                }\n                break;\n            }\n            // no default\n        }\n    };\n\n    errorMessageID = uniqueId('errorMessage');\n\n    hiddenRef = (hiddenEl: ?HTMLSpanElement) => {\n        if (hiddenEl) {\n            this.hiddenEl = hiddenEl;\n        }\n    };\n\n    resetSelectedIndex = () => {\n        if (this.state.selectedIndex !== -1) {\n            this.setState({ selectedIndex: -1 });\n        }\n    };\n\n    render() {\n        const { isFocused, selectedIndex } = this.state;\n        const {\n            allowInvalidPills,\n            className,\n            disabled,\n            error,\n            getPillClassName,\n            getPillImageUrl,\n            inputProps,\n            onInput,\n            onRemove,\n            onSuggestedPillAdd,\n            placeholder,\n            innerRef,\n            selectedOptions,\n            showAvatars,\n            showRoundedPills,\n            suggestedPillsData,\n            suggestedPillsFilter,\n            suggestedPillsTitle,\n            validator,\n            ...rest\n        } = this.props;\n        const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;\n        const hasError = !!error;\n        const classes = classNames('bdl-PillSelector', 'pill-selector-input-wrapper', {\n            'is-disabled': disabled,\n            'bdl-is-disabled': disabled,\n            'is-focused': isFocused,\n            'show-error': hasError,\n            'pill-selector-suggestions-enabled': suggestedPillsEnabled,\n            'bdl-PillSelector--suggestionsEnabled': suggestedPillsEnabled,\n        });\n        const ariaAttrs = {\n            'aria-invalid': hasError,\n            'aria-errormessage': this.errorMessageID,\n            'aria-describedby': this.errorMessageID,\n        };\n\n        return (\n            <Tooltip isShown={hasError} text={error || ''} position=\"bottom-left\" theme=\"error\">\n                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                <span\n                    className={classes}\n                    onBlur={this.handleBlur}\n                    onClick={this.handleClick}\n                    onFocus={this.handleFocus}\n                    onKeyDown={this.handleKeyDown}\n                    ref={innerRef}\n                >\n                    {showRoundedPills\n                        ? selectedOptions.map((option: RoundOption, index: number) => {\n                              return (\n                                  <RoundPill\n                                      className={getPillClassName ? getPillClassName(option) : undefined}\n                                      getPillImageUrl={getPillImageUrl}\n                                      isValid={allowInvalidPills ? validator(option) : true}\n                                      isDisabled={disabled}\n                                      isSelected={index === selectedIndex}\n                                      key={option.value}\n                                      onRemove={onRemove.bind(this, option, index)}\n                                      // $FlowFixMe option.text is for backwards compatibility\n                                      text={option.displayText || option.text}\n                                      showAvatar\n                                      id={option.id}\n                                      hasWarning={option.hasWarning}\n                                      isExternal={option.isExternalUser}\n                                  />\n                              );\n                          })\n                        : selectedOptions.map((option: Option, index: number) => {\n                              // TODO: This and associated types will be removed once all views are updates with round pills.\n                              return (\n                                  <Pill\n                                      isValid={allowInvalidPills ? validator(option) : true}\n                                      isDisabled={disabled}\n                                      isSelected={index === selectedIndex}\n                                      key={option.value}\n                                      onRemove={onRemove.bind(this, option, index)}\n                                      // $FlowFixMe option.text is for backwards compatibility\n                                      text={option.displayText || option.text}\n                                  />\n                              );\n                          })}\n\n                    {/* hidden element for focus/key events during pill selection */}\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"accessibility-hidden\"\n                        onBlur={this.resetSelectedIndex}\n                        ref={this.hiddenRef}\n                        tabIndex={-1}\n                        data-testid=\"pill-selection-helper\"\n                    />\n                    <textarea\n                        {...ariaAttrs}\n                        {...rest}\n                        {...inputProps}\n                        autoComplete=\"off\"\n                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {\n                            'bdl-PillSelector-input--showAvatars': showAvatars,\n                        })}\n                        disabled={disabled}\n                        onInput={onInput}\n                        placeholder={this.getNumSelected() === 0 ? placeholder : ''}\n                        ref={input => {\n                            this.inputEl = input;\n                        }}\n                    />\n                    <SuggestedPillsRow\n                        onSuggestedPillAdd={onSuggestedPillAdd}\n                        selectedPillsValues={this.getPillsByKey('value')}\n                        suggestedPillsFilter={suggestedPillsFilter}\n                        suggestedPillsData={suggestedPillsData}\n                        title={suggestedPillsTitle}\n                    />\n                    <span id={this.errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n                        {error}\n                    </span>\n                </span>\n            </Tooltip>\n        );\n    }\n}\n\nexport { PillSelectorBase };\n\nconst PillSelector = React.forwardRef<Config, HTMLSpanElement>((props: Config, ref: React.Ref<any>) => (\n    <PillSelectorBase {...props} innerRef={ref} />\n));\nPillSelector.displayName = 'PillSelector';\n\nexport default PillSelector;\n"],"file":"PillSelector.js"}
+{"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelector.js"],"names":["React","classNames","uniqueId","List","Tooltip","KEYS","RoundPill","Pill","SuggestedPillsRow","stopDefaultEvent","event","preventDefault","stopPropagation","PillSelectorBase","isFocused","selectedIndex","selectedOptions","props","size","length","key","map","option","inputEl","focus","setState","inputValue","value","numPills","getNumSelected","state","backspace","index","resetSelectedIndex","onRemove","selectedOption","get","arrowLeft","Math","max","hiddenEl","arrowRight","allowInvalidPills","className","disabled","error","errorTooltipPosition","getPillClassName","getPillImageUrl","inputProps","onInput","onSuggestedPillAdd","placeholder","innerRef","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","validator","rest","suggestedPillsEnabled","hasError","classes","ariaAttrs","errorMessageID","handleBlur","handleClick","handleFocus","handleKeyDown","undefined","bind","displayText","text","id","hasWarning","isExternalUser","hiddenRef","input","getPillsByKey","Component","PillSelector","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\nimport { List } from 'immutable';\n\nimport Tooltip from '../tooltip';\nimport { KEYS } from '../../constants';\n\nimport RoundPill from './RoundPill';\nimport Pill from './Pill';\nimport SuggestedPillsRow from './SuggestedPillsRow';\nimport type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';\nimport type { Position } from '../tooltip';\n\nfunction stopDefaultEvent(event) {\n    event.preventDefault();\n    event.stopPropagation();\n}\n\ntype Props = {\n    allowInvalidPills: boolean,\n    className?: string,\n    disabled?: boolean,\n    error?: React.Node,\n    /** Position of error message tooltip */\n    errorTooltipPosition?: Position,\n    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */\n    getPillClassName?: (option: Option) => string,\n    /** Function to retrieve the image URL associated with a pill */\n    getPillImageUrl?: (data: { id: string | number, [key: string]: any }) => string,\n    innerRef?: React.Ref<any>,\n    inputProps: Object,\n    onInput: Function,\n    onRemove: Function,\n    onSuggestedPillAdd?: Function,\n    placeholder: string,\n    selectedOptions: List<Object>,\n    /** Whether to show avatars in pills (if rounded style is enabled) */\n    showAvatars?: boolean,\n    /** Whether to use rounded style for pills */\n    showRoundedPills?: boolean,\n    suggestedPillsData?: Array<Object>,\n    suggestedPillsFilter?: SuggestedPillsFilter,\n    suggestedPillsTitle?: string,\n    validator: (option: Option | OptionValue) => boolean,\n};\n\ntype State = {\n    isFocused: boolean,\n    selectedIndex: number,\n};\n\ntype DefaultProps = {\n    allowInvalidPills: boolean,\n    disabled: boolean,\n    error: string,\n    errorTooltipPosition: Position,\n    inputProps: Object,\n    placeholder: string,\n    selectedOptions: List<Object>,\n    validator: () => boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps>;\n\nclass PillSelectorBase extends React.Component<Props, State> {\n    static defaultProps: DefaultProps = {\n        allowInvalidPills: false,\n        disabled: false,\n        error: '',\n        errorTooltipPosition: 'bottom-left',\n        inputProps: {},\n        placeholder: '',\n        selectedOptions: [],\n        validator: () => true,\n    };\n\n    state = {\n        isFocused: false,\n        selectedIndex: -1,\n    };\n\n    getNumSelected = (): number => {\n        const { selectedOptions } = this.props;\n\n        return typeof selectedOptions.size === 'number' ? selectedOptions.size : selectedOptions.length;\n    };\n\n    getPillsByKey = (key: string): Array<any> => {\n        const { selectedOptions } = this.props;\n\n        return selectedOptions.map(option => option[key]);\n    };\n\n    inputEl: HTMLInputElement;\n\n    handleClick = () => {\n        this.inputEl.focus();\n    };\n\n    handleFocus = () => {\n        this.setState({ isFocused: true });\n    };\n\n    handleBlur = () => {\n        this.setState({ isFocused: false });\n    };\n\n    hiddenEl: HTMLSpanElement;\n\n    handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        const inputValue = this.inputEl.value;\n        const numPills = this.getNumSelected();\n        const { selectedIndex } = this.state;\n\n        switch (event.key) {\n            case KEYS.backspace: {\n                let index = -1;\n                if (selectedIndex >= 0) {\n                    // remove selected pill\n                    index = selectedIndex;\n                    this.resetSelectedIndex();\n                    this.inputEl.focus();\n                } else if (inputValue === '') {\n                    // remove last pill\n                    index = numPills - 1;\n                }\n                if (index >= 0) {\n                    const { onRemove, selectedOptions } = this.props;\n                    const selectedOption =\n                        // $FlowFixMe\n                        typeof selectedOptions.get === 'function' ? selectedOptions.get(index) : selectedOptions[index];\n                    onRemove(selectedOption, index);\n                    stopDefaultEvent(event);\n                }\n                break;\n            }\n            case KEYS.arrowLeft:\n                if (selectedIndex >= 0) {\n                    // select previous pill\n                    this.setState({\n                        selectedIndex: Math.max(selectedIndex - 1, 0),\n                    });\n                    stopDefaultEvent(event);\n                } else if (inputValue === '' && numPills > 0) {\n                    // select last pill\n                    this.hiddenEl.focus();\n                    this.setState({ selectedIndex: numPills - 1 });\n                    stopDefaultEvent(event);\n                }\n                break;\n            case KEYS.arrowRight: {\n                if (selectedIndex >= 0) {\n                    const index = selectedIndex + 1;\n                    if (index >= numPills) {\n                        // deselect last pill\n                        this.resetSelectedIndex();\n                        this.inputEl.focus();\n                    } else {\n                        // select next pill\n                        this.setState({ selectedIndex: index });\n                    }\n                    stopDefaultEvent(event);\n                }\n                break;\n            }\n            // no default\n        }\n    };\n\n    errorMessageID = uniqueId('errorMessage');\n\n    hiddenRef = (hiddenEl: ?HTMLSpanElement) => {\n        if (hiddenEl) {\n            this.hiddenEl = hiddenEl;\n        }\n    };\n\n    resetSelectedIndex = () => {\n        if (this.state.selectedIndex !== -1) {\n            this.setState({ selectedIndex: -1 });\n        }\n    };\n\n    render() {\n        const { isFocused, selectedIndex } = this.state;\n        const {\n            allowInvalidPills,\n            className,\n            disabled,\n            error,\n            errorTooltipPosition,\n            getPillClassName,\n            getPillImageUrl,\n            inputProps,\n            onInput,\n            onRemove,\n            onSuggestedPillAdd,\n            placeholder,\n            innerRef,\n            selectedOptions,\n            showAvatars,\n            showRoundedPills,\n            suggestedPillsData,\n            suggestedPillsFilter,\n            suggestedPillsTitle,\n            validator,\n            ...rest\n        } = this.props;\n        const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;\n        const hasError = !!error;\n        const classes = classNames('bdl-PillSelector', 'pill-selector-input-wrapper', {\n            'is-disabled': disabled,\n            'bdl-is-disabled': disabled,\n            'is-focused': isFocused,\n            'show-error': hasError,\n            'pill-selector-suggestions-enabled': suggestedPillsEnabled,\n            'bdl-PillSelector--suggestionsEnabled': suggestedPillsEnabled,\n        });\n        const ariaAttrs = {\n            'aria-invalid': hasError,\n            'aria-errormessage': this.errorMessageID,\n            'aria-describedby': this.errorMessageID,\n        };\n\n        return (\n            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme=\"error\">\n                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                <span\n                    className={classes}\n                    onBlur={this.handleBlur}\n                    onClick={this.handleClick}\n                    onFocus={this.handleFocus}\n                    onKeyDown={this.handleKeyDown}\n                    ref={innerRef}\n                >\n                    {showRoundedPills\n                        ? selectedOptions.map((option: RoundOption, index: number) => {\n                              return (\n                                  <RoundPill\n                                      className={getPillClassName ? getPillClassName(option) : undefined}\n                                      getPillImageUrl={getPillImageUrl}\n                                      isValid={allowInvalidPills ? validator(option) : true}\n                                      isDisabled={disabled}\n                                      isSelected={index === selectedIndex}\n                                      key={option.value}\n                                      onRemove={onRemove.bind(this, option, index)}\n                                      // $FlowFixMe option.text is for backwards compatibility\n                                      text={option.displayText || option.text}\n                                      showAvatar={showAvatars}\n                                      id={option.id}\n                                      hasWarning={option.hasWarning}\n                                      isExternal={option.isExternalUser}\n                                  />\n                              );\n                          })\n                        : selectedOptions.map((option: Option, index: number) => {\n                              // TODO: This and associated types will be removed once all views are updates with round pills.\n                              return (\n                                  <Pill\n                                      isValid={allowInvalidPills ? validator(option) : true}\n                                      isDisabled={disabled}\n                                      isSelected={index === selectedIndex}\n                                      key={option.value}\n                                      onRemove={onRemove.bind(this, option, index)}\n                                      // $FlowFixMe option.text is for backwards compatibility\n                                      text={option.displayText || option.text}\n                                  />\n                              );\n                          })}\n\n                    {/* hidden element for focus/key events during pill selection */}\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"accessibility-hidden\"\n                        onBlur={this.resetSelectedIndex}\n                        ref={this.hiddenRef}\n                        tabIndex={-1}\n                        data-testid=\"pill-selection-helper\"\n                    />\n                    <textarea\n                        {...ariaAttrs}\n                        {...rest}\n                        {...inputProps}\n                        autoComplete=\"off\"\n                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}\n                        disabled={disabled}\n                        onInput={onInput}\n                        placeholder={this.getNumSelected() === 0 ? placeholder : ''}\n                        ref={input => {\n                            this.inputEl = input;\n                        }}\n                    />\n                    <SuggestedPillsRow\n                        onSuggestedPillAdd={onSuggestedPillAdd}\n                        selectedPillsValues={this.getPillsByKey('value')}\n                        suggestedPillsFilter={suggestedPillsFilter}\n                        suggestedPillsData={suggestedPillsData}\n                        title={suggestedPillsTitle}\n                    />\n                    <span id={this.errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n                        {error}\n                    </span>\n                </span>\n            </Tooltip>\n        );\n    }\n}\n\nexport { PillSelectorBase };\n\nconst PillSelector = React.forwardRef<Config, HTMLSpanElement>((props: Config, ref: React.Ref<any>) => (\n    <PillSelectorBase {...props} innerRef={ref} />\n));\nPillSelector.displayName = 'PillSelector';\n\nexport default PillSelector;\n"],"file":"PillSelector.js"}

package/es/components/pill-selector-dropdown/PillSelectorDropdown.js

@@ -216,6 +216,7 @@ function (_React$Component) {
           dividerIndex = _this$props4.dividerIndex,
           dropdownScrollBoundarySelector = _this$props4.dropdownScrollBoundarySelector,
           error = _this$props4.error,
+          errorTooltipPosition = _this$props4.errorTooltipPosition,
           getPillClassName = _this$props4.getPillClassName,
           getPillImageUrl = _this$props4.getPillImageUrl,
           inputProps = _this$props4.inputProps,
@@ -251,6 +252,7 @@ function (_React$Component) {
           allowInvalidPills: allowInvalidPills,
           disabled: disabled,
           error: error,
+          errorTooltipPosition: errorTooltipPosition,
           getPillClassName: getPillClassName,
           getPillImageUrl: getPillImageUrl,
           onBlur: this.handleBlur,
@@ -260,8 +262,8 @@ function (_React$Component) {
           onSuggestedPillAdd: onSuggestedPillAdd,
           placeholder: placeholder,
           selectedOptions: selectedOptions,
-          showRoundedPills: showRoundedPills,
           showAvatars: showAvatars && showRoundedPills,
+          showRoundedPills: showRoundedPills,
           suggestedPillsData: suggestedPillsData,
           suggestedPillsFilter: suggestedPillsFilter,
           suggestedPillsTitle: suggestedPillsTitle,

package/es/components/pill-selector-dropdown/PillSelectorDropdown.js.flow

@@ -12,6 +12,7 @@ import PillSelector from './PillSelector';
 import type { contactType as Contact } from '../../features/unified-share-modal/flowTypes';
 import type { SelectOptionProp } from '../select-field/props';
 import type { Option, OptionValue, SelectedOptions, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 import './PillSelectorDropdown.scss';
 
@@ -32,6 +33,8 @@ type Props = {
     dropdownScrollBoundarySelector?: string,
     /** Error message */
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -238,6 +241,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
             dividerIndex,
             dropdownScrollBoundarySelector,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -276,6 +280,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         allowInvalidPills={allowInvalidPills}
                         disabled={disabled}
                         error={error}
+                        errorTooltipPosition={errorTooltipPosition}
                         getPillClassName={getPillClassName}
                         getPillImageUrl={getPillImageUrl}
                         onBlur={this.handleBlur}
@@ -285,8 +290,8 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         onSuggestedPillAdd={onSuggestedPillAdd}
                         placeholder={placeholder}
                         selectedOptions={selectedOptions}
-                        showRoundedPills={showRoundedPills}
                         showAvatars={showAvatars && showRoundedPills}
+                        showRoundedPills={showRoundedPills}
                         suggestedPillsData={suggestedPillsData}
                         suggestedPillsFilter={suggestedPillsFilter}
                         suggestedPillsTitle={suggestedPillsTitle}

package/es/components/pill-selector-dropdown/PillSelectorDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelectorDropdown.js"],"names":["React","classNames","List","noop","parseCSV","Label","SelectorDropdown","PillSelector","PillSelectorDropdown","inputValue","isInCompositionMode","props","allowInvalidPills","parseItems","validator","pills","filter","pill","normalizedPills","map","displayText","text","value","allowCustomPills","onPillCreate","onSelect","selectedOptions","shouldClearUnmatchedInput","validateForError","parsePills","length","resetInputValue","event","onBlur","state","addPillsFromInput","target","setState","onInput","preventDefault","clipboardData","getData","index","selectorOptions","selectedOption","get","handleInput","children","className","disabled","dividerIndex","dropdownScrollBoundarySelector","error","getPillClassName","getPillImageUrl","inputProps","isPositionDynamic","label","onRemove","onSuggestedPillAdd","overlayTitle","placeholder","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","shouldSetActiveItemOnOpen","selectorDropdownElement","handleEnter","handleSelect","handleCompositionEnd","handleCompositionStart","handleBlur","handlePaste","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { List } from 'immutable';\nimport noop from 'lodash/noop';\n\nimport parseCSV from '../../utils/parseCSV';\nimport Label from '../label';\nimport SelectorDropdown from '../selector-dropdown';\n\nimport PillSelector from './PillSelector';\nimport type { contactType as Contact } from '../../features/unified-share-modal/flowTypes';\nimport type { SelectOptionProp } from '../select-field/props';\nimport type { Option, OptionValue, SelectedOptions, SuggestedPillsFilter } from './flowTypes';\n\nimport './PillSelectorDropdown.scss';\n\ntype Props = {\n    /** If true, user can add pills not included in selector options */\n    allowCustomPills: boolean,\n    /** If true, pills with errors are parsed as pills also */\n    allowInvalidPills: boolean,\n    /** `DatalistItem` components for dropdown options to select */\n    children: React.Node,\n    /** CSS class for the component */\n    className?: string,\n    /** If true, the input control is disabled so no more input can be made */\n    disabled: boolean,\n    /** Index at which to insert a divider */\n    dividerIndex?: number,\n    /** A CSS selector matching the element to use as a boundary when auto-scrolling dropdown elements into view. When not provided, boundary will be determined by scrollIntoView utility function */\n    dropdownScrollBoundarySelector?: string,\n    /** Error message */\n    error?: React.Node,\n    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */\n    getPillClassName?: (option: Option) => string,\n    /** Function to retrieve the image URL associated with a pill */\n    getPillImageUrl?: (data: { id: string, [key: string]: any }) => string | Promise<?string>,\n    /** Passed in by `SelectorDropdown` for accessibility */\n    inputProps: Object,\n    /** Option to enable dynamic positioning with popper */\n    isPositionDynamic?: boolean,\n    /** Input label */\n    label: React.Node,\n    /** Called when pill selector input is blurred */\n    onBlur: (event: SyntheticInputEvent<HTMLInputElement>) => void,\n    /** Should update selectorOptions based on the given input value */\n    onInput: Function,\n    /** Called when creating pills */\n    onPillCreate: (pills: Array<SelectOptionProp | Contact>) => void,\n    /** Should update selectedOptions given the option and index to remove */\n    onRemove: Function,\n    /** Should update selectedOptions given an array of pills and the event */\n    onSelect: Function,\n    /** Function adds a collaborator from suggested collabs to form */\n    onSuggestedPillAdd?: Function,\n    /** Optional title of the overlay */\n    overlayTitle?: string,\n    /** function to parse user input into an array of items to be validated and then added to pill selector. If this function is not passed, a default CSV parser is used. */\n    parseItems?: Function,\n    /** A placeholder to show in the input when there are no pills */\n    placeholder: string,\n    /** Array or Immutable list with data for the selected options shown as pills */\n    selectedOptions: SelectedOptions,\n    /** Array or Immutable list with data for the dropdown options to select */\n    selectorOptions: Array<Object> | List<Object>,\n    /** Determines whether or not input text is cleared automatically when it does not result in new pills being added */\n    shouldClearUnmatchedInput?: boolean,\n    /** Determines whether or not the first item is highlighted automatically when the dropdown opens */\n    shouldSetActiveItemOnOpen?: boolean,\n    /** show avatars (uses showRoundedPills) */\n    showAvatars?: boolean,\n    /** Use rounded style for pills */\n    showRoundedPills?: boolean,\n    /** Array of suggested collaborators */\n    suggestedPillsData?: Array<Object>,\n    /** String decribes the datapoint to filter by so that items in the form are not shown in suggestions. */\n    suggestedPillsFilter?: SuggestedPillsFilter,\n    /** String describes the suggested pills */\n    suggestedPillsTitle?: string,\n    /** Validate the given input value, and update `error` prop if necessary */\n    validateForError?: Function,\n    /** Called to check if pill item data is valid. The `item` is passed in. */\n    validator: (option: Option | OptionValue) => boolean,\n};\n\ntype State = {\n    inputValue: string,\n    isInCompositionMode: boolean,\n};\n\nclass PillSelectorDropdown extends React.Component<Props, State> {\n    static defaultProps = {\n        allowCustomPills: false,\n        allowInvalidPills: false,\n        disabled: false,\n        error: '',\n        inputProps: {},\n        label: '',\n        onBlur: noop,\n        onPillCreate: noop,\n        placeholder: '',\n        selectedOptions: [],\n        selectorOptions: [],\n        shouldClearUnmatchedInput: false,\n        shouldSetActiveItemOnOpen: false,\n        validator: () => true,\n    };\n\n    state = { inputValue: '', isInCompositionMode: false };\n\n    parsePills = (inputValue: string) => {\n        const { allowInvalidPills, parseItems, validator } = this.props;\n        let pills = parseItems ? parseItems(inputValue) : parseCSV(inputValue);\n\n        if (!pills) {\n            return [];\n        }\n\n        if (!allowInvalidPills) {\n            pills = pills.filter(pill => validator(pill));\n        }\n\n        const normalizedPills = pills.map(pill =>\n            typeof pill === 'string'\n                ? {\n                      displayText: pill,\n                      text: pill, // deprecated, left for backwards compatibility\n                      value: pill,\n                  }\n                : pill,\n        );\n        return normalizedPills;\n    };\n\n    addPillsFromInput = (inputValue: string) => {\n        const {\n            allowCustomPills,\n            onPillCreate,\n            onSelect,\n            selectedOptions,\n            shouldClearUnmatchedInput,\n            validateForError,\n        } = this.props;\n\n        // Do nothing if custom pills are not allowed\n        if (!allowCustomPills) {\n            return;\n        }\n\n        // Parse pills from input\n        const pills = this.parsePills(inputValue);\n\n        // \"Select\" the pills\n        if (pills.length > 0) {\n            onSelect(pills);\n            onPillCreate(pills);\n\n            this.resetInputValue();\n        } else {\n            if (validateForError && (inputValue !== '' || selectedOptions.length === 0)) {\n                /**\n                 * If no pills were added, but an inputValue exists or\n                 * there are no pills selected, check for errors\n                 */\n                validateForError(inputValue);\n            }\n            if (shouldClearUnmatchedInput) {\n                this.resetInputValue();\n            }\n        }\n    };\n\n    handleBlur = (event: SyntheticInputEvent<HTMLInputElement>) => {\n        const { onBlur } = this.props;\n        const { inputValue } = this.state;\n        this.addPillsFromInput(inputValue);\n        onBlur(event);\n    };\n\n    handleInput = (event: SyntheticInputEvent<HTMLInputElement> | { target: HTMLInputElement | Object }) => {\n        const { target } = event;\n        const { value } = target;\n        this.setState({ inputValue: value });\n        this.props.onInput(value, event);\n    };\n\n    handleEnter = (event: SyntheticEvent<>) => {\n        const { isInCompositionMode, inputValue } = this.state;\n        if (!isInCompositionMode) {\n            event.preventDefault();\n            this.addPillsFromInput(inputValue);\n        }\n    };\n\n    handlePaste = (event: SyntheticClipboardEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const inputValue: string = event.clipboardData.getData('text');\n        this.setState({ inputValue });\n        this.props.onInput(inputValue, event);\n        this.addPillsFromInput(inputValue);\n    };\n\n    handleSelect = (index: number, event: SyntheticEvent<>) => {\n        const { onPillCreate, onSelect, selectorOptions } = this.props;\n        const selectedOption =\n            // $FlowFixMe\n            typeof selectorOptions.get === 'function' ? selectorOptions.get(index) : selectorOptions[index];\n\n        onSelect([selectedOption], event);\n        onPillCreate([selectedOption]);\n\n        this.handleInput({ target: { value: '' } });\n    };\n\n    handleCompositionStart = () => {\n        this.setState({ isInCompositionMode: true });\n    };\n\n    handleCompositionEnd = () => {\n        this.setState({ isInCompositionMode: false });\n    };\n\n    resetInputValue = () => {\n        const { onInput } = this.props;\n\n        this.setState({ inputValue: '' });\n        onInput('');\n    };\n\n    render() {\n        const {\n            allowInvalidPills,\n            children,\n            className,\n            disabled,\n            dividerIndex,\n            dropdownScrollBoundarySelector,\n            error,\n            getPillClassName,\n            getPillImageUrl,\n            inputProps,\n            isPositionDynamic,\n            label,\n            onRemove,\n            onSuggestedPillAdd,\n            overlayTitle,\n            placeholder,\n            selectedOptions,\n            showAvatars,\n            showRoundedPills,\n            suggestedPillsData,\n            suggestedPillsFilter,\n            suggestedPillsTitle,\n            shouldSetActiveItemOnOpen,\n            validator,\n        } = this.props;\n\n        const selectorDropdownElement = (\n            <SelectorDropdown\n                className={classNames('bdl-PillSelectorDropdown', 'pill-selector-wrapper', className)}\n                dividerIndex={dividerIndex}\n                isPositionDynamic={isPositionDynamic}\n                onEnter={this.handleEnter}\n                onSelect={this.handleSelect}\n                overlayTitle={overlayTitle}\n                scrollBoundarySelector={dropdownScrollBoundarySelector}\n                shouldSetActiveItemOnOpen={shouldSetActiveItemOnOpen}\n                selector={\n                    <PillSelector\n                        onChange={noop} // fix console error\n                        onCompositionEnd={this.handleCompositionEnd}\n                        onCompositionStart={this.handleCompositionStart}\n                        {...inputProps}\n                        allowInvalidPills={allowInvalidPills}\n                        disabled={disabled}\n                        error={error}\n                        getPillClassName={getPillClassName}\n                        getPillImageUrl={getPillImageUrl}\n                        onBlur={this.handleBlur}\n                        onInput={this.handleInput}\n                        onPaste={this.handlePaste}\n                        onRemove={onRemove}\n                        onSuggestedPillAdd={onSuggestedPillAdd}\n                        placeholder={placeholder}\n                        selectedOptions={selectedOptions}\n                        showRoundedPills={showRoundedPills}\n                        showAvatars={showAvatars && showRoundedPills}\n                        suggestedPillsData={suggestedPillsData}\n                        suggestedPillsFilter={suggestedPillsFilter}\n                        suggestedPillsTitle={suggestedPillsTitle}\n                        validator={validator}\n                        value={this.state.inputValue}\n                    />\n                }\n            >\n                {children}\n            </SelectorDropdown>\n        );\n\n        return label ? <Label text={label}>{selectorDropdownElement}</Label> : selectorDropdownElement;\n    }\n}\n\nexport default PillSelectorDropdown;\n"],"file":"PillSelectorDropdown.js"}
+{"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelectorDropdown.js"],"names":["React","classNames","List","noop","parseCSV","Label","SelectorDropdown","PillSelector","PillSelectorDropdown","inputValue","isInCompositionMode","props","allowInvalidPills","parseItems","validator","pills","filter","pill","normalizedPills","map","displayText","text","value","allowCustomPills","onPillCreate","onSelect","selectedOptions","shouldClearUnmatchedInput","validateForError","parsePills","length","resetInputValue","event","onBlur","state","addPillsFromInput","target","setState","onInput","preventDefault","clipboardData","getData","index","selectorOptions","selectedOption","get","handleInput","children","className","disabled","dividerIndex","dropdownScrollBoundarySelector","error","errorTooltipPosition","getPillClassName","getPillImageUrl","inputProps","isPositionDynamic","label","onRemove","onSuggestedPillAdd","overlayTitle","placeholder","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","shouldSetActiveItemOnOpen","selectorDropdownElement","handleEnter","handleSelect","handleCompositionEnd","handleCompositionStart","handleBlur","handlePaste","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { List } from 'immutable';\nimport noop from 'lodash/noop';\n\nimport parseCSV from '../../utils/parseCSV';\nimport Label from '../label';\nimport SelectorDropdown from '../selector-dropdown';\n\nimport PillSelector from './PillSelector';\nimport type { contactType as Contact } from '../../features/unified-share-modal/flowTypes';\nimport type { SelectOptionProp } from '../select-field/props';\nimport type { Option, OptionValue, SelectedOptions, SuggestedPillsFilter } from './flowTypes';\nimport type { Position } from '../tooltip';\n\nimport './PillSelectorDropdown.scss';\n\ntype Props = {\n    /** If true, user can add pills not included in selector options */\n    allowCustomPills: boolean,\n    /** If true, pills with errors are parsed as pills also */\n    allowInvalidPills: boolean,\n    /** `DatalistItem` components for dropdown options to select */\n    children: React.Node,\n    /** CSS class for the component */\n    className?: string,\n    /** If true, the input control is disabled so no more input can be made */\n    disabled: boolean,\n    /** Index at which to insert a divider */\n    dividerIndex?: number,\n    /** A CSS selector matching the element to use as a boundary when auto-scrolling dropdown elements into view. When not provided, boundary will be determined by scrollIntoView utility function */\n    dropdownScrollBoundarySelector?: string,\n    /** Error message */\n    error?: React.Node,\n    /** Position of error message tooltip */\n    errorTooltipPosition?: Position,\n    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */\n    getPillClassName?: (option: Option) => string,\n    /** Function to retrieve the image URL associated with a pill */\n    getPillImageUrl?: (data: { id: string, [key: string]: any }) => string | Promise<?string>,\n    /** Passed in by `SelectorDropdown` for accessibility */\n    inputProps: Object,\n    /** Option to enable dynamic positioning with popper */\n    isPositionDynamic?: boolean,\n    /** Input label */\n    label: React.Node,\n    /** Called when pill selector input is blurred */\n    onBlur: (event: SyntheticInputEvent<HTMLInputElement>) => void,\n    /** Should update selectorOptions based on the given input value */\n    onInput: Function,\n    /** Called when creating pills */\n    onPillCreate: (pills: Array<SelectOptionProp | Contact>) => void,\n    /** Should update selectedOptions given the option and index to remove */\n    onRemove: Function,\n    /** Should update selectedOptions given an array of pills and the event */\n    onSelect: Function,\n    /** Function adds a collaborator from suggested collabs to form */\n    onSuggestedPillAdd?: Function,\n    /** Optional title of the overlay */\n    overlayTitle?: string,\n    /** function to parse user input into an array of items to be validated and then added to pill selector. If this function is not passed, a default CSV parser is used. */\n    parseItems?: Function,\n    /** A placeholder to show in the input when there are no pills */\n    placeholder: string,\n    /** Array or Immutable list with data for the selected options shown as pills */\n    selectedOptions: SelectedOptions,\n    /** Array or Immutable list with data for the dropdown options to select */\n    selectorOptions: Array<Object> | List<Object>,\n    /** Determines whether or not input text is cleared automatically when it does not result in new pills being added */\n    shouldClearUnmatchedInput?: boolean,\n    /** Determines whether or not the first item is highlighted automatically when the dropdown opens */\n    shouldSetActiveItemOnOpen?: boolean,\n    /** show avatars (uses showRoundedPills) */\n    showAvatars?: boolean,\n    /** Use rounded style for pills */\n    showRoundedPills?: boolean,\n    /** Array of suggested collaborators */\n    suggestedPillsData?: Array<Object>,\n    /** String decribes the datapoint to filter by so that items in the form are not shown in suggestions. */\n    suggestedPillsFilter?: SuggestedPillsFilter,\n    /** String describes the suggested pills */\n    suggestedPillsTitle?: string,\n    /** Validate the given input value, and update `error` prop if necessary */\n    validateForError?: Function,\n    /** Called to check if pill item data is valid. The `item` is passed in. */\n    validator: (option: Option | OptionValue) => boolean,\n};\n\ntype State = {\n    inputValue: string,\n    isInCompositionMode: boolean,\n};\n\nclass PillSelectorDropdown extends React.Component<Props, State> {\n    static defaultProps = {\n        allowCustomPills: false,\n        allowInvalidPills: false,\n        disabled: false,\n        error: '',\n        inputProps: {},\n        label: '',\n        onBlur: noop,\n        onPillCreate: noop,\n        placeholder: '',\n        selectedOptions: [],\n        selectorOptions: [],\n        shouldClearUnmatchedInput: false,\n        shouldSetActiveItemOnOpen: false,\n        validator: () => true,\n    };\n\n    state = { inputValue: '', isInCompositionMode: false };\n\n    parsePills = (inputValue: string) => {\n        const { allowInvalidPills, parseItems, validator } = this.props;\n        let pills = parseItems ? parseItems(inputValue) : parseCSV(inputValue);\n\n        if (!pills) {\n            return [];\n        }\n\n        if (!allowInvalidPills) {\n            pills = pills.filter(pill => validator(pill));\n        }\n\n        const normalizedPills = pills.map(pill =>\n            typeof pill === 'string'\n                ? {\n                      displayText: pill,\n                      text: pill, // deprecated, left for backwards compatibility\n                      value: pill,\n                  }\n                : pill,\n        );\n        return normalizedPills;\n    };\n\n    addPillsFromInput = (inputValue: string) => {\n        const {\n            allowCustomPills,\n            onPillCreate,\n            onSelect,\n            selectedOptions,\n            shouldClearUnmatchedInput,\n            validateForError,\n        } = this.props;\n\n        // Do nothing if custom pills are not allowed\n        if (!allowCustomPills) {\n            return;\n        }\n\n        // Parse pills from input\n        const pills = this.parsePills(inputValue);\n\n        // \"Select\" the pills\n        if (pills.length > 0) {\n            onSelect(pills);\n            onPillCreate(pills);\n\n            this.resetInputValue();\n        } else {\n            if (validateForError && (inputValue !== '' || selectedOptions.length === 0)) {\n                /**\n                 * If no pills were added, but an inputValue exists or\n                 * there are no pills selected, check for errors\n                 */\n                validateForError(inputValue);\n            }\n            if (shouldClearUnmatchedInput) {\n                this.resetInputValue();\n            }\n        }\n    };\n\n    handleBlur = (event: SyntheticInputEvent<HTMLInputElement>) => {\n        const { onBlur } = this.props;\n        const { inputValue } = this.state;\n        this.addPillsFromInput(inputValue);\n        onBlur(event);\n    };\n\n    handleInput = (event: SyntheticInputEvent<HTMLInputElement> | { target: HTMLInputElement | Object }) => {\n        const { target } = event;\n        const { value } = target;\n        this.setState({ inputValue: value });\n        this.props.onInput(value, event);\n    };\n\n    handleEnter = (event: SyntheticEvent<>) => {\n        const { isInCompositionMode, inputValue } = this.state;\n        if (!isInCompositionMode) {\n            event.preventDefault();\n            this.addPillsFromInput(inputValue);\n        }\n    };\n\n    handlePaste = (event: SyntheticClipboardEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const inputValue: string = event.clipboardData.getData('text');\n        this.setState({ inputValue });\n        this.props.onInput(inputValue, event);\n        this.addPillsFromInput(inputValue);\n    };\n\n    handleSelect = (index: number, event: SyntheticEvent<>) => {\n        const { onPillCreate, onSelect, selectorOptions } = this.props;\n        const selectedOption =\n            // $FlowFixMe\n            typeof selectorOptions.get === 'function' ? selectorOptions.get(index) : selectorOptions[index];\n\n        onSelect([selectedOption], event);\n        onPillCreate([selectedOption]);\n\n        this.handleInput({ target: { value: '' } });\n    };\n\n    handleCompositionStart = () => {\n        this.setState({ isInCompositionMode: true });\n    };\n\n    handleCompositionEnd = () => {\n        this.setState({ isInCompositionMode: false });\n    };\n\n    resetInputValue = () => {\n        const { onInput } = this.props;\n\n        this.setState({ inputValue: '' });\n        onInput('');\n    };\n\n    render() {\n        const {\n            allowInvalidPills,\n            children,\n            className,\n            disabled,\n            dividerIndex,\n            dropdownScrollBoundarySelector,\n            error,\n            errorTooltipPosition,\n            getPillClassName,\n            getPillImageUrl,\n            inputProps,\n            isPositionDynamic,\n            label,\n            onRemove,\n            onSuggestedPillAdd,\n            overlayTitle,\n            placeholder,\n            selectedOptions,\n            showAvatars,\n            showRoundedPills,\n            suggestedPillsData,\n            suggestedPillsFilter,\n            suggestedPillsTitle,\n            shouldSetActiveItemOnOpen,\n            validator,\n        } = this.props;\n\n        const selectorDropdownElement = (\n            <SelectorDropdown\n                className={classNames('bdl-PillSelectorDropdown', 'pill-selector-wrapper', className)}\n                dividerIndex={dividerIndex}\n                isPositionDynamic={isPositionDynamic}\n                onEnter={this.handleEnter}\n                onSelect={this.handleSelect}\n                overlayTitle={overlayTitle}\n                scrollBoundarySelector={dropdownScrollBoundarySelector}\n                shouldSetActiveItemOnOpen={shouldSetActiveItemOnOpen}\n                selector={\n                    <PillSelector\n                        onChange={noop} // fix console error\n                        onCompositionEnd={this.handleCompositionEnd}\n                        onCompositionStart={this.handleCompositionStart}\n                        {...inputProps}\n                        allowInvalidPills={allowInvalidPills}\n                        disabled={disabled}\n                        error={error}\n                        errorTooltipPosition={errorTooltipPosition}\n                        getPillClassName={getPillClassName}\n                        getPillImageUrl={getPillImageUrl}\n                        onBlur={this.handleBlur}\n                        onInput={this.handleInput}\n                        onPaste={this.handlePaste}\n                        onRemove={onRemove}\n                        onSuggestedPillAdd={onSuggestedPillAdd}\n                        placeholder={placeholder}\n                        selectedOptions={selectedOptions}\n                        showAvatars={showAvatars && showRoundedPills}\n                        showRoundedPills={showRoundedPills}\n                        suggestedPillsData={suggestedPillsData}\n                        suggestedPillsFilter={suggestedPillsFilter}\n                        suggestedPillsTitle={suggestedPillsTitle}\n                        validator={validator}\n                        value={this.state.inputValue}\n                    />\n                }\n            >\n                {children}\n            </SelectorDropdown>\n        );\n\n        return label ? <Label text={label}>{selectorDropdownElement}</Label> : selectorDropdownElement;\n    }\n}\n\nexport default PillSelectorDropdown;\n"],"file":"PillSelectorDropdown.js"}

package/es/elements/common/sub-header/ViewModeChangeButton.scss

@@ -1,4 +1,4 @@
-.bdl-ViewModeChangeButton {
+.btn.bdl-ViewModeChangeButton {
     padding: 5px 6px;
 
     svg {

package/es/features/unified-share-modal/ContactsField.js

@@ -242,6 +242,7 @@ function (_React$Component) {
         placeholder: intl.formatMessage(commonMessages.pillSelectorPlaceholder),
         ref: fieldRef,
         selectedOptions: selectedContacts,
+        showAvatars: true,
         showRoundedPills: true,
         selectorOptions: contacts,
         validateForError: validateForError,

package/es/features/unified-share-modal/ContactsField.js.flow

@@ -209,6 +209,7 @@ class ContactsField extends React.Component<Props, State> {
                 placeholder={intl.formatMessage(commonMessages.pillSelectorPlaceholder)}
                 ref={fieldRef}
                 selectedOptions={selectedContacts}
+                showAvatars
                 showRoundedPills
                 selectorOptions={contacts}
                 validateForError={validateForError}

package/es/features/unified-share-modal/ContactsField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/unified-share-modal/ContactsField.js"],"names":["React","FormattedMessage","injectIntl","debounce","noop","classNames","PillSelectorDropdown","ContactDatalistItem","computeSuggestedCollabs","parseEmails","commonMessages","messages","isSubstring","value","searchString","toLowerCase","indexOf","ContactsField","props","contacts","suggestedCollaborators","pillSelectorInputValue","state","suggestedOptions","otherOptions","setState","numSuggestedShowing","length","selectedContacts","fullContacts","filter","name","email","id","find","addSuggestedContacts","map","isExternalUser","type","text","query","getContacts","then","filteredContacts","filterContacts","catch","error","isCanceled","getContactsPromise","inputValue","validator","emails","validEmails","onInput","trimmedValue","trim","debouncedGetContacts","disabled","fieldRef","getContactAvatarUrl","getPillClassName","intl","label","onContactAdd","onContactRemove","onPillCreate","showContactAvatars","validateForError","groupLabel","shouldShowSuggested","pillSelectorOverlayClasses","scrollable","undefined","autoFocus","onChange","handlePillSelectorInput","formatMessage","suggestedCollabsTitle","handleParseItems","pillSelectorPlaceholder","Component","ContactsFieldBase"],"mappings":"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","sourcesContent":["// @flow\n\nimport * as React from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport debounce from 'lodash/debounce';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\n\nimport PillSelectorDropdown from '../../components/pill-selector-dropdown';\nimport ContactDatalistItem from '../../components/contact-datalist-item';\nimport computeSuggestedCollabs from './utils/computeSuggestedCollabs';\nimport parseEmails from '../../utils/parseEmails';\nimport commonMessages from '../../common/messages';\n\nimport messages from './messages';\nimport type { SuggestedCollabLookup, contactType as Contact } from './flowTypes';\nimport type { SelectOptionProp } from '../../components/select-field/props';\n\ntype Props = {\n    disabled: boolean,\n    error: string,\n    fieldRef?: Object,\n    getContactAvatarUrl?: (contact: Contact) => string,\n    getContacts: (query: string) => Promise<Array<Contact>>,\n    getPillClassName?: (option: SelectOptionProp) => string,\n    intl: any,\n    label: React.Node,\n    onContactAdd: Function,\n    onContactRemove: Function,\n    onInput?: Function,\n    onPillCreate?: (pills: Array<SelectOptionProp | Contact>) => void,\n    selectedContacts: Array<Contact>,\n    showContactAvatars?: boolean,\n    suggestedCollaborators?: SuggestedCollabLookup,\n    validateForError: Function,\n    validator: Function,\n};\n\ntype State = {\n    contacts: Array<Contact>,\n    numSuggestedShowing: number,\n    pillSelectorInputValue: string,\n};\n\nconst isSubstring = (value, searchString) => {\n    return value && value.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;\n};\n\nclass ContactsField extends React.Component<Props, State> {\n    static defaultProps = {\n        showContactAvatars: false,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        this.state = {\n            contacts: [],\n            numSuggestedShowing: 0,\n            pillSelectorInputValue: '',\n        };\n    }\n\n    addSuggestedContacts = (contacts: Array<Contact>) => {\n        const { suggestedCollaborators = {} } = this.props;\n        const { pillSelectorInputValue } = this.state;\n\n        const [suggestedOptions, otherOptions] = computeSuggestedCollabs(\n            contacts,\n            suggestedCollaborators,\n            pillSelectorInputValue,\n        );\n        this.setState({ numSuggestedShowing: suggestedOptions.length });\n        return [...suggestedOptions, ...otherOptions];\n    };\n\n    filterContacts = (contacts: Array<Contact>): Array<Contact> => {\n        const { pillSelectorInputValue } = this.state;\n        const { selectedContacts, suggestedCollaborators } = this.props;\n        if (pillSelectorInputValue && contacts) {\n            let fullContacts = contacts\n                .filter(\n                    // filter contacts whose name or email don't match input value\n                    ({ name, email }) =>\n                        isSubstring(name, pillSelectorInputValue) || isSubstring(email, pillSelectorInputValue),\n                )\n                .filter(\n                    // filter contacts who have already been selected\n                    ({ email, id }) => !selectedContacts.find(({ value }) => value === email || value === id),\n                );\n\n            if (suggestedCollaborators) {\n                fullContacts = this.addSuggestedContacts(fullContacts);\n            }\n\n            return fullContacts.map<Contact>(({ email, id, isExternalUser, name, type }) => ({\n                // map to standardized DatalistItem format\n                // TODO: refactor this so inline conversions aren't required at every usage\n                email,\n                id,\n                isExternalUser,\n                text: name,\n                type,\n                value: email || id, // if email doesn't exist, contact is a group, use id\n            }));\n        }\n\n        // return empty selector options if input value is empty\n        return [];\n    };\n\n    getContactsPromise = (query: string) => {\n        return this.props\n            .getContacts(query)\n            .then(contacts => {\n                const filteredContacts = this.filterContacts(contacts);\n                this.setState({ contacts: filteredContacts });\n            })\n            .catch(error => {\n                if (error.isCanceled) {\n                    // silently fail - this happens often when requests get cancelled\n                    // due to overlapping requests\n                    return;\n                }\n                throw error;\n            });\n    };\n\n    debouncedGetContacts = debounce(this.getContactsPromise, 200);\n\n    handleParseItems = (inputValue: string): Array<string> => {\n        const { validator } = this.props;\n\n        // ContactField allows invalid pills to be displayed in\n        // in some cases (e.g., when user is external and external\n        // collab is restricted). We don't allow, however, invalid\n        // emails from the pill selector input to be turned into pills.\n        const emails = parseEmails(inputValue);\n        const validEmails = emails.filter(email => validator(email));\n\n        return validEmails;\n    };\n\n    handlePillSelectorInput = (value: string) => {\n        const { onInput } = this.props;\n        const trimmedValue = value.trim();\n\n        this.setState({\n            pillSelectorInputValue: trimmedValue,\n        });\n\n        if (onInput) {\n            onInput(value);\n        }\n\n        if (!trimmedValue) {\n            this.setState({ contacts: [] });\n            return;\n        }\n\n        this.debouncedGetContacts(trimmedValue);\n    };\n\n    render() {\n        const {\n            disabled,\n            error,\n            fieldRef,\n            getContactAvatarUrl,\n            getPillClassName,\n            intl,\n            label,\n            onContactAdd,\n            onContactRemove,\n            onPillCreate,\n            selectedContacts,\n            showContactAvatars,\n            validateForError,\n            validator,\n        } = this.props;\n        const { contacts, numSuggestedShowing } = this.state;\n        const groupLabel = <FormattedMessage {...messages.groupLabel} />;\n        const shouldShowSuggested = numSuggestedShowing > 0;\n        const pillSelectorOverlayClasses = classNames({\n            scrollable: contacts.length > 5,\n        });\n\n        return (\n            <PillSelectorDropdown\n                allowCustomPills\n                allowInvalidPills\n                className={pillSelectorOverlayClasses}\n                dividerIndex={shouldShowSuggested ? numSuggestedShowing : undefined}\n                disabled={disabled}\n                error={error}\n                getPillClassName={getPillClassName}\n                getPillImageUrl={getContactAvatarUrl}\n                inputProps={{\n                    autoFocus: true,\n                    onChange: noop,\n                }}\n                label={label}\n                onInput={this.handlePillSelectorInput}\n                onRemove={onContactRemove}\n                onSelect={onContactAdd}\n                onPillCreate={onPillCreate}\n                overlayTitle={shouldShowSuggested ? intl.formatMessage(messages.suggestedCollabsTitle) : undefined}\n                parseItems={this.handleParseItems}\n                placeholder={intl.formatMessage(commonMessages.pillSelectorPlaceholder)}\n                ref={fieldRef}\n                selectedOptions={selectedContacts}\n                showRoundedPills\n                selectorOptions={contacts}\n                validateForError={validateForError}\n                validator={validator}\n            >\n                {contacts.map(({ email, isExternalUser, text = null, id }) => (\n                    <ContactDatalistItem\n                        getContactAvatarUrl={getContactAvatarUrl}\n                        key={id}\n                        id={id}\n                        isExternal={isExternalUser}\n                        name={text}\n                        subtitle={email || groupLabel}\n                        title={text}\n                        showAvatar={showContactAvatars}\n                    />\n                ))}\n            </PillSelectorDropdown>\n        );\n    }\n}\n\nexport { ContactsField as ContactsFieldBase };\nexport default injectIntl(ContactsField);\n"],"file":"ContactsField.js"}
+{"version":3,"sources":["../../../src/features/unified-share-modal/ContactsField.js"],"names":["React","FormattedMessage","injectIntl","debounce","noop","classNames","PillSelectorDropdown","ContactDatalistItem","computeSuggestedCollabs","parseEmails","commonMessages","messages","isSubstring","value","searchString","toLowerCase","indexOf","ContactsField","props","contacts","suggestedCollaborators","pillSelectorInputValue","state","suggestedOptions","otherOptions","setState","numSuggestedShowing","length","selectedContacts","fullContacts","filter","name","email","id","find","addSuggestedContacts","map","isExternalUser","type","text","query","getContacts","then","filteredContacts","filterContacts","catch","error","isCanceled","getContactsPromise","inputValue","validator","emails","validEmails","onInput","trimmedValue","trim","debouncedGetContacts","disabled","fieldRef","getContactAvatarUrl","getPillClassName","intl","label","onContactAdd","onContactRemove","onPillCreate","showContactAvatars","validateForError","groupLabel","shouldShowSuggested","pillSelectorOverlayClasses","scrollable","undefined","autoFocus","onChange","handlePillSelectorInput","formatMessage","suggestedCollabsTitle","handleParseItems","pillSelectorPlaceholder","Component","ContactsFieldBase"],"mappings":"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","sourcesContent":["// @flow\n\nimport * as React from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport debounce from 'lodash/debounce';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\n\nimport PillSelectorDropdown from '../../components/pill-selector-dropdown';\nimport ContactDatalistItem from '../../components/contact-datalist-item';\nimport computeSuggestedCollabs from './utils/computeSuggestedCollabs';\nimport parseEmails from '../../utils/parseEmails';\nimport commonMessages from '../../common/messages';\n\nimport messages from './messages';\nimport type { SuggestedCollabLookup, contactType as Contact } from './flowTypes';\nimport type { SelectOptionProp } from '../../components/select-field/props';\n\ntype Props = {\n    disabled: boolean,\n    error: string,\n    fieldRef?: Object,\n    getContactAvatarUrl?: (contact: Contact) => string,\n    getContacts: (query: string) => Promise<Array<Contact>>,\n    getPillClassName?: (option: SelectOptionProp) => string,\n    intl: any,\n    label: React.Node,\n    onContactAdd: Function,\n    onContactRemove: Function,\n    onInput?: Function,\n    onPillCreate?: (pills: Array<SelectOptionProp | Contact>) => void,\n    selectedContacts: Array<Contact>,\n    showContactAvatars?: boolean,\n    suggestedCollaborators?: SuggestedCollabLookup,\n    validateForError: Function,\n    validator: Function,\n};\n\ntype State = {\n    contacts: Array<Contact>,\n    numSuggestedShowing: number,\n    pillSelectorInputValue: string,\n};\n\nconst isSubstring = (value, searchString) => {\n    return value && value.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;\n};\n\nclass ContactsField extends React.Component<Props, State> {\n    static defaultProps = {\n        showContactAvatars: false,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        this.state = {\n            contacts: [],\n            numSuggestedShowing: 0,\n            pillSelectorInputValue: '',\n        };\n    }\n\n    addSuggestedContacts = (contacts: Array<Contact>) => {\n        const { suggestedCollaborators = {} } = this.props;\n        const { pillSelectorInputValue } = this.state;\n\n        const [suggestedOptions, otherOptions] = computeSuggestedCollabs(\n            contacts,\n            suggestedCollaborators,\n            pillSelectorInputValue,\n        );\n        this.setState({ numSuggestedShowing: suggestedOptions.length });\n        return [...suggestedOptions, ...otherOptions];\n    };\n\n    filterContacts = (contacts: Array<Contact>): Array<Contact> => {\n        const { pillSelectorInputValue } = this.state;\n        const { selectedContacts, suggestedCollaborators } = this.props;\n        if (pillSelectorInputValue && contacts) {\n            let fullContacts = contacts\n                .filter(\n                    // filter contacts whose name or email don't match input value\n                    ({ name, email }) =>\n                        isSubstring(name, pillSelectorInputValue) || isSubstring(email, pillSelectorInputValue),\n                )\n                .filter(\n                    // filter contacts who have already been selected\n                    ({ email, id }) => !selectedContacts.find(({ value }) => value === email || value === id),\n                );\n\n            if (suggestedCollaborators) {\n                fullContacts = this.addSuggestedContacts(fullContacts);\n            }\n\n            return fullContacts.map<Contact>(({ email, id, isExternalUser, name, type }) => ({\n                // map to standardized DatalistItem format\n                // TODO: refactor this so inline conversions aren't required at every usage\n                email,\n                id,\n                isExternalUser,\n                text: name,\n                type,\n                value: email || id, // if email doesn't exist, contact is a group, use id\n            }));\n        }\n\n        // return empty selector options if input value is empty\n        return [];\n    };\n\n    getContactsPromise = (query: string) => {\n        return this.props\n            .getContacts(query)\n            .then(contacts => {\n                const filteredContacts = this.filterContacts(contacts);\n                this.setState({ contacts: filteredContacts });\n            })\n            .catch(error => {\n                if (error.isCanceled) {\n                    // silently fail - this happens often when requests get cancelled\n                    // due to overlapping requests\n                    return;\n                }\n                throw error;\n            });\n    };\n\n    debouncedGetContacts = debounce(this.getContactsPromise, 200);\n\n    handleParseItems = (inputValue: string): Array<string> => {\n        const { validator } = this.props;\n\n        // ContactField allows invalid pills to be displayed in\n        // in some cases (e.g., when user is external and external\n        // collab is restricted). We don't allow, however, invalid\n        // emails from the pill selector input to be turned into pills.\n        const emails = parseEmails(inputValue);\n        const validEmails = emails.filter(email => validator(email));\n\n        return validEmails;\n    };\n\n    handlePillSelectorInput = (value: string) => {\n        const { onInput } = this.props;\n        const trimmedValue = value.trim();\n\n        this.setState({\n            pillSelectorInputValue: trimmedValue,\n        });\n\n        if (onInput) {\n            onInput(value);\n        }\n\n        if (!trimmedValue) {\n            this.setState({ contacts: [] });\n            return;\n        }\n\n        this.debouncedGetContacts(trimmedValue);\n    };\n\n    render() {\n        const {\n            disabled,\n            error,\n            fieldRef,\n            getContactAvatarUrl,\n            getPillClassName,\n            intl,\n            label,\n            onContactAdd,\n            onContactRemove,\n            onPillCreate,\n            selectedContacts,\n            showContactAvatars,\n            validateForError,\n            validator,\n        } = this.props;\n        const { contacts, numSuggestedShowing } = this.state;\n        const groupLabel = <FormattedMessage {...messages.groupLabel} />;\n        const shouldShowSuggested = numSuggestedShowing > 0;\n        const pillSelectorOverlayClasses = classNames({\n            scrollable: contacts.length > 5,\n        });\n\n        return (\n            <PillSelectorDropdown\n                allowCustomPills\n                allowInvalidPills\n                className={pillSelectorOverlayClasses}\n                dividerIndex={shouldShowSuggested ? numSuggestedShowing : undefined}\n                disabled={disabled}\n                error={error}\n                getPillClassName={getPillClassName}\n                getPillImageUrl={getContactAvatarUrl}\n                inputProps={{\n                    autoFocus: true,\n                    onChange: noop,\n                }}\n                label={label}\n                onInput={this.handlePillSelectorInput}\n                onRemove={onContactRemove}\n                onSelect={onContactAdd}\n                onPillCreate={onPillCreate}\n                overlayTitle={shouldShowSuggested ? intl.formatMessage(messages.suggestedCollabsTitle) : undefined}\n                parseItems={this.handleParseItems}\n                placeholder={intl.formatMessage(commonMessages.pillSelectorPlaceholder)}\n                ref={fieldRef}\n                selectedOptions={selectedContacts}\n                showAvatars\n                showRoundedPills\n                selectorOptions={contacts}\n                validateForError={validateForError}\n                validator={validator}\n            >\n                {contacts.map(({ email, isExternalUser, text = null, id }) => (\n                    <ContactDatalistItem\n                        getContactAvatarUrl={getContactAvatarUrl}\n                        key={id}\n                        id={id}\n                        isExternal={isExternalUser}\n                        name={text}\n                        subtitle={email || groupLabel}\n                        title={text}\n                        showAvatar={showContactAvatars}\n                    />\n                ))}\n            </PillSelectorDropdown>\n        );\n    }\n}\n\nexport { ContactsField as ContactsFieldBase };\nexport default injectIntl(ContactsField);\n"],"file":"ContactsField.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "17.1.0",
+    "version": "17.2.0-beta.1",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/pill-selector-dropdown/PillSelector.js

@@ -11,6 +11,7 @@ import RoundPill from './RoundPill';
 import Pill from './Pill';
 import SuggestedPillsRow from './SuggestedPillsRow';
 import type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 function stopDefaultEvent(event) {
     event.preventDefault();
@@ -22,6 +23,8 @@ type Props = {
     className?: string,
     disabled?: boolean,
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -52,6 +55,7 @@ type DefaultProps = {
     allowInvalidPills: boolean,
     disabled: boolean,
     error: string,
+    errorTooltipPosition: Position,
     inputProps: Object,
     placeholder: string,
     selectedOptions: List<Object>,
@@ -65,6 +69,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         allowInvalidPills: false,
         disabled: false,
         error: '',
+        errorTooltipPosition: 'bottom-left',
         inputProps: {},
         placeholder: '',
         selectedOptions: [],
@@ -185,6 +190,7 @@ class PillSelectorBase extends React.Component<Props, State> {
             className,
             disabled,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -219,7 +225,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         };
 
         return (
-            <Tooltip isShown={hasError} text={error || ''} position="bottom-left" theme="error">
+            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme="error">
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}
@@ -242,7 +248,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                                       onRemove={onRemove.bind(this, option, index)}
                                       // $FlowFixMe option.text is for backwards compatibility
                                       text={option.displayText || option.text}
-                                      showAvatar
+                                      showAvatar={showAvatars}
                                       id={option.id}
                                       hasWarning={option.hasWarning}
                                       isExternal={option.isExternalUser}
@@ -278,9 +284,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                         {...rest}
                         {...inputProps}
                         autoComplete="off"
-                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
-                            'bdl-PillSelector-input--showAvatars': showAvatars,
-                        })}
+                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}
                         disabled={disabled}
                         onInput={onInput}
                         placeholder={this.getNumSelected() === 0 ? placeholder : ''}

package/src/components/pill-selector-dropdown/PillSelectorDropdown.js

@@ -12,6 +12,7 @@ import PillSelector from './PillSelector';
 import type { contactType as Contact } from '../../features/unified-share-modal/flowTypes';
 import type { SelectOptionProp } from '../select-field/props';
 import type { Option, OptionValue, SelectedOptions, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 import './PillSelectorDropdown.scss';
 
@@ -32,6 +33,8 @@ type Props = {
     dropdownScrollBoundarySelector?: string,
     /** Error message */
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -238,6 +241,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
             dividerIndex,
             dropdownScrollBoundarySelector,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -276,6 +280,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         allowInvalidPills={allowInvalidPills}
                         disabled={disabled}
                         error={error}
+                        errorTooltipPosition={errorTooltipPosition}
                         getPillClassName={getPillClassName}
                         getPillImageUrl={getPillImageUrl}
                         onBlur={this.handleBlur}
@@ -285,8 +290,8 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         onSuggestedPillAdd={onSuggestedPillAdd}
                         placeholder={placeholder}
                         selectedOptions={selectedOptions}
-                        showRoundedPills={showRoundedPills}
                         showAvatars={showAvatars && showRoundedPills}
+                        showRoundedPills={showRoundedPills}
                         suggestedPillsData={suggestedPillsData}
                         suggestedPillsFilter={suggestedPillsFilter}
                         suggestedPillsTitle={suggestedPillsTitle}