⬅️ Back to Table of Contents

📄 Dropdown

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
💠 JSX Elements	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/inputs/Dropdown.tsx

📦 Imports

Name	Source
clsx	clsx
React	react
styles	./Dropdown.module.css

---

JSX Elements

Component	Type	Props	Children
select	element	className={clsx(styles.dropdown, props.className)}, disabled={props.disabled}...	{options.map(item => ( <option key={String(item.value)} value={String(item.va...
option	element	key={String(item.value)}, value={String(item.value)}	{item.label}

---

Functions

Dropdown(props: DropdownProps<T>): React.JSX.Element

Parameters:

• props DropdownProps<T>

Returns: React.JSX.Element

Calls:

• props.options.map
• String
• clsx (from clsx)
• options.find
• props.onChange
• options.map

Code

function Dropdown<T extends boolean | number | string>(
  props: DropdownProps<T>,
): React.JSX.Element {
  const options: DropdownOption<T>[] = props.options.map(option =>
    typeof option !== 'object'
      ? { label: String(option), value: option }
      : option,
  );

  return (
    <select
      className={clsx(styles.dropdown, props.className)}
      disabled={props.disabled}
      name={props.name}
      onChange={(e): void => {
        const selected = options.find(
          item => String(item.value) === e.target.value,
        );
        if (selected) {
          props.onChange(selected.value);
        }
      }}
      value={String(props.value)}
    >
      {options.map(item => (
        <option key={String(item.value)} value={String(item.value)}>
          {item.label}
        </option>
      ))}
    </select>
  );
}

---

Interfaces

DropdownOption<T>

Interface Code

export interface DropdownOption<T> {
  readonly label: string;
  readonly value: T;
}

Properties

Name	Type	Optional	Description
label	string	✗	not shown
value	T	✗	not shown

DropdownProps<T>

Interface Code

export interface DropdownProps<T> {
  readonly className?: string;
  readonly disabled?: boolean;
  readonly name: string;
  readonly onChange: (value: T) => void;
  readonly options: readonly (DropdownOption<T> | T)[];
  readonly value: T | undefined;
}

Properties

Name	Type	Optional	Description
className	string	✓	not shown
disabled	boolean	✓	not shown
name	string	✗	not shown
onChange	(value: T) => void	✗	not shown
options	readonly (DropdownOption<T> \| T)[]	✗	not shown
value	T \| undefined	✗	not shown

---

Generated by Syntax Scribe