@stack-spot/citric-react 0.41.1 → 0.42.0-beta.0

package/src/components/Select/MultiSelect.tsx

@@ -1,217 +1,217 @@
-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 { 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',
+  },
+}