From 79238a8a4168107e64df4b67e92eec6069bffef3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=AA=20Boaventura?= <reneboaventuraneto@gmail.com>
Date: Mon, 22 Apr 2024 16:26:56 -0300
Subject: [PATCH] fix: Fix tag multi select (#585)

---
 src/components/TagMultiSelect.tsx      | 35 ++++++++++++++++++--------
 src/index.ts                           |  1 +
 src/stories/ComboBox.stories.tsx       |  3 +++
 src/stories/TagMultiselectTemplate.tsx |  3 +++
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/TagMultiSelect.tsx b/src/components/TagMultiSelect.tsx
index 627ce4f1..64116807 100644
--- a/src/components/TagMultiSelect.tsx
+++ b/src/components/TagMultiSelect.tsx
@@ -21,25 +21,33 @@ export type MultiSelectTag = {
 const matchOptions = [
   { label: 'All', value: 'AND' },
   { label: 'Any', value: 'OR' },
-]
+] as const
 
-export function TagMultiSelect({
-  options,
-  loading,
-  onSelectedTagsChange,
-  onFilterChange,
-}: {
+type TagMultiSelectProps = {
   options: string[]
   loading: boolean
+  selectedMatchType?: 'AND' | 'OR'
   onSelectedTagsChange?: (keys: Set<Key>) => void
   onFilterChange?: (value: string) => void
-}) {
+  onChangeMatchType?: (value: 'AND' | 'OR') => void
+}
+
+function TagMultiSelect({
+  options,
+  loading,
+  selectedMatchType,
+  onSelectedTagsChange,
+  onFilterChange,
+  onChangeMatchType,
+}: TagMultiSelectProps) {
   const theme = useTheme()
   const [selectedTagKeys, setSelectedTagKeys] = useState(new Set<Key>())
   const selectedTagArr = useMemo(() => [...selectedTagKeys], [selectedTagKeys])
   const [inputValue, setInputValue] = useState('')
   const [isOpen, setIsOpen] = useState(false)
-  const [searchLogic, setSearchLogic] = useState<string>(matchOptions[0].value)
+  const [searchLogic, setSearchLogic] = useState<string>(
+    selectedMatchType || matchOptions[0].value
+  )
 
   const onSelectionChange: ComponentProps<
     typeof ComboBox
@@ -72,8 +80,9 @@ export function TagMultiSelect({
       <Select
         label="Pick search logic"
         selectedKey={searchLogic}
-        onSelectionChange={(key: string) => {
-          setSearchLogic(key)
+        onSelectionChange={(value: 'AND' | 'OR') => {
+          setSearchLogic(value)
+          onChangeMatchType?.(value)
         }}
         defaultOpen={false}
         triggerButton={
@@ -128,6 +137,7 @@ export function TagMultiSelect({
         allowsEmptyCollection
         loading={loading}
         containerProps={{ style: { flexGrow: 1 } }}
+        showArrow={false}
       >
         {options
           .map((tagStr) => {
@@ -156,3 +166,6 @@ export function TagMultiSelect({
     </Flex>
   )
 }
+
+export type { TagMultiSelectProps }
+export { TagMultiSelect }
diff --git a/src/index.ts b/src/index.ts
index e1731c2a..0f670d7a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -103,6 +103,7 @@ export type {
 export { default as LoadingSpinner } from './components/LoadingSpinner'
 export { default as LoopingLogo } from './components/LoopingLogo'
 export { ComboBox } from './components/ComboBox'
+export type { TagMultiSelectProps } from './components/TagMultiSelect'
 export { TagMultiSelect } from './components/TagMultiSelect'
 export { Toast, GraphQLToast } from './components/Toast'
 export { default as WrapWithIf } from './components/WrapWithIf'
diff --git a/src/stories/ComboBox.stories.tsx b/src/stories/ComboBox.stories.tsx
index c288ec02..d4a43a51 100644
--- a/src/stories/ComboBox.stories.tsx
+++ b/src/stories/ComboBox.stories.tsx
@@ -519,4 +519,7 @@ TagMultiSelect.args = {
   onFilterChange: (filter: string) => {
     console.log('Filter:', filter)
   },
+  onChangeMatchType: (matchType: 'AND' | 'OR') => {
+    console.log('Match type: ', matchType)
+  },
 }
diff --git a/src/stories/TagMultiselectTemplate.tsx b/src/stories/TagMultiselectTemplate.tsx
index 2ca7220e..d9a41203 100644
--- a/src/stories/TagMultiselectTemplate.tsx
+++ b/src/stories/TagMultiselectTemplate.tsx
@@ -8,12 +8,14 @@ export default function TagMultiSelectTemplate({
   width,
   onSelectedTagsChange,
   onFilterChange,
+  onChangeMatchType,
 }: {
   loading: boolean
   options: string[]
   width: number
   onSelectedTagsChange?: (keys: Set<Key>) => void
   onFilterChange?: (value: string) => void
+  onChangeMatchType?: (value: 'AND' | 'OR') => void
 }) {
   return (
     <div style={{ width: `${width}%` }}>
@@ -22,6 +24,7 @@ export default function TagMultiSelectTemplate({
         options={options}
         onSelectedTagsChange={onSelectedTagsChange}
         onFilterChange={onFilterChange}
+        onChangeMatchType={onChangeMatchType}
       />
     </div>
   )