feat: add the option to create new items in recipients

frontend/src/email/EmailContactSelector/index.tsx

@@ -2,7 +2,7 @@ import { MenuItem, Tooltip } from '@blueprintjs/core'
 import type { ItemRenderer } from '@blueprintjs/select'
 import { MultiSelect } from '@blueprintjs/select'
 import type { EmailParticipant } from '@inject/graphql/fragments/EmailParticipant.generated'
-import type { Dispatch, FC, SetStateAction } from 'react'
+import type { Dispatch, FC, MouseEventHandler, SetStateAction } from 'react'
 import { memo, useCallback, useMemo } from 'react'
 import type { ExtendedItemRenderer } from '../typing'
 
@@ -67,6 +67,7 @@ const EmailContactSelector: FC<EmailContactSelectorProps> = ({
   )
   const onItemSelect = useCallback(
     (i: string) =>
+      // TODO: add validation
       setSelectedContacts(prev => {
         if (prev.includes(i)) {
           return prev.filter(x => x !== i)
@@ -80,6 +81,29 @@ const EmailContactSelector: FC<EmailContactSelectorProps> = ({
     [setSelectedContacts]
   )
 
+  const createNewItemFromQuery: (query: string) => string | string[] =
+    useCallback((query: string) => query, [])
+  const createNewItemRenderer: (
+    query: string,
+    active: boolean,
+    handleClick: MouseEventHandler<HTMLElement>
+  ) => undefined | JSX.Element = useCallback(
+    (
+      query: string,
+      active: boolean,
+      handleClick: MouseEventHandler<HTMLElement>
+    ) => (
+      <MenuItem
+        active={active}
+        onClick={handleClick}
+        roleStructure='listoption'
+        shouldDismissPopover={false}
+        text={query}
+      />
+    ),
+    []
+  )
+
   return (
     <MultiSelect<string>
       placeholder='Recipients'
@@ -98,6 +122,8 @@ const EmailContactSelector: FC<EmailContactSelectorProps> = ({
       popoverContentProps={{
         style: { maxHeight: '50vh', overflowY: 'auto', overflowX: 'hidden' },
       }}
+      createNewItemFromQuery={createNewItemFromQuery}
+      createNewItemRenderer={createNewItemRenderer}
     />
   )
 }