box-ui-elements 19.0.0-beta.9 → 19.0.0

package/src/features/content-answers/constants.ts

@@ -0,0 +1,134 @@
+export const MOCK_LONG_PROMPT =
+    'What is the significance of the character limit in the text area, and why is it important to ensure that users are notified when they exceed it? Additionally, what steps can be taken to prevent users from exceeding the character limit, and how can errors related to the character limit be handled in a user-friendly manner?';
+
+export const TEXT_AREA = {
+    MAX_LENGTH: 300,
+};
+/* ------------------ Allowable file extensions ------------------ */
+export const CODE_FILE_EXTENSIONS = [
+    'as',
+    'as3',
+    'asm',
+    'bat',
+    'c',
+    'cc',
+    'cmake',
+    'cpp',
+    'cs',
+    'css',
+    'cxx',
+    'diff',
+    'erb',
+    'groovy',
+    'h',
+    'haml',
+    'hh',
+    'htm',
+    'html',
+    'java',
+    'js',
+    'json',
+    'less',
+    'm',
+    'make',
+    'md',
+    'ml',
+    'mm',
+    'php',
+    'pl',
+    'plist',
+    'properties',
+    'py',
+    'rb',
+    'rst',
+    'sass',
+    'scala',
+    'script',
+    'scm',
+    'sml',
+    'sql',
+    'sh',
+    'vi',
+    'vim',
+    'webdoc',
+    'xhtml',
+    'yaml',
+];
+
+export const DOCUMENT_FILE_EXTENSIONS = [
+    'csv',
+    'doc',
+    'docx',
+    'dwg',
+    'gdoc',
+    'gsheet',
+    'gslide',
+    'gslides',
+    'idml',
+    'indd',
+    'indt',
+    'inx',
+    'key',
+    'numbers',
+    'odp',
+    'ods',
+    'odt',
+    'pages',
+    'pdf',
+    'ppt',
+    'pptx',
+    'rtf',
+    'wpd',
+    'xls',
+    'xlsm',
+    'xlsx',
+];
+
+export const TEXT_FILE_EXTENSIONS = [
+    'as',
+    'as3',
+    'asm',
+    'bat',
+    'c',
+    'cc',
+    'cmake',
+    'cpp',
+    'cs',
+    'css',
+    'cxx',
+    'diff',
+    'erb',
+    'groovy',
+    'h',
+    'haml',
+    'hh',
+    'java',
+    'js',
+    'json',
+    'less',
+    'log',
+    'm',
+    'make',
+    'md',
+    'ml',
+    'mm',
+    'php',
+    'pl',
+    'plist',
+    'properties',
+    'py',
+    'rb',
+    'rst',
+    'sass',
+    'scala',
+    'script',
+    'scm',
+    'sml',
+    'sql',
+    'sh',
+    'txt',
+    'vi',
+    'vim',
+    'webdoc',
+    'yaml',
+];

package/src/features/content-answers/index.ts

@@ -0,0 +1 @@
+export { default } from './ContentAnswers';

package/src/features/content-answers/messages.ts

