Function Select

packages/devtools-ui/src/components/select.tsx:17–50

(props: SelectProps<T>)

}

export function Select<T extends string | number>(props: SelectProps<T>) {
  const styles = createStyles()
  const [selected, setSelected] = createSignal(
    props.value ?? props.options[0]?.value,
  )
  const id = createUniqueId()
  const descriptionId = `${id}-description`

  createEffect(() => {
    if (props.value !== undefined) {
      setSelected(() => props.value)
    }
  })

  const handleChange = (e: Event) => {
    const value = (e.target as HTMLSelectElement).value
    const option = props.options.find(
      (candidate) => String(candidate.value) === value,
    )
    if (!option) return
    setSelected(() => option.value)
    props.onChange?.(option.value)
  }

  return (
    <div class={styles().selectContainer}>
      <div class={styles().selectWrapper}>
        {props.label && (
          <label for={id} class={styles().selectLabel}>
            {props.label}
          </label>
        )}
        {props.description && (
          <p id={descriptionId} class={styles().selectDescription}>
            {props.description}
          </p>
        )}