@stack-spot/citric-react 0.25.1 → 0.27.0

package/src/components/CitricComponent.ts

@@ -5,7 +5,7 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
   'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
   'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
   'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
-  'circle'
+  'circle' | 'multi-select'
 
 interface BaseCitricProps extends WithColorScheme, WithColorPalette {
   component: CitricComponentName,

package/src/components/RadioGroup.tsx

@@ -63,6 +63,18 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
    * @returns true if the item should be disabled, false otherwise.
    */
   isDisabled?: (option: T) => boolean,
+  /**
+   * The space between options.
+   * 
+   * @default "8px"
+   */
+  gap?: string,
+  /**
+   * If set to false, the checkboxes will have tabIndex = -1.
+   * 
+   * @default true
+   */
+  focusable?: boolean,
 }
 
 export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
@@ -101,6 +113,8 @@ export const RadioGroup = withRef(
     renderItem,
     isDisabled,
     colorScheme,
+    gap = '8px',
+    focusable = true,
     style,
     ...props
   }: RadioGroupProps<T>) {
@@ -117,6 +131,7 @@ export const RadioGroup = withRef(
           checked={value === o || (!isNil(key) && valueKey === key)}
           onChange={() => onChange?.(o)}
           disabled={isDisabled?.(o)}
+          tabIndex={focusable ? undefined : -1}
         />
         return renderItem ? renderItem(radio, o) : (
           <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
@@ -126,6 +141,6 @@ export const RadioGroup = withRef(
         )
       })
     }, [options, value, name, colorScheme])
-    return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
+    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
   },
 )

package/src/components/Select/MultiSelect.tsx

