components/select/select.react.tsx

Functions

Imports

It imports components/select/select.ts. No module of this repo imports it.

Source

1import { useEffect, useId, useRef, type ReactNode, type SelectHTMLAttributes } from "react";
2import { enhance, selectControlFor } from "./select.ts";
3
4export interface SelectOption {
5  value: string;
6  label: ReactNode;
7  disabled?: boolean;
8}
9export interface SelectGroupOption {
10  group: string;
11  options: SelectOption[];
12}
13
14export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "style" | "children" | "className" | "size"> {
15  // Options and groups: the same list the native select holds. Plain strings are fine for the label.
16  options: Array<SelectOption | SelectGroupOption>;
17  size?: "sm" | "default";
18  // Keep the browser's own select (no popup), as on a phone.
19  native?: boolean;
20}
21
22// Renders the HTML contract in select.md: the wrapper, with a real native select holding every
23// option, so it server-renders. select.ts draws the button and the popup over it in an effect;
24// React keeps owning the native select (value, options, disabled), and the trigger follows it.
25export function Select(props: SelectProps) {
26  const { options, size = "default", native = false, id, ...rest } = props;
27  const own = useId();
28  const ref = useRef<HTMLDivElement>(null);
29  const selectId = id ?? own;
30  useEffect(() => (native || !ref.current ? undefined : enhance(ref.current)), [native]);
31  // The value is controlled by React: after each render the trigger is read again.
32  useEffect(() => {
33    const select = ref.current?.querySelector("select");
34    selectControlFor(select ?? null)?.sync();
35  });
36  const opt = (o: SelectOption) => (
37    <option key={o.value} value={o.value} disabled={o.disabled}>
38      {o.label}
39    </option>
40  );
41  return (
42    <div className="cap-select-wrap" data-cap="select" data-native={native ? "" : undefined} ref={ref}>
43      <select {...rest} id={selectId} className="cap-select" data-size={size === "default" ? undefined : size}>
44        {options.map((o) =>
45          "group" in o ? (
46            <optgroup key={o.group} label={o.group}>
47              {o.options.map(opt)}
48            </optgroup>
49          ) : (
50            opt(o)
51          ),
52        )}
53      </select>
54    </div>
55  );
56}