@stack-spot/citric-react 0.35.1 → 0.37.0

package/src/components/Select/RichSelect.tsx

@@ -1,128 +1,128 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useTranslate } from '@stack-spot/portal-translate'
-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'
-
-export const RichSelect = withRef(
-  function RichSelect<T>({
-    ref,
-    options,
-    value,
-    onChange,
-    renderLabel = defaultRenderLabel,
-    renderKey = defaultRenderKey,
-    required = true,
-    disabled,
-    loading,
-    renderOption,
-    renderHeader,
-    searchable,
-    maxHeight,
-    style,
-    className,
-    onFocus,
-    onBlur,
-    showArrow,
-    placeholder,
-    ...props
-  }: SelectProps<T> & { type?: 'rich' },
-  ) {
-    const [search, setSearch] = useState<string | undefined>('')
-    const _element = useRef<HTMLDivElement | null>(null)
-    const element = ref ?? _element
-    const [open, setOpen] = useState(false)
-    const [focused, setFocused] = useState(false)
-    const t = useTranslate(dictionary)
-
-    const change = useCallback((option: T | undefined) => () => {
-      onChange?.(option)
-      setOpen(false)
-    }, [])
-
-    const renderedOptions = useMemo(() => {
-      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())) {
-          items.push(
-            <li key={key} onClick={change(o)} className="option">
-              {renderOption?.(o) ?? label}
-            </li>,
-          )
-        }
-      })
-      return items
-    }, [options, value, required, search])
-
-    useOpenPanelEffect({ open, setOpen, setSearch, element, searchable })
-    useFocusEffect({ element, focused, setFocused, setOpen })
-    useDisabledEffect({ disabled, setOpen, setFocused })
-
-    return (
-      <CitricComponent
-        tag="div"
-        component="rich-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}
-      >
-        <SimpleSelect
-          options={options}
-          value={value}
-          renderLabel={renderLabel}
-          renderKey={renderKey}
-          required={required}
-          disabled={disabled}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          wrap={false}
-        />
-        <header
-          onClick={() => {
-            if (disabled) return
-            setFocused(true)
-            setOpen(true)
-          }}
-          aria-hidden
-        >
-          {value === undefined
-            ? <span className="placeholder header-text">{placeholder}</span>
-            : (renderHeader?.(value) ?? <span className="header-text">{renderOption?.(value) ?? renderLabel(value)}</span>)}
-          {loading && <ProgressCircular size="xs" className="loader" />}
-        </header>
-        <div className="selection-panel" aria-hidden>
-          {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={search} onChange={setSearch} tabIndex={-1} />
-            </div>
-          </div>}
-          <ul className="options">{renderedOptions}</ul>
-        </div>
-      </CitricComponent>
-    )
-  },
-)
-
-const dictionary = {
-  en: {
-    empty: 'Empty',
-  },
-  pt: {
-    empty: 'Vazio',
-  },
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+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'
+
+export const RichSelect = withRef(
+  function RichSelect<T>({
+    ref,
+    options,
+    value,
+    onChange,
+    renderLabel = defaultRenderLabel,
+    renderKey = defaultRenderKey,
+    required = true,
+    disabled,
+    loading,
+    renderOption,
+    renderHeader,
+    searchable,
+    maxHeight,
+    style,
+    className,
+    onFocus,
+    onBlur,
+    showArrow,
+    placeholder,
+    ...props
+  }: SelectProps<T> & { type?: 'rich' },
+  ) {
+    const [search, setSearch] = useState<string | undefined>('')
+    const _element = useRef<HTMLDivElement | null>(null)
+    const element = ref ?? _element
+    const [open, setOpen] = useState(false)
+    const [focused, setFocused] = useState(false)
+    const t = useTranslate(dictionary)
+
+    const change = useCallback((option: T | undefined) => () => {
+      onChange?.(option)
+      setOpen(false)
+    }, [])
+
+    const renderedOptions = useMemo(() => {
+      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())) {
+          items.push(
+            <li key={key} onClick={change(o)} className="option">
+              {renderOption?.(o) ?? label}
+            </li>,
+          )
+        }
+      })
+      return items
+    }, [options, value, required, search])
+
+    useOpenPanelEffect({ open, setOpen, setSearch, element, searchable })
+    useFocusEffect({ element, focused, setFocused, setOpen })
+    useDisabledEffect({ disabled, setOpen, setFocused })
+
+    return (
+      <CitricComponent
+        tag="div"
+        component="rich-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}
+      >
+        <SimpleSelect
+          options={options}
+          value={value}
+          renderLabel={renderLabel}
+          renderKey={renderKey}
+          required={required}
+          disabled={disabled}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          wrap={false}
+        />
+        <header
+          onClick={() => {
+            if (disabled) return
+            setFocused(true)
+            setOpen(true)
+          }}
+          aria-hidden
+        >
+          {value === undefined
+            ? <span className="placeholder header-text">{placeholder}</span>
+            : (renderHeader?.(value) ?? <span className="header-text">{renderOption?.(value) ?? renderLabel(value)}</span>)}
+          {loading && <ProgressCircular size="xs" className="loader" />}
+        </header>
+        <div className="selection-panel" aria-hidden>
+          {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={search} onChange={setSearch} tabIndex={-1} />
+            </div>
+          </div>}
+          <ul className="options">{renderedOptions}</ul>
+        </div>
+      </CitricComponent>
+    )
+  },
+)
+
+const dictionary = {
+  en: {
+    empty: 'Empty',
+  },
+  pt: {
+    empty: 'Vazio',
+  },
+}