@@ -0,0 +1,207 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { 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'
+
+/**
+ * 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} />
+ * ```
+ */
+interface BaseMultiSelectProps<T> extends
+  Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
+  value: T[],
+  onChange: (value: T[]) => void,
+  onFocus: (event: React.FocusEvent<HTMLElement, Element>) => 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>
+
+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 })
+
+    const header = useMemo(() => {
+      if (value.length === 0) return <span className="placeholder">{placeholder}</span>
+      const reverse = value.reverse()
+      return (
+        (renderHeader?.(reverse)
+          ?? (renderOption ? <Row gap="4px">{reverse.map(renderOption)}</Row> : <span>{reverse.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'])}
+        ref={element}
+        aria-busy={loading}
+        {...props}
+      >
+        <header
+          onClick={(e) => {
+            if (disabled) return
+            if (!open) e.stopPropagation()
+            setFocused(true)
+            setOpen(true)
+          }}
+          onFocus={() => setFocused(true)}
+          aria-label={t.accessibilityHelp}
+          tabIndex={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',
+  },
+}

package/src/components/Select/RichSelect.tsx

@@ -1,12 +1,13 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { applyCSSVariable } from '../../utils/css'
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
 import { withRef } from '../../utils/react'
 import { CitricComponent } from '../CitricComponent'
 import { Input } from '../Input'
 import { ProgressCircular } from '../ProgressCircular'
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
 import { SimpleSelect } from './SimpleSelect'
 import { SelectProps } from './types'
 
@@ -30,10 +31,11 @@ export const RichSelect = withRef(
     onFocus,
     onBlur,
     showArrow,
+    placeholder,
     ...props
   }: SelectProps<T> & { type?: 'rich' },
   ) {
-    const [search, setSearch] = useState('')
+    const [search, setSearch] = useState<string | undefined>('')
     const _element = useRef<HTMLDivElement | null>(null)
     const element = ref ?? _element
     const [open, setOpen] = useState(false)
@@ -46,13 +48,15 @@ export const RichSelect = withRef(
     }, [])
 
     const renderedOptions = useMemo(() => {
-      const items = required ? [] : [<li key="" className="empty" onClick={change(undefined)}>{renderLabel(undefined) || t.empty}</li>]
+      const items = required
+        ? []
+        : [<li key="" className="empty option" onClick={change(undefined)}>{renderLabel(undefined) || t.empty}</li>]
       options.forEach((o) => {
         const key = renderKey(o)
         const label = renderLabel(o)
-        if (!search.trim() || label.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())) {
+        if (!search?.trim() || label.toLocaleLowerCase().includes(search?.trim().toLocaleLowerCase())) {
           items.push(
-            <li key={key} onClick={change(o)}>
+            <li key={key} onClick={change(o)} className="option">
               {renderOption?.(o) ?? label}
             </li>,
           )
@@ -61,108 +65,9 @@ export const RichSelect = withRef(
       return items
     }, [options, value, required, search])
 
-    /* this runs whenever the selection panel is opened */
-    useEffect(() => {
-      if (open) {
-        setSearch('')
-        const selectionPanel = element.current?.querySelector('.selection-panel') as HTMLElement | undefined
-        selectionPanel?.querySelector('ul')?.scrollTo({ top: 0 })
-        const getCurrent = () => selectionPanel?.querySelector('li.focused') as HTMLElement | undefined
-        const scrollTo = (li: HTMLElement) => {
-          const ul = li.closest('ul')
-          if (!ul) return
-          const { top: ulTop, height: ulHeight } = ul.getBoundingClientRect()
-          const { height: liHeight, top: liTop } = li.getBoundingClientRect()
-          const offset = liTop + ul.scrollTop - ulTop
-          if ((ul.scrollTop + ulHeight < offset + liHeight) || ul.scrollTop > offset) {
-            ul.scrollTo({ top: offset })
-          }
-        }
-        /* keyboard and mouse controls */
-        const listenToMouse = (event: Event) => {
-          if (!selectionPanel?.contains(event.target as HTMLElement)) {
-            setOpen(false)
-          }
-        }
-        const listenToKeyboard = (event: KeyboardEvent) => {
-          const isCharacter = event.key.length === 1
-          if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
-            (searchable && (isCharacter || event.key === 'Backspace'))) {
-            event.preventDefault()
-            event.stopPropagation()
-          }
-          if (event.key === 'Escape') setOpen(false)
-          if (searchable) {
-            if (isCharacter) setSearch(v => `${v}${event.key}`)
-            if (event.key === 'Backspace') setSearch(v => v.substring(0, v.length - 1))
-          }
-          if (event.key === 'ArrowDown') {
-            const current = getCurrent()
-            const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('li')) as HTMLAreaElement | undefined
-            if (next) {
-              current?.classList.remove('focused')
-              next.classList.add('focused')
-              scrollTo(next)
-            }
-          }
-          if (event.key === 'ArrowUp') {
-            const current = getCurrent()
-            const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('li:last-child')) as HTMLAreaElement | undefined
-            if (prev) {
-              current?.classList.remove('focused')
-              prev.classList.add('focused')
-              scrollTo(prev)
-            }
-          }
-          if (event.key === 'Enter') {
-            setTimeout(() => getCurrent()?.click(), 0)
-          }
-        }
-        // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
-        // labels.
-        setTimeout(() => document.addEventListener('click', listenToMouse), 20)
-        document.addEventListener('keydown', listenToKeyboard)
-        return () => {
-          document.removeEventListener('click', listenToMouse)
-          document.removeEventListener('keydown', listenToKeyboard)
-          getCurrent()?.classList.remove('focused')
-        }
-      }
-    }, [open])
-
-    /* this runs whenever the select is focused */
-    useEffect(() => {
-      if (focused) {
-        const listenToMouse = (event: MouseEvent) => {
-          if (!element.current?.contains(event.target as HTMLElement)) {
-            setFocused(false)
-          }
-        }
-        const listenToKeyboard = (event: KeyboardEvent) => {
-          if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
-            event.preventDefault()
-            if (!element.current?.classList.contains('open')) setOpen(true)
-          }
-          if (event.key === 'Tab') {
-            setFocused(false)
-            if (element.current?.classList.contains('open')) setOpen(false)
-          }
-        }
-        document.addEventListener('click', listenToMouse)
-        document.addEventListener('keydown', listenToKeyboard)
-        return () => {
-          document.removeEventListener('click', listenToMouse)
-          document.removeEventListener('keydown', listenToKeyboard)
-        }
-      }
-    }, [focused])
-
-    useEffect(() => {
-      if (disabled) {
-        setOpen(false)
-        setFocused(false)
-      }
-    }, [disabled])
+    useOpenPanelEffect({ open, setOpen, setSearch, element, searchable })
+    useFocusEffect({ element, focused, setFocused, setOpen })
+    useDisabledEffect({ disabled, setOpen, setFocused })
 
     return (
       <CitricComponent
@@ -195,7 +100,9 @@ export const RichSelect = withRef(
           }}
           aria-hidden
         >
-          {(renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || <span></span>}
+          {value === undefined
+            ? <span className="placeholder">{placeholder}</span>
+            : ((renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || <span></span>)}
           {loading && <ProgressCircular size="xs" className="loader" />}
         </header>
         <div className="selection-panel" aria-hidden>
@@ -205,7 +112,7 @@ export const RichSelect = withRef(
               <Input type="search" value={search} onChange={setSearch} tabIndex={-1} />
             </div>
           </div>}
-          <ul>{renderedOptions}</ul>
+          <ul className="options">{renderedOptions}</ul>
         </div>
       </CitricComponent>
     )

package/src/components/Select/hooks.ts

@@ -0,0 +1,133 @@
+import { useEffect } from 'react'
+
+interface OpenPanelEffectParams {
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  setSearch: React.Dispatch<React.SetStateAction<string | undefined>>,
+  element: React.MutableRefObject<HTMLDivElement | null>,
+  searchable?: boolean,
+}
+
+interface FocusEffectParams {
+  element: React.MutableRefObject<HTMLDivElement | null>,
+  focused: boolean,
+  setFocused: React.Dispatch<React.SetStateAction<boolean>>,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+}
+
+interface DisabledEffectParams {
+  disabled?: boolean,
+  setFocused: React.Dispatch<React.SetStateAction<boolean>>,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+}
+
+/* this runs whenever the selection panel is opened */
+export function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }: OpenPanelEffectParams) {
+  useEffect(() => {
+    if (open) {
+      setSearch('')
+      const selectionPanel = element.current?.querySelector('.selection-panel') as HTMLElement | undefined
+      selectionPanel?.querySelector('.options')?.scrollTo({ top: 0 })
+      const getCurrent = () => selectionPanel?.querySelector('.option.focused') as HTMLElement | undefined
+      const scrollTo = (item: HTMLElement) => {
+        const list = item.closest('.options')
+        if (!list) return
+        const { top: listTop, height: listHeight } = list.getBoundingClientRect()
+        const { height: itemHeight, top: itemTop } = item.getBoundingClientRect()
+        const offset = itemTop + list.scrollTop - listTop
+        if ((list.scrollTop + listHeight < offset + itemHeight) || list.scrollTop > offset) {
+          list.scrollTo({ top: offset })
+        }
+      }
+      /* keyboard and mouse controls */
+      const listenToMouse = (event: Event) => {
+        if (!selectionPanel?.contains(event.target as HTMLElement)) {
+          setOpen(false)
+        }
+      }
+      const listenToKeyboard = (event: KeyboardEvent) => {
+        const isCharacter = event.key.length === 1
+        if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
+          (searchable && (isCharacter || event.key === 'Backspace'))) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        if (event.key === 'Escape') setOpen(false)
+        if (searchable) {
+          if (isCharacter) setSearch(v => `${v}${event.key}`)
+          if (event.key === 'Backspace') setSearch(v => v?.substring(0, v.length - 1))
+        }
+        if (event.key === 'ArrowDown') {
+          const current = getCurrent()
+          const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('.option')) as HTMLAreaElement | undefined
+          if (next) {
+            current?.classList.remove('focused')
+            next.classList.add('focused')
+            scrollTo(next)
+          }
+        }
+        if (event.key === 'ArrowUp') {
+          const current = getCurrent()
+          const prev = (
+            current?.previousElementSibling ?? selectionPanel?.querySelector('.option:last-child')
+          ) as HTMLAreaElement | undefined
+          if (prev) {
+            current?.classList.remove('focused')
+            prev.classList.add('focused')
+            scrollTo(prev)
+          }
+        }
+        if (event.key === 'Enter') {
+          setTimeout(() => getCurrent()?.click(), 0)
+        }
+      }
+      // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
+      // labels.
+      setTimeout(() => document.addEventListener('click', listenToMouse), 20)
+      document.addEventListener('keydown', listenToKeyboard)
+      return () => {
+        document.removeEventListener('click', listenToMouse)
+        document.removeEventListener('keydown', listenToKeyboard)
+        getCurrent()?.classList.remove('focused')
+      }
+    }
+  }, [open])
+}
+
+/* this runs whenever the select is focused */
+export function useFocusEffect({ element, focused, setFocused, setOpen }: FocusEffectParams) {
+  useEffect(() => {
+    if (focused) {
+      const listenToMouse = (event: MouseEvent) => {
+        if (!element.current?.contains(event.target as HTMLElement)) {
+          setFocused(false)
+        }
+      }
+      const listenToKeyboard = (event: KeyboardEvent) => {
+        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+          event.preventDefault()
+          if (!element.current?.classList.contains('open')) setOpen(true)
+        }
+        if (event.key === 'Tab') {
+          setFocused(false)
+          if (element.current?.classList.contains('open')) setOpen(false)
+        }
+      }
+      document.addEventListener('click', listenToMouse)
+      document.addEventListener('keydown', listenToKeyboard)
+      return () => {
+        document.removeEventListener('click', listenToMouse)
+        document.removeEventListener('keydown', listenToKeyboard)
+      }
+    }
+  }, [focused])
+}
+
+export function useDisabledEffect({ disabled, setOpen, setFocused }: DisabledEffectParams) {
+  useEffect(() => {
+    if (disabled) {
+      setOpen(false)
+      setFocused(false)
+    }
+  }, [disabled])
+}