@@ -0,0 +1,87 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    ask: {
+        defaultMessage: 'Ask',
+        description: 'Content Answers submit input button text',
+        id: 'boxui.contentAnswers.ask',
+    },
+    askDisabledTooltip: {
+        defaultMessage: 'You can submit another question once Box AI has finished responding',
+        description: 'Content Answers submit input button disabled tooltip text when answer is generating',
+        id: 'boxui.contentAnswers.askDisabledTooltip',
+    },
+    askQuestionPlaceholder: {
+        defaultMessage: 'Ask anything about this document',
+        description: 'Content Answers modal input placeholder',
+        id: 'boxui.contentAnswers.askQuestionPlaceholder',
+    },
+    contentAnswersTitle: {
+        defaultMessage: 'Box AI',
+        description: 'Content Answers feature name shown on menu item and modal title',
+        id: 'boxui.contentAnswers.contentAnswersTitle',
+    },
+    defaultTooltip: {
+        defaultMessage: 'Get instant answers about this document using Box AI',
+        description: 'Default tooltip message for Content Answers entry point button',
+        id: 'boxui.contentAnswers.defaultTooltip',
+    },
+    disabledTooltipFileNotCompatible: {
+        defaultMessage: 'Box AI is not currently supported for this file type',
+        description:
+            'Disabled tooltip message for Content Answers entry point button when the file type is not supported',
+        id: 'boxui.contentAnswers.disabledTooltipFileNotCompatible',
+    },
+    hasQuestionsTooltip: {
+        defaultMessage: 'Return to Box AI',
+        description: 'Existing questions tooltip message for Content Answers entry point button',
+        id: 'boxui.contentAnswers.hasQuestionsTooltip',
+    },
+    inlineErrorText: {
+        defaultMessage: 'The Box AI service was unavailable.',
+        description: 'Content Answers error message when the service fails',
+        id: 'boxui.contentAnswers.inlineErrorText',
+    },
+    intelligenceUnavailableDescription: {
+        defaultMessage: 'The Box AI service is not responding.',
+        description: 'Box AI Q&A service unavailable error description',
+        id: 'boxui.contentAnswers.intelligenceUnavailableDescription',
+    },
+    intelligenceUnavailableHeading: {
+        defaultMessage: 'Box AI is unavailable',
+        description: 'Box AI Q&A service unavailable error title',
+        id: 'boxui.contentAnswers.intelligenceUnavailableHeading',
+    },
+    intelligenceUnavailableTryAgain: {
+        defaultMessage: 'Please try again later.',
+        description: 'Box AI Q&A service unavailable error try again later description',
+        id: 'boxui.contentAnswers.intelligenceUnavailableTryAgain',
+    },
+    maxCharactersReachedError: {
+        defaultMessage: 'Maximum of {characterLimit} characters reached',
+        description: 'Error tooltip to show inside text area if the user reached the character limit',
+        id: 'boxui.contentAnswers.maxCharactersReachedError',
+    },
+    retryResponse: {
+        defaultMessage: 'Retry',
+        description: 'Retry button label to send again the question to the service',
+        id: 'boxui.contentAnswers.retryResponse',
+    },
+    welcomeAskQuestionText: {
+        defaultMessage: 'Ask questions about {name}',
+        description: 'Content Answers welcome message for asking questions',
+        id: 'boxui.contentAnswers.welcomeAskQuestionText',
+    },
+    welcomeClearChatText: {
+        defaultMessage: 'This chat will be cleared when you close this document',
+        description: 'Content Answers welcome message for clearing the chat',
+        id: 'boxui.contentAnswers.welcomeClearChatText',
+    },
+    welcomeMessageTitle: {
+        defaultMessage: 'Welcome to Box AI',
+        description: 'Content Answers welcome message title',
+        id: 'boxui.contentAnswers.welcomeMessageTitle',
+    },
+});
+
+export default messages;

package/src/features/content-explorer/content-explorer/ContentExplorer.js

@@ -26,6 +26,8 @@ class ContentExplorer extends Component {
          * Each column has to be a Column element
          */
         additionalColumns: PropTypes.arrayOf(PropTypes.element),
+        /** Items that will show up as selected */
+        controlledSelectedItems: PropTypes.object,
         /**  Allow users to choose no selections in MULTI_SELECT mode, defaults to false  */
         isNoSelectionAllowed: PropTypes.bool,
         /** Props for breadcrumbs */
@@ -199,6 +201,10 @@ class ContentExplorer extends Component {
         document.removeEventListener('click', this.handleDocumentClick, true);
     }
 
+    getAllSelectedItems = () => {
+        return { ...this.state.selectedItems, ...this.props.controlledSelectedItems };
+    };
+
     areAllItemsSelected = () => {
         const { items } = this.props;
         const { selectedItems } = this.state;
@@ -330,7 +336,6 @@ class ContentExplorer extends Component {
 
     handleItemClick = ({ event, index }) => {
         const { contentExplorerMode, items, onSelectItem, onSelectedItemsUpdate } = this.props;
-        const { selectedItems } = this.state;
         const item = items[index];
 
         if (item.isDisabled || item.isLoading || item.isActionDisabled) {
@@ -342,13 +347,12 @@ class ContentExplorer extends Component {
 
         let newSelectedItems = {};
         if (contentExplorerMode === ContentExplorerModes.MULTI_SELECT) {
-            newSelectedItems = this.toggleSelectedItem(selectedItems, item);
+            newSelectedItems = this.toggleSelectedItem(this.getAllSelectedItems(), item);
         } else {
             newSelectedItems[item.id] = item;
         }
 
         this.setState({ selectedItems: newSelectedItems });
-
         if (onSelectedItemsUpdate) {
             onSelectedItemsUpdate(newSelectedItems);
         }
@@ -412,7 +416,6 @@ class ContentExplorer extends Component {
                 result[item.id] = item;
             }
         });
-
         return result;
     };
 
@@ -425,7 +428,6 @@ class ContentExplorer extends Component {
                 delete result[item.id];
             }
         });
-
         return result;
     };
 