package/src/components/Select/SimpleSelect.tsx

@@ -1,73 +1,73 @@
-import { MutableRefObject, useCallback, useMemo } from 'react'
-import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
-import { withRef } from '../../utils/react'
-import { CitricComponent } from '../CitricComponent'
-import { ProgressCircular } from '../ProgressCircular'
-import { SelectProps } from './types'
-
-export const SimpleSelect = withRef(
-  function SimpleSelect<T>({
-    ref,
-    options,
-    value,
-    onChange,
-    renderLabel = defaultRenderLabel,
-    renderKey = defaultRenderKey,
-    required = true,
-    loading,
-    disabled,
-    onBlur,
-    onFocus,
-    wrap,
-    ...props
-  }: SelectProps<T> & { wrap?: boolean },
-  ) {
-    const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-      const selectedIndex = e.target.options.selectedIndex - (e.target.options.length > options.length ? 1 : 0)
-      onChange?.(selectedIndex >= 0 ? options[selectedIndex] : undefined)
-    }, [options])
-
-    const renderedOptions = useMemo(() => {
-      const items = (!value || !required) ? [<option key="">{renderLabel(undefined)}</option>] : []
-      options.forEach((o) => {
-        const key = renderKey(o)
-        items.push(
-          <option key={key} value={key}>
-            {renderLabel(o)}
-          </option>,
-        )
-      })
-      return items
-    }, [options, value, required])
-
-    return wrap === false ? (
-      <CitricComponent
-        tag="select"
-        ref={ref as MutableRefObject<HTMLSelectElement | null>}
-        required={required}
-        onChange={handleChange}
-        disabled={disabled || loading}
-        component="select"
-        onFocus={onFocus}
-        onBlur={onBlur}
-        value={value ? renderKey(value) : ''}
-      >
-        {renderedOptions}
-      </CitricComponent>
-    ) : (
-      <CitricComponent ref={ref as MutableRefObject<HTMLDivElement | null>} tag="div" component="select" aria-busy={loading} {...props}>
-        <select
-          value={value ? renderKey(value) : undefined}
-          required={required}
-          onChange={handleChange}
-          disabled={disabled || loading}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        >
-          {renderedOptions}
-        </select>
-        {loading && <ProgressCircular className="loader" size="xs" />}
-      </CitricComponent>
-    )
-  },
-)
+import { MutableRefObject, useCallback, useMemo } from 'react'
+import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
+import { withRef } from '../../utils/react'
+import { CitricComponent } from '../CitricComponent'
+import { ProgressCircular } from '../ProgressCircular'
+import { SelectProps } from './types'
+
+export const SimpleSelect = withRef(
+  function SimpleSelect<T>({
+    ref,
+    options,
+    value,
+    onChange,
+    renderLabel = defaultRenderLabel,
+    renderKey = defaultRenderKey,
+    required = true,
+    loading,
+    disabled,
+    onBlur,
+    onFocus,
+    wrap,
+    ...props
+  }: SelectProps<T> & { wrap?: boolean },
+  ) {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+      const selectedIndex = e.target.options.selectedIndex - (e.target.options.length > options.length ? 1 : 0)
+      onChange?.(selectedIndex >= 0 ? options[selectedIndex] : undefined)
+    }, [options])
+
+    const renderedOptions = useMemo(() => {
+      const items = (!value || !required) ? [<option key="">{renderLabel(undefined)}</option>] : []
+      options.forEach((o) => {
+        const key = renderKey(o)
+        items.push(
+          <option key={key} value={key}>
+            {renderLabel(o)}
+          </option>,
+        )
+      })
+      return items
+    }, [options, value, required])
+
+    return wrap === false ? (
+      <CitricComponent
+        tag="select"
+        ref={ref as MutableRefObject<HTMLSelectElement | null>}
+        required={required}
+        onChange={handleChange}
+        disabled={disabled || loading}
+        component="select"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        value={value ? renderKey(value) : ''}
+      >
+        {renderedOptions}
+      </CitricComponent>
+    ) : (
+      <CitricComponent ref={ref as MutableRefObject<HTMLDivElement | null>} tag="div" component="select" aria-busy={loading} {...props}>
+        <select
+          value={value ? renderKey(value) : undefined}
+          required={required}
+          onChange={handleChange}
+          disabled={disabled || loading}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        >
+          {renderedOptions}
+        </select>
+        {loading && <ProgressCircular className="loader" size="xs" />}
+      </CitricComponent>
+    )
+  },
+)