package/src/components/Select/index.tsx

@@ -11,7 +11,7 @@ export type * from './types'
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  * 
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  * 
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  * 

package/src/components/Select/types.ts

@@ -32,7 +32,7 @@ export interface CommonSelectProps<T> extends WithColorScheme {
    * @param option the item to compute a key for.
    * @returns a string key.
    */
-  renderKey?: (value: T) => string | number | undefined,
+  renderKey?: (option: T) => string | number | undefined,
   /**
    * Whether or not this input is required. This is also used to figure out if an empty option should be rendered or not.
    * 
@@ -73,6 +73,10 @@ export interface CommonSelectProps<T> extends WithColorScheme {
    * @default 'rich'
    */
   type?: 'simple' | 'rich',
+  /**
+   * A text to show when no option is selected.
+   */
+  placeholder?: string,
 }
 
 export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
@@ -92,18 +96,18 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
    * A function to render the option in the selectable list.
    * 
    * The `renderLabel` function is used if this is not provided.
-   * @param value the option.
+   * @param option the option.
    * @returns the React Node.
    */
-  renderOption?: (value: T | undefined) => React.ReactNode,
+  renderOption?: (option: T | undefined) => React.ReactNode,
   /**
    * A function to render the selected option in the header.
    * 
    * The `renderOption` function is used if this is not provided.
-   * @param value the option.
+   * @param option the option.
    * @returns the React Node.
    */
-  renderHeader?: (value: T | undefined) => React.ReactNode,
+  renderHeader?: (option: T | undefined) => React.ReactNode,
   /**
    * The maximum height of the options list in pixels.
    * 
@@ -116,6 +120,10 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
    */
   showArrow?: boolean,
   ref?: React.MutableRefObject<HTMLDivElement>,
+  /**
+   * Text to show in the header when no option is selected.
+   */
+  placeholder?: string,
 }
 
 export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/Badge'
 export * from './components/Blockquote'
 export * from './components/Breadcrumb'
 export * from './components/Button'
+export * from './components/ButtonLink'
 export * from './components/Card'
 export * from './components/Checkbox'
 export * from './components/CheckboxGroup'
@@ -36,6 +37,7 @@ export * from './components/ProgressCircular'
 export * from './components/RadioGroup'
 export * from './components/Rating'
 export * from './components/Select'
+export * from './components/Select/MultiSelect'
 export * from './components/SelectBox'
 export * from './components/Skeleton'
 export * from './components/Slider'

package/src/utils/checkbox.ts

@@ -90,7 +90,7 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
     /**
      * Apply a new filter.
      */
-    setFilter: setFilter,
+    setFilter,
     /**
      * The options that should be passed to the checkbox group.
      */