@stack-spot/citric-react 0.37.1 → 0.39.0

package/src/components/Select/hooks.ts

@@ -1,133 +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])
-}
+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

@@ -1,35 +1,35 @@
-import { withRef } from '../../utils/react'
-import { RichSelect } from './RichSelect'
-import { SimpleSelect } from './SimpleSelect'
-import { SelectProps } from './types'
-export type * from './types'
-
-/**
- * Renders a Select form component. By default, it renders a rich, fully styled component (rich = true). You can set `rich = false` to use
- * only the default select of the browser.
- * 
- * 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 `searchable = true`.
- * 
- * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
- * 
- * @example
- * 
- * ```
- * const options: = useMemo(() => [
- *   { id: 1, name: 'Lorem' },
- *   { id: 2, name: 'Ipsum' },
- *   { id: 3, name: 'Dolor' },
- * ], [])
- * const [value, setValue] = useState(options[0])
- * 
- * return <Select options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} onChange={setValue} />
- * ```
- */
-export const Select = withRef(
-  function Select<T>(props: SelectProps<T>) {
-    return props.type === 'simple' ? <SimpleSelect {...props} /> : <RichSelect {...props} />
-  },
-)
+import { withRef } from '../../utils/react'
+import { RichSelect } from './RichSelect'
+import { SimpleSelect } from './SimpleSelect'
+import { SelectProps } from './types'
+export type * from './types'
+
+/**
+ * Renders a Select form component. By default, it renders a rich, fully styled component (rich = true). You can set `rich = false` to use
+ * only the default select of the browser.
+ * 
+ * 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 `searchable = true`.
+ * 
+ * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
+ * 
+ * @example
+ * 
+ * ```
+ * const options: = useMemo(() => [
+ *   { id: 1, name: 'Lorem' },
+ *   { id: 2, name: 'Ipsum' },
+ *   { id: 3, name: 'Dolor' },
+ * ], [])
+ * const [value, setValue] = useState(options[0])
+ * 
+ * return <Select options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} onChange={setValue} />
+ * ```
+ */
+export const Select = withRef(
+  function Select<T>(props: SelectProps<T>) {
+    return props.type === 'simple' ? <SimpleSelect {...props} /> : <RichSelect {...props} />
+  },
+)

package/src/components/Select/types.ts

