@stack-spot/citric-react 0.37.0 → 0.37.1-beta.1

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.37.0",
+  "version": "0.37.1-beta.1",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
-    "./package.json": "./package.json",
     "./theme.css": "./dist/theme.css",
     "./citric.css": "./dist/citric.css"
   },

package/src/components/Select/MultiSelect.tsx

@@ -8,6 +8,7 @@ import { withRef } from '../../utils/react'
 import { Checkbox } from '../Checkbox'
 import { CheckboxGroup } from '../CheckboxGroup'
 import { CitricComponent } from '../CitricComponent'
+import { IconButton } from '../IconBox'
 import { Input } from '../Input'
 import { Row } from '../layout'
 import { ProgressCircular } from '../ProgressCircular'
@@ -49,6 +50,28 @@ export interface BaseMultiSelectProps<T> extends
    * @default false
    */
   showSelectAll?: boolean,
+  /**
+   * Whether to render selected values as removable chips/tags.
+   * 
+   * @default false
+   */
+  showAsChips?: boolean,
+  /**
+   * Whether to allow adding custom values that don't exist in options.
+   * When enabled, typing in the search and pressing Enter will add the value.
+   * The value will be added as a string to the list.
+   * 
+   * @default false
+   */
+  allowCustomOptions?: boolean,
+  /**
+   * Function to create a new option from a string input.
+   * Required when `allowCustomOptions` is true.
+   * 
+   * @param input the string input from the user
+   * @returns the new option of type T
+   */
+  createOption?: (inputValue: string) => T,
 }
 
 export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> &
@@ -94,6 +117,9 @@ export const MultiSelect = withRef(
     showArrow,
     placeholder,
     showSelectAll,
+    showAsChips = false,
+    allowCustomOptions = false,
+    createOption,
     ...props
   }: MultiSelectProps<T>,
   ) {
@@ -102,12 +128,24 @@ export const MultiSelect = withRef(
     const element = ref ?? _element
     const [open, setOpen] = useState(false)
     const [focused, setFocused] = useState(false)
+
+    // Merge options with selected values that are not in the original options
+    const mergedOptions = useMemo(() => {
+      const optionKeys = new Set(options.map(renderKey))
+      const extraValues = value.filter(v => !optionKeys.has(renderKey(v)))
+      return [...options, ...extraValues]
+    }, [options, value, renderKey])
+
     const controls = useCheckboxGroupControls({
-      options,
+      options: mergedOptions,
       renderKey,
       initialValue: value,
       onChange,
-      applyFilter: (filter, option) => renderLabel(option).toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+      applyFilter: (filter, option) => {
+        const label = renderLabel(option)
+        if (!label) return false
+        return label.toLocaleLowerCase().includes(filter.toLocaleLowerCase())
+      },
     })
 
     useOpenPanelEffect({ open, setOpen, setSearch: controls.setFilter, element, searchable })
@@ -118,9 +156,81 @@ export const MultiSelect = withRef(
       if (value !== controls.value) controls.setValue(value)
     }, [value.map(renderKey).join(',')])
 
+    const handleRemoveChip = (option: T) => {
+      const newValue = value.filter(v => renderKey(v) !== renderKey(option))
+      controls.setValue(newValue)
+    }
+
+    const handleAddCustomValue = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!allowCustomOptions || !createOption || !controls.filter) return
+      const filterValue = String(controls.filter).trim()
+      if (e.key === 'Enter' && filterValue && filterValue.length > 0) {
+        e.preventDefault()
+        const newOption = createOption(filterValue)
+        const exists = value.some(v => {
+          const key1 = renderKey(v)
+          const key2 = renderKey(newOption)
+          if (typeof key1 === 'string' && typeof key2 === 'string') {
+            return key1.toLowerCase() === key2.toLowerCase()
+          }
+          return key1 === key2
+        })
+        if (!exists) {
+          controls.setValue([...value, newOption])
+        }
+        controls.setFilter('' as any)
+      }
+    }
+
+    // Check if the current filter does not match any existing option
+    const hasTemporaryOption = useMemo(() => {
+      if (!allowCustomOptions || !controls.filter) return false
+      const filterValue = String(controls.filter).trim()
+      if (!filterValue || filterValue.length === 0) return false
+      
+      const matchesExisting = mergedOptions.some(option => {
+        const label = renderLabel(option)
+        if (!label) return false
+        return label.toLowerCase() === filterValue.toLowerCase()
+      })
+      
+      return !matchesExisting
+    }, [allowCustomOptions, controls.filter, mergedOptions, renderLabel])
+
     const header = useMemo(() => {
       if (value.length === 0) return <span className="placeholder header-text">{placeholder}</span>
       const reversed = [...value].reverse()
+      
+      if (showAsChips) {
+        return (
+          <Row className="header-chips" gap="4px">
+            {reversed.map(option => (
+              <span
+                key={renderKey(option)}
+                data-citric="badge"
+                className="chip"
+              >
+                <span>{renderLabel(option)}</span>
+                {!disabled && (
+                  <IconButton
+                    icon="Times"
+                    type="button"
+                    className="remove-button"
+                    size="xs"
+                    disabled={disabled}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleRemoveChip(option)
+                    }}
+                    aria-label={`${t.remove} ${renderLabel(option)}`}
+                  />
+                )}
+              </span>
+            ))}
+          </Row>
+        )
+      }
+
       return (
         (renderHeader?.(reversed)
           ?? (renderOption
@@ -128,7 +238,7 @@ export const MultiSelect = withRef(
             : <span className="header-text">{reversed.map(renderLabel).join(', ')}</span>
           )
         ) || <span></span>
-      )}, [value, placeholder])
+      )}, [value, placeholder, showAsChips, disabled])
 
     return (
       <CitricComponent
@@ -141,6 +251,7 @@ export const MultiSelect = withRef(
           open && 'open',
           focused && 'focused',
           disabled && 'disabled',
+          showAsChips && 'with-chips',
         ])}
         ref={element}
         aria-busy={loading}
