From ba1bfb9e367e79adfd989b0879940501446cd333 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 21 Aug 2023 17:27:44 -0700
Subject: [PATCH] Update MentionTableField to use MentionTypeahead

---
 components/common/MentionTableField/index.tsx | 19 ++++++++++++-------
 .../common/TableField/index.module.scss       |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/common/MentionTableField/index.tsx b/components/common/MentionTableField/index.tsx
index 23527574..41463780 100644
--- a/components/common/MentionTableField/index.tsx
+++ b/components/common/MentionTableField/index.tsx
@@ -1,8 +1,5 @@
-import { useEffect, useState } from 'react'
-import MentionEditor from '~components/common/MentionEditor'
 import TableField from '~components/common/TableField'
-
-import styles from './index.module.scss'
+import MentionTypeahead from '../MentionTypeahead'
 
 interface Props
   extends React.DetailedHTMLProps<
@@ -12,25 +9,33 @@ interface Props
   label: string
   description?: string
   placeholder?: string
-  onUpdate: (content: string[]) => void
+  inclusions: MentionItem[]
+  exclusions: MentionItem[]
+  onUpdate: (content: MentionItem[]) => void
 }
 
 const MentionTableField = ({
   label,
   description,
   placeholder,
+  inclusions,
+  exclusions,
   ...props
 }: Props) => {
   return (
     <TableField
       {...props}
       name={props.name || ''}
+      description={description}
       className="mention"
       label={label}
     >
-      <MentionEditor
-        bound={true}
+      <MentionTypeahead
+        label={label}
+        description={description}
         placeholder={placeholder}
+        inclusions={inclusions}
+        exclusions={exclusions}
         onUpdate={props.onUpdate}
       />
     </TableField>
diff --git a/components/common/TableField/index.module.scss b/components/common/TableField/index.module.scss
index 14894dd8..8945c3cd 100644
--- a/components/common/TableField/index.module.scss
+++ b/components/common/TableField/index.module.scss
@@ -45,7 +45,7 @@
   }
 
   &.mention {
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 1fr 1fr;
   }
 
   .left {