@@ -1,134 +1,134 @@
-import { WithColorScheme } from '../../types'
-
-export interface CommonSelectProps<T> extends WithColorScheme {
-  /**
-   * All the items (options) to render.
-   */
-  options: T[],
-  /**
-   * If the value is undefined or "", an empty option is rendered. This option will disappear as soon as a valid option is selected, unless
-   * "required" is set to false.
-   */
-  value?: T,
-  /**
-   * Called whenever the selected option changes.
-   * @param value the currently selected item.
-   */
-  onChange?: (value: T | undefined) => void,
-  /**
-   * 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?: (value: T | undefined) => string,
-  /**
-   * A function to render the item value, a unique identifier for the option.
-   * @example
-   * `(option) => option.id`
-   * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
-   * @param option the item to compute a key for.
-   * @returns a string key.
-   */
-  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.
-   * 
-   * An empty option is rendered whenever "required" is false or "value" is "" or undefined.
-   * @default true
-   */
-  required?: boolean,
-  /**
-   * Whether or not to show a loading feedback to the user.
-   * 
-   * Attention: selects that are loading should normally also be disabled.
-   */
-  loading?: boolean,
-  /**
-   * Whether or not this field is disabled.
-   * @default false
-   */
-  disabled?: boolean,
-  /**
-   * Function to run when the element receives focus. If the native select element received focus, a Select element is the target, otherwise
-   * the wrapping div element is.
-   * 
-   * If `rich` is false, the target will always be a select element.
-   */
-  onFocus?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>,
-  /**
-   * Function to run when the element loses focus. If the native select element received focus, a Select element is the target, otherwise
-   * the wrapping div element is.
-   * 
-   * If `rich` is false, the target will always be a select element.
-   */
-  onBlur?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>,
-  /**
-   * If the type is "simple", the native select element is rendered.
-   * 
-   * If the type is "rich", a custom select is rendered and more options are enabled, like "searchable".
-   * 
-   * @default 'rich'
-   */
-  type?: 'simple' | 'rich',
-  /**
-   * A text to show when no option is selected.
-   */
-  placeholder?: string,
-}
-
-export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
-  type: 'simple',
-  ref?: React.MutableRefObject<HTMLDivElement | HTMLSelectElement>,
-}
-
-export interface RichSelectProps<T> extends CommonSelectProps<T> {
-  type?: 'rich',
-  /**
-   * Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
-   * 
-   * Attention: when "searchable" is true, make sure to implement `renderLabel` if your options are not strings or number. The search will
-   * be performed on the result of this function.
-   * 
-   * @default false
-   */
-  searchable?: boolean,
-  /**
-   * A function to render the option in the selectable list.
-   * 
-   * The `renderLabel` function is used if this is not provided.
-   * @param option the option.
-   * @returns the React Node.
-   */
-  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 option the option.
-   * @returns the React Node.
-   */
-  renderHeader?: (option: T | undefined) => React.ReactNode,
-  /**
-   * The maximum height of the options list in pixels.
-   * 
-   * @default 300
-   */
-  maxHeight?: number,
-  /**
-   * Whether or not to show the arrow inside the select's header.
-   * @default true
-   */
-  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>
-
-export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>
+import { WithColorScheme } from '../../types'
+
+export interface CommonSelectProps<T> extends WithColorScheme {
+  /**
+   * All the items (options) to render.
+   */
+  options: T[],
+  /**
+   * If the value is undefined or "", an empty option is rendered. This option will disappear as soon as a valid option is selected, unless
+   * "required" is set to false.
+   */
+  value?: T,
+  /**
+   * Called whenever the selected option changes.
+   * @param value the currently selected item.
+   */
+  onChange?: (value: T | undefined) => void,
+  /**
+   * 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?: (value: T | undefined) => string,
+  /**
+   * A function to render the item value, a unique identifier for the option.
+   * @example
+   * `(option) => option.id`
+   * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
+   * @param option the item to compute a key for.
+   * @returns a string key.
+   */
+  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.
+   * 
+   * An empty option is rendered whenever "required" is false or "value" is "" or undefined.
+   * @default true
+   */
+  required?: boolean,
+  /**
+   * Whether or not to show a loading feedback to the user.
+   * 
+   * Attention: selects that are loading should normally also be disabled.
+   */
+  loading?: boolean,
+  /**
+   * Whether or not this field is disabled.
+   * @default false
+   */
+  disabled?: boolean,
+  /**
+   * Function to run when the element receives focus. If the native select element received focus, a Select element is the target, otherwise
+   * the wrapping div element is.
+   * 
+   * If `rich` is false, the target will always be a select element.
+   */
+  onFocus?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>,
+  /**
+   * Function to run when the element loses focus. If the native select element received focus, a Select element is the target, otherwise
+   * the wrapping div element is.
+   * 
+   * If `rich` is false, the target will always be a select element.
+   */
+  onBlur?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>,
+  /**
+   * If the type is "simple", the native select element is rendered.
+   * 
+   * If the type is "rich", a custom select is rendered and more options are enabled, like "searchable".
+   * 
+   * @default 'rich'
+   */
+  type?: 'simple' | 'rich',
+  /**
+   * A text to show when no option is selected.
+   */
+  placeholder?: string,
+}
+
+export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
+  type: 'simple',
+  ref?: React.MutableRefObject<HTMLDivElement | HTMLSelectElement>,
+}
+
+export interface RichSelectProps<T> extends CommonSelectProps<T> {
+  type?: 'rich',
+  /**
+   * Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
+   * 
+   * Attention: when "searchable" is true, make sure to implement `renderLabel` if your options are not strings or number. The search will
+   * be performed on the result of this function.
+   * 
+   * @default false
+   */
+  searchable?: boolean,
+  /**
+   * A function to render the option in the selectable list.
+   * 
+   * The `renderLabel` function is used if this is not provided.
+   * @param option the option.
+   * @returns the React Node.
+   */
+  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 option the option.
+   * @returns the React Node.
+   */
+  renderHeader?: (option: T | undefined) => React.ReactNode,
+  /**
+   * The maximum height of the options list in pixels.
+   * 
+   * @default 300
+   */
+  maxHeight?: number,
+  /**
+   * Whether or not to show the arrow inside the select's header.
+   * @default true
+   */
+  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>
+
+export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>