@etsoo/materialui/lib/mjs/custom/FieldCombobox.js

TypeScript Material-UI Implementation

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { ComboBoxMultiple } from "../ComboBoxMultiple";
import Typography from "@mui/material/Typography";
/**
 * Combobox (multiple values) field creator
 * type combobox
 * @returns Component
 */
export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
    // State
    const [ids, setIds] = React.useState();
    const getValue = () => ids;
    const setValue = (value) => {
        if (Array.isArray(value))
            setIds(value);
        else if (typeof value === "number" || typeof value === "string")
            setIds([value]);
    };
    // Ref
    React.useImperativeHandle(mref, () => ({
        getValue,
        setValue
    }));
    React.useEffect(() => {
        if (defaultValue == null)
            return;
        setValue(defaultValue);
    }, [defaultValue]);
    // Name
    const name = field.name;
    if (!name) {
        return (_jsxs(Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
    }
    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
            const ids = value.map((v) => v.id);
            setIds(ids);
            onChange(name, ids);
        }, ...field.mainSlotProps }));
};