app/src/admin/ui/Select.tsx

import MuiTextField, { type TextFieldProps } from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";

export interface SelectOption {
  value: string;
  label: string;
}

type SelectProps = Omit<TextFieldProps, "onChange" | "select" | "value"> & {
  value: string;
  onChange: (value: string) => void;
  options?: SelectOption[];
};

/** Dropdown styled like the kit TextField; composes inside <Field>. */
export default function Select({
  value,
  onChange,
  options,
  children,
  slotProps,
  ...props
}: SelectProps) {
  return (
    <MuiTextField
      select
      size="small"
      variant="outlined"
      fullWidth
      value={value}
      onChange={(e) => onChange(e.target.value)}
      {...props}
      slotProps={{
        ...slotProps,
        select: {
          // Render the selected option's label even when its value is "" — e.g.
          // an "All" filter option. Without displayEmpty MUI shows the control
          // blank for an empty-string value despite it being selected.
          displayEmpty: true,
          // Cap the menu height so long option lists scroll inside the popover
          // instead of growing to fit every record (and running off-screen).
          MenuProps: { PaperProps: { sx: { maxHeight: 320 } } },
          // Let callers override either default (e.g. a custom renderValue).
          ...((slotProps as { select?: object } | undefined)?.select ?? {}),
        },
      }}
    >
      {options
        ? options.map((o) => (
            <MenuItem key={o.value} value={o.value}>
              {o.label}
            </MenuItem>
          ))
        : children}
    </MuiTextField>
  );
}