@@ -436,6 +438,7 @@ class ContentExplorer extends Component {
         }
         const { isSelectAllChecked } = this.state;
         const newSelectedItems = isSelectAllChecked ? this.unselectAll() : this.selectAll();
+
         this.setState({ selectedItems: newSelectedItems, isSelectAllChecked: !isSelectAllChecked });
         if (onSelectedItemsUpdate) {
             onSelectedItemsUpdate(newSelectedItems);
@@ -453,6 +456,7 @@ class ContentExplorer extends Component {
         const {
             actionButtonsProps,
             additionalColumns,
+            controlledSelectedItems,
             isNoSelectionAllowed = false,
             breadcrumbProps,
             cancelButtonProps,
@@ -494,7 +498,9 @@ class ContentExplorer extends Component {
             searchInputProps,
             ...rest
         } = this.props;
-        const { isInSearchMode, foldersPath, selectedItems, isSelectAllChecked } = this.state;
+        const { isInSearchMode, foldersPath, isSelectAllChecked } = this.state;
+        const allSelectedItems = this.getAllSelectedItems();
+
         const isViewingSearchResults = isInSearchMode && foldersPath.length === 1;
         const currentFolder = this.getCurrentFolder();
         const contentExplorerProps = omit(rest, [
@@ -510,29 +516,27 @@ class ContentExplorer extends Component {
         const canIncludeSubfolders = !!includeSubfoldersProps;
         const hasSubheader = canIncludeSubfolders || isSelectAllAllowed;
 
-        const selectedItemsIds = Object.keys(selectedItems);
+        const selectedItemsIds = Object.keys(allSelectedItems);
         let areActionButtonsDisabled;
         // NOTE: it almost feels like this whole section should be inside the
         // ContentExplorerActionButtons instead. There's a lot of implicit knowledge
         // of what the action buttons are and what they should be doing.
+        const isFirstSelectedItemDisabled = allSelectedItems[selectedItemsIds[0]]?.isActionDisabled;
         if (contentExplorerMode === ContentExplorerModes.MULTI_SELECT) {
             // NOTE: only expecting to have 1 (choose) button so as long as something
             // is selected and that item's isActionDisabled is false, we enable the action button
             areActionButtonsDisabled =
                 (selectedItemsIds.length === 0 && !isNoSelectionAllowed) ||
-                (selectedItemsIds.length === 1 && selectedItems[selectedItemsIds[0]].isActionDisabled);
+                (selectedItemsIds.length === 1 && isFirstSelectedItemDisabled);
         } else if (isViewingSearchResults || contentExplorerMode === ContentExplorerModes.SELECT_FILE) {
             // Buttons are only enabled when an item is selected
             // When viewing search results, there is no "current folder"
             // When selecting a file, the file can only selected from the list
-            areActionButtonsDisabled =
-                selectedItemsIds.length === 0 || selectedItems[selectedItemsIds[0]].isActionDisabled;
+            areActionButtonsDisabled = selectedItemsIds.length === 0 || isFirstSelectedItemDisabled;
         } else {
             // Buttons are enabled using the selected item or the current folder if no item is selected
             areActionButtonsDisabled =
-                selectedItemsIds.length > 0
-                    ? selectedItems[selectedItemsIds[0]].isActionDisabled
-                    : currentFolder.isActionDisabled;
+                selectedItemsIds.length > 0 ? isFirstSelectedItemDisabled : currentFolder.isActionDisabled;
         }
 
         return (
@@ -599,7 +603,7 @@ class ContentExplorer extends Component {
                     onItemNameClick={this.handleItemNameClick}
                     onLoadMoreItems={onLoadMoreItems}
                     rowHeight={itemRowHeight}
-                    selectedItems={selectedItems}
+                    selectedItems={allSelectedItems}
                     width={listWidth}
                 />
                 <ContentExplorerActionButtons
@@ -623,7 +627,7 @@ class ContentExplorer extends Component {
                     onSelectedClick={onSelectedClick}
                     onMoveClick={onMoveItem}
                     onViewSelectedClick={onViewSelectedClick}
-                    selectedItems={selectedItems}
+                    selectedItems={allSelectedItems}
                     isNoSelectionAllowed={isNoSelectionAllowed}
                 />
             </div>

package/src/features/content-explorer/content-explorer/ContentExplorer.scss

@@ -162,6 +162,10 @@
     }
 }
 
+.bdl-ContentExplorerBreadcrumbs-crumbLink {
+    width: 100%;
+}
+
 .content-explorer .modal-actions .status-message {
     margin-right: auto;
 }

package/src/features/content-explorer/content-explorer/ContentExplorerBreadcrumbs.js

@@ -30,9 +30,11 @@ const ContentExplorerBreadcrumbs = ({
             <IconChevron direction="left" size="6px" color="#333" />
         </Button>
         <Breadcrumb label={formatMessage(messages.breadcrumb)} {...breadcrumbProps}>
+            {/* The outer div for each crumb prevents styling conflicts when the crumbs menu is active */}
             {foldersPath.map((folder, i) => (
                 <div key={folder.id} className="lnk">
                     <PlainButton
+                        className="bdl-ContentExplorerBreadcrumbs-crumbLink"
                         data-testid="breadcrumb-lnk"
                         onClick={event => onBreadcrumbClick(i, event)}
                         title={folder.name}

package/src/features/content-explorer/content-explorer/__tests__/ContentExplorer.test.js

@@ -268,6 +268,16 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
 
             expect(wrapper.find('ContentExplorerActionButtons').prop('areButtonsDisabled')).toBe(false);
         });
+
+        test('should render all items from both selectedItems state and controlledSelectedItems prop', () => {
+            const wrapper = renderComponent({
+                controlledSelectedItems: { '2': { id: '2', name: 'item2' } },
+            });
+            const selectedItems = { '1': { id: '1', name: 'item1' } };
+            wrapper.setState({ selectedItems });
+            expect(Object.keys(wrapper.find('ItemList').prop('selectedItems')).length).toBe(2);
+            expect(Object.keys(wrapper.find('ContentExplorerActionButtons').prop('selectedItems')).length).toBe(2);
+        });
     });
 
     describe('onEnterFolder', () => {
@@ -787,4 +797,23 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
             expect(instance.unselectAll).toHaveBeenCalledTimes(0);
         });
     });
+
+    describe('handleItemClick()', () => {
+        test('should update selectedItems state correctly with controlledSelectedItems when new item is clicked', () => {
+            const items = [
+                { id: 'item1', name: 'name1' },
+                { id: 'item2', name: 'name2' },
+            ];
+            const controlledSelectedItems = { item1: { id: 'item1', name: 'name1' } };
+            const mockEvent = { stopPropagation: () => {} };
+
+            const wrapper = renderComponent({
+                items,
+                controlledSelectedItems,
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+            });
+            wrapper.instance().handleItemClick({ event: mockEvent, index: 1 });
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(2);
+        });
+    });
 });

package/src/features/content-explorer/content-explorer/__tests__/__snapshots__/ContentExplorer.test.js.snap

@@ -10,8 +10,8 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
     contentExplorerMode="selectFile"
     customInput={[Function]}
     foldersPath={
-      Array [
-        Object {
+      [
+        {
           "id": "0",
           "name": "folder",
         },
@@ -22,13 +22,13 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
     onExitSearch={[Function]}
     onFoldersPathUpdated={[Function]}
     onSearchSubmit={[Function]}
-    searchInputProps={Object {}}
+    searchInputProps={{}}
   />
   <ItemList
     contentExplorerMode="selectFile"
     height={500}
     isResponsive={false}
-    items={Array []}
+    items={[]}
     noItemsRenderer={[Function]}
     numItemsPerPage={100}
     numTotalItems={100}
@@ -36,18 +36,18 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
     onItemDoubleClick={[Function]}
     onItemNameClick={[Function]}
     onLoadMoreItems={[Function]}
-    selectedItems={Object {}}
+    selectedItems={{}}
     width={500}
   />
   <ContentExplorerActionButtons
-    actionButtonsProps={Object {}}
+    actionButtonsProps={{}}
     areButtonsDisabled={true}
     canIncludeSubfolders={false}
-    cancelButtonProps={Object {}}
-    chooseButtonProps={Object {}}
+    cancelButtonProps={{}}
+    chooseButtonProps={{}}
     contentExplorerMode="selectFile"
     currentFolder={
-      Object {
+      {
         "id": "0",
         "name": "folder",
       }
@@ -55,7 +55,7 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
     isNoSelectionAllowed={false}
     isResponsive={false}
     onFoldersPathUpdated={[Function]}
-    selectedItems={Object {}}
+    selectedItems={{}}
   />
 </div>
 `;

package/src/features/content-explorer/content-explorer/__tests__/__snapshots__/ContentExplorerHeaderActions.test.js.snap

@@ -15,7 +15,7 @@ exports[`features/content-explorer/content-explorer/ContentExplorerHeaderActions
     />
   </div>
   <ContentExplorerBreadcrumbs
-    foldersPath={Array []}
+    foldersPath={[]}
     isUpButtonDisabled={true}
     onBreadcrumbClick={[Function]}
     onUpButtonClick={[Function]}

package/src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js

@@ -14,6 +14,7 @@ type Props = {
     additionalColumns?: Array<React.ComponentType<Column>>,
     breadcrumbProps?: BreadcrumbProps,
     className?: string,
+    controlledSelectedItems?: Object,
     customInput?: React.ComponentType<any>,
     description?: string,
     hasFolderTreeBreadcrumbs: boolean,

package/src/features/content-explorer/content-explorer-modal/__tests__/__snapshots__/ContentExplorerModal.test.js.snap

@@ -5,25 +5,25 @@ exports[`features/content-explorer/content-explorer-modal/ContentExplorerModal r
   className="content-explorer-modal"
   isOpen={true}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title=""
 >
   <ContentExplorer
-    actionButtonsProps={Object {}}
-    breadcrumbProps={Object {}}
-    cancelButtonProps={Object {}}
-    chooseButtonProps={Object {}}
+    actionButtonsProps={{}}
+    breadcrumbProps={{}}
+    cancelButtonProps={{}}
+    chooseButtonProps={{}}
     className=""
     contentExplorerMode="selectFile"
     customInput={[Function]}
     formatMessage={[Function]}
-    initialFoldersPath={Array []}
+    initialFoldersPath={[]}
     isResponsive={false}
-    items={Array []}
+    items={[]}
     listHeight={285}
     listWidth={560}
     numItemsPerPage={100}
@@ -32,7 +32,7 @@ exports[`features/content-explorer/content-explorer-modal/ContentExplorerModal r
     onExitSearch={[Function]}
     onLoadMoreItems={[Function]}
     onSearchSubmit={[Function]}
-    searchInputProps={Object {}}
+    searchInputProps={{}}
   />
 </Modal>
 `;

package/src/features/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js

@@ -70,6 +70,8 @@ class ContentExplorerModalContainer extends Component {
         initialFoldersPath: FoldersPathPropType.isRequired,
         /** Initial items that will show up as selected */
         initialSelectedItems: PropTypes.object,
+        /** Items that will show up as selected */
+        controlledSelectedItems: PropTypes.object,
         /**
          * Called when the current folder changes
          *

package/src/features/content-explorer/item-list/__tests__/__snapshots__/ItemListIcon.test.js.snap

@@ -3,7 +3,7 @@
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 1`] = `
 <IconCell
   rowData={
-    Object {
+    {
       "extension": undefined,
       "has_collaborations": false,
       "is_externally_owned": false,
@@ -16,7 +16,7 @@ exports[`features/content-explorer/item-list/ItemListIcon render() should render
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 2`] = `
 <IconCell
   rowData={
-    Object {
+    {
       "extension": undefined,
       "has_collaborations": true,
       "is_externally_owned": false,
@@ -29,7 +29,7 @@ exports[`features/content-explorer/item-list/ItemListIcon render() should render
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 3`] = `
 <IconCell
   rowData={
-    Object {
+    {
       "extension": undefined,
       "has_collaborations": true,
       "is_externally_owned": true,
@@ -42,7 +42,7 @@ exports[`features/content-explorer/item-list/ItemListIcon render() should render
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 4`] = `
 <IconCell
   rowData={
-    Object {
+    {
       "extension": undefined,
       "has_collaborations": false,
       "is_externally_owned": true,

package/src/features/header-flyout/__tests__/__snapshots__/HeaderFlyout.test.js.snap

@@ -15,7 +15,7 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   onOpen={[Function]}
   openOnHover={false}
   openOnHoverDelayTimeout={300}
-  portaledClasses={Array []}
+  portaledClasses={[]}
   position="bottom-left"
 >
   <Overlay
@@ -72,7 +72,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   onOpen={[Function]}
   openOnHover={false}
   openOnHoverDelayTimeout={300}
-  portaledClasses={Array []}
+  portaledClasses={[]}
   position="bottom-left"
 >
   <Overlay
@@ -112,7 +112,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   offset="-4px 0px"
   openOnHover={false}
   openOnHoverDelayTimeout={300}
-  portaledClasses={Array []}
+  portaledClasses={[]}
   position="bottom-left"
 >
   <button

package/src/features/invite-collaborators-modal/__tests__/__snapshots__/InviteCollaboratorsModal.test.js.snap

@@ -4,7 +4,7 @@ exports[`features/invite-collaborators-modal/InviteCollaboratorsModal render() s
 <Modal
   className="invite-collaborators-modal"
   closeButtonProps={
-    Object {
+    {
       "data-resin-target": "close",
     }
   }
@@ -12,9 +12,9 @@ exports[`features/invite-collaborators-modal/InviteCollaboratorsModal render() s
   data-resin-feature="invitecollaborators"
   onRequestClose={[Function]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={
@@ -22,7 +22,7 @@ exports[`features/invite-collaborators-modal/InviteCollaboratorsModal render() s
       defaultMessage="Invite to {itemName}"
       id="boxui.share.inviteCollaboratorsModalTitle"
       values={
-        Object {
+        {
           "itemName": "My Example File",
         }
       }
@@ -34,7 +34,7 @@ exports[`features/invite-collaborators-modal/InviteCollaboratorsModal render() s
     allowInvalidPills={false}
     disabled={false}
     error=""
-    inputProps={Object {}}
+    inputProps={{}}
     label={
       <FormattedMessage
         defaultMessage="Invite"
@@ -48,8 +48,8 @@ exports[`features/invite-collaborators-modal/InviteCollaboratorsModal render() s
     onSelect={[Function]}
     parseItems={[Function]}
     placeholder=""
-    selectedOptions={Array []}
-    selectorOptions={Array []}
+    selectedOptions={[]}
+    selectorOptions={[]}
     shouldClearUnmatchedInput={false}
     shouldSetActiveItemOnOpen={false}
     validateForError={[Function]}