import { type Interpolation, type Theme } from "@emotion/react"; import Chip from "@mui/material/Chip"; import FormHelperText from "@mui/material/FormHelperText"; import { type FC } from "react"; export type MultiTextFieldProps = { label: string; id?: string; values: string[]; onChange: (values: string[]) => void; }; export const MultiTextField: FC = ({ label, id, values, onChange, }) => { return (
{'Type "," to separate the values'}
); }; const styles = { root: (theme) => ({ border: `1px solid ${theme.palette.divider}`, borderRadius: 8, minHeight: 48, // Chip height + paddings padding: "10px 14px", fontSize: 16, display: "flex", flexWrap: "wrap", gap: 8, position: "relative", margin: "8px 0 4px", // Have same margin than TextField "&:has(input:focus)": { borderColor: theme.palette.primary.main, borderWidth: 2, // Compensate for the border width top: -1, left: -1, }, }), input: { flexGrow: 1, fontSize: "inherit", padding: 0, border: "none", background: "none", "&:focus": { outline: "none", }, }, } satisfies Record>;