@@ -164,7 +275,14 @@ export const MultiSelect = withRef(
           {searchable && <div className="search-bar">
             <div data-citric="field-group" className="auto">
               <i data-citric="icon-box" className="citric-icon outline Search"></i>
-              <Input type="search" value={controls.filter} onChange={controls.setFilter} aria-label={t.searchAccessibility} />
+              <Input 
+                type="search" 
+                value={controls.filter} 
+                onChange={controls.setFilter} 
+                onKeyDown={handleAddCustomValue}
+                aria-label={t.searchAccessibility}
+                placeholder={allowCustomOptions ? t.searchOrAddPlaceholder : undefined}
+              />
             </div>
           </div>}
           {showSelectAll && (
@@ -195,6 +313,11 @@ export const MultiSelect = withRef(
               </CitricComponent>
             )}
           />
+          {hasTemporaryOption && (
+            <div className="temporary-option" style={{ fontStyle: 'italic', padding: '8px 16px', opacity: 0.7 }}>
+              {String(controls.filter).trim()} ({t.pressEnterToAdd})
+            </div>
+          )}
         </div>
       </CitricComponent>
     )
@@ -207,11 +330,17 @@ const dictionary = {
     searchAccessibility: 'Filter the options',
     removeSelection: 'Remove selection',
     selectAll: 'Select all',
+    remove: 'Remove',
+    searchOrAddPlaceholder: 'Search or press Enter to add',
+    pressEnterToAdd: 'press Enter to add',
   },
   pt: {
     accessibilityHelp: 'Pressione a seta para baixo para selecionar múltiplas opções',
     searchAccessibility: 'Filtre as opções',
     removeSelection: 'Remover seleção',
     selectAll: 'Selecionar todos',
+    remove: 'Remover',
+    searchOrAddPlaceholder: 'Busque ou pressione Enter para adicionar',
+    pressEnterToAdd: 'pressione Enter para adicionar',
   },
 }