mui-rhf-integration/dist/index.js

React Hook Form integration for MUI with strict TypeScript handling based on form context.

import { Autocomplete as e, Box as t, Checkbox as n, FormControl as r, FormControlLabel as i, FormGroup as a, FormHelperText as o, FormLabel as s, Radio as c, RadioGroup as l, Switch as u, TextField as d } from "@mui/material";
import { useController as f } from "react-hook-form";
import { jsx as p, jsxs as m } from "react/jsx-runtime";
//#region src/RhfAutocomplete.tsx
var h = ({ control: t, name: n, rules: r, slotProps: i, multiple: a, valueToOption: o, optionToValue: s, loading: c, ...l }) => {
	let { field: u, fieldState: m } = f({
		control: t,
		name: n,
		rules: r
	}), h = u.value;
	return h === void 0 ? h = null : h && o && (c ? h = a ? [] : null : a ? (Array.isArray(h) || (console.warn("Received a non-array value for a multiple Autocomplete"), h = []), h = h.map(o).filter((e) => e != null)) : a || (h = o(h))), /* @__PURE__ */ p(e, {
		onChange: (e, t) => {
			if (!(s && t)) {
				u.onChange(t);
				return;
			}
			if (!a) {
				u.onChange(s(t));
				return;
			}
			if (Array.isArray(t)) {
				u.onChange(t.map(s));
				return;
			}
			/* c8 ignore next */
			console.warn("Autocomplete is set to multiple but value is an not array");
		},
		value: h,
		multiple: a,
		loading: c,
		renderInput: (e) => /* @__PURE__ */ p(d, {
			...i?.textField,
			...e,
			error: !!m.error,
			onBlur: u.onBlur,
			helperText: m.error?.message ?? i?.textField?.helperText,
			inputRef: u.ref
		}),
		...l
	});
}, g = ({ control: e, name: t, ...r }) => {
	let { field: i } = f({
		control: e,
		name: t
	});
	return /* @__PURE__ */ p(n, {
		checked: i.value ?? !1,
		onChange: (e, t) => {
			i.onChange(t);
		},
		onBlur: i.onBlur,
		ref: i.ref,
		...r
	});
}, _ = ({ control: e, name: t, rules: c, label: l, options: u, helperText: d, slotProps: h, ...g }) => {
	let { field: _, fieldState: v } = f({
		control: e,
		name: t,
		rules: c
	}), y = _.value ?? [], b = (e, t) => {
		if (!t) {
			_.onChange(y.filter((t) => t !== e));
			return;
		}
		_.onChange([...y, e]);
	};
	return /* @__PURE__ */ m(r, {
		error: v.invalid,
		component: "fieldset",
		variant: "standard",
		ref: _.ref,
		...g,
		children: [
			/* @__PURE__ */ p(s, {
				component: "legend",
				...h?.formLabel,
				children: l
			}),
			/* @__PURE__ */ p(a, {
				...h?.formGroup,
				children: u.map((e) => /* @__PURE__ */ p(i, {
					name: e.value,
					checked: y.includes(e.value),
					onChange: (t, n) => {
						b(e.value, n);
					},
					control: /* @__PURE__ */ p(n, {}),
					label: e.label
				}, e.value))
			}),
			(d || v.error) && /* @__PURE__ */ p(o, { children: v.error?.message ?? d })
		]
	});
}, v = ({ control: e, name: t, rules: n, label: a, options: u, helperText: d, slotProps: h, ...g }) => {
	let { field: _, fieldState: v } = f({
		control: e,
		name: t,
		rules: n
	}), y = _.value ?? null;
	return /* @__PURE__ */ m(r, {
		error: !!v.error,
		variant: "standard",
		ref: _.ref,
		...g,
		children: [
			/* @__PURE__ */ p(s, {
				...h?.formLabel,
				children: a
			}),
			/* @__PURE__ */ p(l, {
				...h?.radioGroup,
				name: t,
				onChange: (e, t) => {
					_.onChange(t);
				},
				onBlur: _.onBlur,
				value: y,
				children: u.map((e) => /* @__PURE__ */ p(i, {
					value: e.value,
					control: /* @__PURE__ */ p(c, {}),
					label: e.label
				}, e.value))
			}),
			(d || v.error) && /* @__PURE__ */ p(o, { children: v.error?.message ?? d })
		]
	});
}, y = ({ control: e, name: t, ...n }) => {
	let { field: r } = f({
		control: e,
		name: t
	});
	return /* @__PURE__ */ p(u, {
		checked: r.value ?? !1,
		onChange: (e, t) => {
			r.onChange(t);
		},
		onBlur: r.onBlur,
		ref: r.ref,
		...n
	});
}, b = ({ control: e, name: n, rules: r, maxCharacters: i, ...a }) => {
	let { field: o, fieldState: s } = f({
		control: e,
		name: n,
		rules: r
	}), c = o.value ?? "", l = s.error?.message ?? a.helperText;
	return i !== void 0 && (l = /* @__PURE__ */ m(t, {
		component: "span",
		sx: {
			display: "flex",
			justifyContent: "space-between"
		},
		children: [/* @__PURE__ */ p("span", { children: l }), /* @__PURE__ */ m("span", { children: [
			c.length,
			"/",
			i
		] })]
	})), /* @__PURE__ */ p(d, {
		...a,
		name: n,
		error: !!s.error,
		onChange: o.onChange,
		onBlur: o.onBlur,
		value: c,
		inputRef: o.ref,
		helperText: l
	});
};
//#endregion
export { h as RhfAutocomplete, g as RhfCheckbox, _ as RhfCheckboxGroup, v as RhfRadioGroup, y as RhfSwitch, b as RhfTextField };