From 35f4474c1d01d03fb4f8682cc4dc659047fb1350 Mon Sep 17 00:00:00 2001
From: Alexandre Monjol <alexandre.monjol@gmail.com>
Date: Mon, 4 Mar 2024 10:43:18 +0100
Subject: [PATCH] misc(multiple-combobox): add free solo mode

---
 .../MultipleComboBox/MultipleComboBox.tsx     | 38 +++++++++--------
 .../MultipleComboBoxPopperFactory.tsx         |  9 +---
 src/components/form/MultipleComboBox/types.ts |  4 +-
 src/pages/__devOnly/DesignSystem.tsx          | 41 ++++++++++++++++++-
 4 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/src/components/form/MultipleComboBox/MultipleComboBox.tsx b/src/components/form/MultipleComboBox/MultipleComboBox.tsx
index 5f7ffe16f..55816a8db 100644
--- a/src/components/form/MultipleComboBox/MultipleComboBox.tsx
+++ b/src/components/form/MultipleComboBox/MultipleComboBox.tsx
@@ -31,6 +31,8 @@ export const MultipleComboBox = ({
   freeSolo,
   emptyText,
   disableClearable = false,
+  forcePopupIcon = false,
+  hideTags = false,
   renderGroupHeader,
   virtualized = true,
   limitTags,
@@ -55,13 +57,12 @@ export const MultipleComboBox = ({
     <Container>
       <Autocomplete
         multiple
-        forcePopupIcon
+        forcePopupIcon={forcePopupIcon}
         disableCloseOnSelect
         disableClearable={disableClearable}
         disabled={disabled}
         limitTags={limitTags || DEFAULT_LIMIT_TAGS}
         options={data}
-        sx={{ width: '100%' }}
         renderInput={(params) => (
           <TextInput
             {...params}
@@ -76,22 +77,26 @@ export const MultipleComboBox = ({
         )}
         onChange={(_, newValue) => {
           if (freeSolo) {
-            // On free solo mode, turn typed values into objects
-            onChange(
-              newValue.map((val) => {
-                if (typeof val === 'string') {
-                  val = { value: val }
-                }
-                return val
-              }),
-            )
+            // On free solo mode, turn string typed values into objects
+            const formated = newValue.map((val) => {
+              if (typeof val === 'string') {
+                val = { value: val }
+              }
+              return val
+            })
+
+            onChange(formated)
           } else {
             onChange(newValue)
           }
         }}
-        value={value || []}
-        renderTags={(tagValues, getTagProps) =>
-          tagValues.map((option, index) => {
+        value={value || undefined}
+        renderTags={(tagValues, getTagProps) => {
+          if (hideTags) {
+            return null
+          }
+
+          return tagValues.map((option, index) => {
             const tagOptions = getTagProps({ index })
 
             return (
@@ -105,7 +110,7 @@ export const MultipleComboBox = ({
               />
             )
           })
-        }
+        }}
         clearIcon={<Icon name="close-circle-filled" />}
         popupIcon={<Icon name="chevron-up-down" />}
         noOptionsText={emptyText ?? translate('text_623b3acb8ee4e000ba87d082')}
@@ -138,8 +143,9 @@ export const MultipleComboBox = ({
 
           if (inputValue !== '' && !isExisting && freeSolo) {
             filtered.push({
+              customValue: true,
               value: inputValue,
-              label: `Add "${inputValue}"`,
+              label: `TODO: Click or press enter to create "${inputValue}"`,
             })
           }
 
diff --git a/src/components/form/MultipleComboBox/MultipleComboBoxPopperFactory.tsx b/src/components/form/MultipleComboBox/MultipleComboBoxPopperFactory.tsx
index e7cb0f302..53fda4b2a 100644
--- a/src/components/form/MultipleComboBox/MultipleComboBoxPopperFactory.tsx
+++ b/src/components/form/MultipleComboBox/MultipleComboBoxPopperFactory.tsx
@@ -67,12 +67,7 @@ const StyledPopper = styled(Popper)<{
     max-width: ${({ $minWidth }) => ($minWidth ? `${$minWidth}px` : 'initial')};
   }
 
-  .MuiAutocomplete-paper {
-    border: 1px solid ${theme.palette.grey[200]};
-    padding: ${theme.spacing(2)} 0;
-  }
-
-  > *.multipleComboBox-popper--grouped .MuiAutocomplete-paper {
-    padding: ${theme.spacing(2)} 0;
+  .MuiAutocomplete-option {
+    margin: 0;
   }
 `
diff --git a/src/components/form/MultipleComboBox/types.ts b/src/components/form/MultipleComboBox/types.ts
index d18914941..655a189ae 100644
--- a/src/components/form/MultipleComboBox/types.ts
+++ b/src/components/form/MultipleComboBox/types.ts
@@ -26,8 +26,10 @@ interface BasicMultipleComboBoxProps
   disabled?: boolean
   freeSolo?: boolean
   value?: MultipleComboBoxData[]
-  data: BasicMultipleComboBoxData[]
+  data?: BasicMultipleComboBoxData[]
   sortValues?: boolean
+  forcePopupIcon?: boolean
+  hideTags?: boolean
   emptyText?: string
   virtualized?: boolean
   limitTags?: number
diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
index 8d33fd63b..9c260aa79 100644
--- a/src/pages/__devOnly/DesignSystem.tsx
+++ b/src/pages/__devOnly/DesignSystem.tsx
@@ -1,4 +1,4 @@
-import { InputAdornment } from '@mui/material'
+import { InputAdornment, Stack } from '@mui/material'
 import { useFormik } from 'formik'
 import { useRef } from 'react'
 import { generatePath } from 'react-router-dom'
@@ -39,7 +39,7 @@ import {
   TextInputField,
 } from '~/components/form'
 import { AmountInputField } from '~/components/form/AmountInput'
-import { MultipleComboBoxField } from '~/components/form/MultipleComboBox'
+import { MultipleComboBox, MultipleComboBoxField } from '~/components/form/MultipleComboBox'
 import { addToast, TToast } from '~/core/apolloClient'
 import { ONLY_DEV_DESIGN_SYSTEM_ROUTE, ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE } from '~/core/router'
 import { CurrencyEnum } from '~/generated/graphql'
@@ -102,6 +102,7 @@ const DesignSystem = () => {
       inputNumber: undefined,
       switch: true,
       combobox: undefined,
+      multipleCombobox: [],
       radio: false,
       buttonSelector: undefined,
       buttonSelector2: 'time',
@@ -1114,6 +1115,42 @@ const DesignSystem = () => {
                       placeholder="Placeholder"
                       formikProps={formikProps}
                     />
+                    <MultipleComboBoxField
+                      freeSolo
+                      name="multipleCombobox"
+                      label="Multiple Free Solo No Data"
+                      placeholder="Placeholder"
+                      formikProps={formikProps}
+                    />
+                    <Stack gap={1} direction="row" flexWrap="wrap">
+                      {formikProps.values.multipleCombobox.map(
+                        (value: { value: string }, index) => (
+                          <Chip
+                            key={index}
+                            label={value.value}
+                            onDelete={() => {
+                              const newValues = formikProps.values.multipleCombobox.filter(
+                                (v) => v !== value,
+                              )
+
+                              formikProps.setFieldValue('multipleCombobox', newValues)
+                            }}
+                          />
+                        ),
+                      )}
+                    </Stack>
+                    <MultipleComboBox
+                      freeSolo
+                      hideTags
+                      disableClearable
+                      data={[]}
+                      onChange={(newValue) =>
+                        formikProps.setFieldValue('multipleCombobox', newValue)
+                      }
+                      value={formikProps.values.multipleCombobox}
+                      label="Multiple Free Solo No Data No Tags"
+                      placeholder="Placeholder"
+                    />
                   </Block>
 
                   <GroupTitle variant="subhead">Radio</GroupTitle>