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

package/src/components/Select/MultiSelect.tsx

@@ -1,217 +1,346 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useCheckboxGroupControls } from '../../utils/checkbox'
-import { applyCSSVariable } from '../../utils/css'
-import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
-import { withRef } from '../../utils/react'
-import { Checkbox } from '../Checkbox'
-import { CheckboxGroup } from '../CheckboxGroup'
-import { CitricComponent } from '../CitricComponent'
-import { Input } from '../Input'
-import { Row } from '../layout'
-import { ProgressCircular } from '../ProgressCircular'
-import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
-import { RichSelectProps } from './types'
-
-export interface BaseMultiSelectProps<T> extends
-  Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
-  value: T[],
-  onChange: (value: T[]) => void,
-  /**
-   * A function to render the option in the selectable list.
-   * 
-   * The `renderLabel` function is used if this is not provided.
-   * @param value the option.
-   * @returns the React Node.
-   */
-  renderOption?: (option: T) => React.ReactNode,
-  /**
-   * A function to render the selected options in the header.
-   * 
-   * The `renderOption` function is used if this is not provided.
-   * @param value the option.
-   * @returns the React Node.
-   */
-  renderHeader?: (value: T[]) => React.ReactNode,
-  /**
-   * A function to render the item label.
-   * @example
-   * `(option) => option.name`
-   * @default "the item's toString() result."
-   * @param option the item to render.
-   * @returns a React Node to render.
-   */
-  renderLabel?: (option: T) => string,
-  /**
-   * Whether or not to show a checkbox to select all or remove the selection.
-   * 
-   * @default false
-   */
-  showSelectAll?: boolean,
-}
-
-export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> &
-  BaseMultiSelectProps<T>
-
-/**
- * A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
- * in a list.
- * 
- * Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
- * checkboxes.
- * 
- * @example
- * 
- * ```
- * const options = useMemo(() => [
- *   { id: 1, name: 'Option 1' },
- *   { id: 2, name: 'Option 2' },
- *   { id: 3, name: 'Option 3' },
- * ], [])
- * 
- * const [value, setValue] = useState<typeof options>([])
- * 
- * return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
- * ```
- */
-export const MultiSelect = withRef(
-  function MultiSelect<T>({
-    ref,
-    options,
-    value = [],
-    onChange,
-    renderLabel = defaultRenderLabel,
-    renderKey = defaultRenderKey,
-    disabled,
-    loading,
-    renderOption,
-    renderHeader,
-    searchable,
-    maxHeight,
-    style,
-    className,
-    showArrow,
-    placeholder,
-    showSelectAll,
-    ...props
-  }: MultiSelectProps<T>,
-  ) {
-    const t = useTranslate(dictionary)
-    const _element = useRef<HTMLDivElement | null>(null)
-    const element = ref ?? _element
-    const [open, setOpen] = useState(false)
-    const [focused, setFocused] = useState(false)
-    const controls = useCheckboxGroupControls({
-      options,
-      renderKey,
-      initialValue: value,
-      onChange,
-      applyFilter: (filter, option) => renderLabel(option).toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
-    })
-
-    useOpenPanelEffect({ open, setOpen, setSearch: controls.setFilter, element, searchable })
-    useFocusEffect({ element, focused, setFocused, setOpen })
-    useDisabledEffect({ disabled, setOpen, setFocused })
-
-    useEffect(() => {
-      if (value !== controls.value) controls.setValue(value)
-    }, [value.map(renderKey).join(',')])
-
-    const header = useMemo(() => {
-      if (value.length === 0) return <span className="placeholder header-text">{placeholder}</span>
-      const reversed = [...value].reverse()
-      return (
-        (renderHeader?.(reversed)
-          ?? (renderOption
-            ? <Row className="header-text">{reversed.map(renderOption)}</Row>
-            : <span className="header-text">{reversed.map(renderLabel).join(', ')}</span>
-          )
-        ) || <span></span>
-      )}, [value, placeholder])
-
-    return (
-      <CitricComponent
-        tag="div"
-        component="multi-select"
-        style={maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style}
-        className={listToClass([
-          className,
-          showArrow === false && 'hide-arrow',
-          open && 'open',
-          focused && 'focused',
-          disabled && 'disabled',
-        ])}
-        ref={element}
-        aria-busy={loading}
-        {...props}
-      >
-        <header
-          onClick={() => {
-            if (disabled) return
-            setFocused(true)
-            setOpen(true)
-          }}
-          onFocus={() => setFocused(true)}
-          aria-label={t.accessibilityHelp}
-          tabIndex={disabled ? undefined : 0}
-          className={renderHeader ? 'custom' : undefined}
-        >
-          {header}
-          {loading && <ProgressCircular size="xs" className="loader" />}
-        </header>
-        <div className="selection-panel" aria-hidden={!open} {...(open ? {} : { inert: 'true' })}>
-          {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} />
-            </div>
-          </div>}
-          {showSelectAll && (
-            <Checkbox
-              className="select-all"
-              onChange={checked => checked ? controls.selectAll() : controls.removeSelection()}
-              value={controls.isAllSelected}
-            >
-              {controls.isAllSelected ? t.removeSelection : t.selectAll}
-            </Checkbox>
-          )}
-          <CheckboxGroup
-            className="options"
-            gap="0"
-            options={controls.options}
-            onChange={controls.setValue}
-            value={controls.value}
-            renderKey={controls.renderKey}
-            focusable={false}
-            renderItem={(checkbox, option) => (
-              <CitricComponent
-                component="checkbox-row"
-                tag="label"
-                className={listToClass(['option', controls.isUnfilteredButChecked(option) && 'unfiltered'])}
-              >
-                {checkbox}
-                {renderOption?.(option) ?? renderLabel(option)}
-              </CitricComponent>
-            )}
-          />
-        </div>
-      </CitricComponent>
-    )
-  },
-)
-
-const dictionary = {
-  en: {
-    accessibilityHelp: 'Press the arrow down to select multiple options',
-    searchAccessibility: 'Filter the options',
-    removeSelection: 'Remove selection',
-    selectAll: 'Select all',
-  },
-  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',
-  },
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCheckboxGroupControls } from '../../utils/checkbox'
+import { applyCSSVariable } from '../../utils/css'
+import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
+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'
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
+import { RichSelectProps } from './types'
+
+export interface BaseMultiSelectProps<T> extends
+  Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
+  value: T[],
+  onChange: (value: T[]) => void,
+  /**
+   * A function to render the option in the selectable list.
+   * 
+   * The `renderLabel` function is used if this is not provided.
+   * @param value the option.
+   * @returns the React Node.
+   */
+  renderOption?: (option: T) => React.ReactNode,
+  /**
+   * A function to render the selected options in the header.
+   * 
+   * The `renderOption` function is used if this is not provided.
+   * @param value the option.
+   * @returns the React Node.
+   */
+  renderHeader?: (value: T[]) => React.ReactNode,
+  /**
+   * A function to render the item label.
+   * @example
+   * `(option) => option.name`
+   * @default "the item's toString() result."
+   * @param option the item to render.
+   * @returns a React Node to render.
+   */
+  renderLabel?: (option: T) => string,
+  /**
+   * Whether or not to show a checkbox to select all or remove the selection.
+   * 
+   * @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'> &
+  BaseMultiSelectProps<T>
+
+/**
+ * A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
+ * in a list.
+ * 
+ * Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
+ * checkboxes.
+ * 
+ * @example
+ * 
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ * 
+ * const [value, setValue] = useState<typeof options>([])
+ * 
+ * return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export const MultiSelect = withRef(
+  function MultiSelect<T>({
+    ref,
+    options,
+    value = [],
+    onChange,
+    renderLabel = defaultRenderLabel,
+    renderKey = defaultRenderKey,
+    disabled,
+    loading,
+    renderOption,
+    renderHeader,
+    searchable,
+    maxHeight,
+    style,
+    className,
+    showArrow,
+    placeholder,
+    showSelectAll,
+    showAsChips = false,
+    allowCustomOptions = false,
+    createOption,
+    ...props
+  }: MultiSelectProps<T>,
+  ) {
+    const t = useTranslate(dictionary)
+    const _element = useRef<HTMLDivElement | null>(null)
+    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: mergedOptions,
+      renderKey,
+      initialValue: value,
+      onChange,
+      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 })
+    useFocusEffect({ element, focused, setFocused, setOpen })
+    useDisabledEffect({ disabled, setOpen, setFocused })
+
+    useEffect(() => {
+      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
+            ? <Row className="header-text">{reversed.map(renderOption)}</Row>
+            : <span className="header-text">{reversed.map(renderLabel).join(', ')}</span>
+          )
+        ) || <span></span>
+      )}, [value, placeholder, showAsChips, disabled])
+
+    return (
+      <CitricComponent
+        tag="div"
+        component="multi-select"
+        style={maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style}
+        className={listToClass([
+          className,
+          showArrow === false && 'hide-arrow',
+          open && 'open',
+          focused && 'focused',
+          disabled && 'disabled',
+          showAsChips && 'with-chips',
+        ])}
+        ref={element}
+        aria-busy={loading}
+        {...props}
+      >
+        <header
+          onClick={() => {
+            if (disabled) return
+            setFocused(true)
+            setOpen(true)
+          }}
+          onFocus={() => setFocused(true)}
+          aria-label={t.accessibilityHelp}
+          tabIndex={disabled ? undefined : 0}
+          className={renderHeader ? 'custom' : undefined}
+        >
+          {header}
+          {loading && <ProgressCircular size="xs" className="loader" />}
+        </header>
+        <div className="selection-panel" aria-hidden={!open} {...(open ? {} : { inert: 'true' })}>
+          {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} 
+                onKeyDown={handleAddCustomValue}
+                aria-label={t.searchAccessibility}
+                placeholder={allowCustomOptions ? t.searchOrAddPlaceholder : undefined}
+              />
+            </div>
+          </div>}
+          {showSelectAll && (
+            <Checkbox
+              className="select-all"
+              onChange={checked => checked ? controls.selectAll() : controls.removeSelection()}
+              value={controls.isAllSelected}
+            >
+              {controls.isAllSelected ? t.removeSelection : t.selectAll}
+            </Checkbox>
+          )}
+          <CheckboxGroup
+            className="options"
+            gap="0"
+            options={controls.options}
+            onChange={controls.setValue}
+            value={controls.value}
+            renderKey={controls.renderKey}
+            focusable={false}
+            renderItem={(checkbox, option) => (
+              <CitricComponent
+                component="checkbox-row"
+                tag="label"
+                className={listToClass(['option', controls.isUnfilteredButChecked(option) && 'unfiltered'])}
+              >
+                {checkbox}
+                {renderOption?.(option) ?? renderLabel(option)}
+              </CitricComponent>
+            )}
+          />
+          {hasTemporaryOption && (
+            <div className="temporary-option" style={{ fontStyle: 'italic', padding: '8px 16px', opacity: 0.7 }}>
+              {String(controls.filter).trim()} ({t.pressEnterToAdd})
+            </div>
+          )}
+        </div>
+      </CitricComponent>
+    )
+  },
+)
+
+const dictionary = {
+  en: {
+    accessibilityHelp: 'Press the arrow down to select multiple options',
+    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',
+  },
+}