@stack-spot/citric-react 0.26.0 → 0.27.0

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/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

@@ -37,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.
      */