@chimera-pe/mui-rhf/dist/mui-rhf.js

react-hook-form components using MaterialUI

import { Children as e, Fragment as t, cloneElement as n, useCallback as r } from "react";
import i from "prop-types";
import { useController as a, useFieldArray as o, useFormState as s } from "react-hook-form";
import { isEmpty as c } from "lodash";
import { Autocomplete as l, Box as u, Button as d, Card as f, CardContent as p, CardHeader as m, Checkbox as h, Divider as g, FormControl as _, FormControlLabel as v, FormGroup as y, FormHelperText as b, IconButton as x, InputLabel as S, MenuItem as C, Select as w, Stack as T, Switch as E, TextField as D, Typography as O } from "@mui/material";
import { useTranslate as k } from "react-polyglot";
import { jsx as A, jsxs as j } from "react/jsx-runtime";
import { DatePicker as M, TimePicker as N } from "@mui/x-date-pickers";
import { Add as P, Cancel as F, Delete as I, Save as L } from "@mui/icons-material";
//#region src/components/Util.js
var R = (e) => e.error && e.invalid, z = (e) => (e.match(/(\w+)(\.\w+)+/g) || []).length > 0, B = (e) => typeof e == "string" ? e : e.label, V = ({ control: e, name: t, label: n, disabled: i = !1, onChange: o, required: s = !1, helperText: u, options: d, ...f }) => {
	if (!d || c(d)) throw Error("\"options\" cannot be empty");
	let p = k(), { field: m, fieldState: h, formState: g } = a({
		control: e,
		name: t,
		disabled: i
	}), _ = r((e, t) => {
		m.onChange(t?.value), o && o(t?.value, g);
	}, [
		m,
		o,
		g
	]), v = R(h), y = v && (z(h.error.message) ? p(h.error.message) : h.error.message);
	return /* @__PURE__ */ A(l, {
		options: d,
		getOptionLabel: B,
		isOptionEqualToValue: (e, t) => e?.value === t,
		value: m.value || "",
		onChange: _,
		renderInput: (e) => /* @__PURE__ */ A(D, {
			...e,
			label: z(n) ? p(n) : n,
			error: v,
			helperText: y || u,
			required: s
		}),
		...f
	});
};
V.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	required: i.bool,
	helperText: i.string,
	options: i.array.isRequired
};
//#endregion
//#region src/components/DatePicker.jsx
var H = ({ control: e, name: t, label: n, disabled: i = !1, onChange: o, required: s = !1, helperText: c, fullWidth: l, ...u }) => {
	let d = k(), { field: f, fieldState: p, formState: m } = a({
		control: e,
		name: t,
		disabled: i
	}), h = r((e) => {
		f.onChange(e), o && o(e, m);
	}, [
		f,
		o,
		m
	]), g = R(p), _ = g && (z(p.error.message) ? d(p.error.message) : p.error.message), v = !f.value || f.value === "" ? null : f.value;
	return /* @__PURE__ */ A(M, {
		label: z(n) ? d(n) : n,
		value: v,
		onChange: h,
		onBlur: f.onBlur,
		inputRef: f.ref,
		disabled: f.disabled,
		slotProps: { textField: {
			required: s,
			error: g,
			helperText: _ || c,
			fullWidth: l
		} },
		...u
	});
};
H.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	required: i.bool,
	helperText: i.string,
	fullWidth: i.bool
};
//#endregion
//#region src/components/FormButtons.jsx
var U = ({ control: e, onCancel: t, cancelLabel: n = "main.form.button.cancel", cancelColor: r = "warning", submitLabel: i = "main.form.button.submit", submitColor: a = "success" }) => {
	let o = k(), { isSubmitting: c } = s({ control: e });
	return /* @__PURE__ */ j(u, {
		display: "flex",
		flex: 1,
		justifyContent: "flex-end",
		gap: 1,
		children: [t && /* @__PURE__ */ A(d, {
			color: r,
			onClick: t,
			startIcon: /* @__PURE__ */ A(F, {}),
			disabled: c,
			children: o(n)
		}), /* @__PURE__ */ A(d, {
			type: "submit",
			color: a,
			variant: "contained",
			startIcon: /* @__PURE__ */ A(L, {}),
			loading: c,
			loadingPosition: "start",
			children: o(i)
		})]
	});
};
U.propTypes = {
	control: i.object.isRequired,
	onCancel: i.func,
	cancelLabel: i.string,
	cancelColor: i.string,
	submitLabel: i.string,
	submitColor: i.string
};
//#endregion
//#region src/components/Hidden.jsx
var W = ({ control: e, name: t }) => {
	let { field: n } = a({
		control: e,
		name: t
	});
	return /* @__PURE__ */ A("input", {
		type: "hidden",
		...n
	});
};
W.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired
};
//#endregion
//#region src/components/Repeatable.jsx
var G = ({ control: r, name: i, defaultValue: a, title: s, spacing: c = 3, divider: l = !1, elevation: d = 1, variant: h = "outlined", children: _ }) => {
	let v = k(), { fields: y, append: b, remove: S } = o({
		control: r,
		name: i
	});
	return /* @__PURE__ */ j(f, {
		elevation: d,
		variant: h,
		children: [/* @__PURE__ */ A(m, {
			title: z(s) ? v(s) : s,
			action: /* @__PURE__ */ A(x, { children: /* @__PURE__ */ A(P, {
				color: "success",
				onClick: () => b(a)
			}) })
		}), /* @__PURE__ */ A(p, { children: /* @__PURE__ */ A(T, {
			spacing: c,
			children: y.map((a, o) => /* @__PURE__ */ j(t, { children: [/* @__PURE__ */ j(T, {
				spacing: 2,
				direction: "row",
				children: [
					/* @__PURE__ */ A(O, { children: o + 1 }),
					/* @__PURE__ */ A(u, {
						flexGrow: 1,
						children: e.map(_, (e) => n(e, {
							control: r,
							index: o,
							namePrefix: `${i}.${o}`
						}))
					}),
					/* @__PURE__ */ A(x, { children: /* @__PURE__ */ A(I, {
						color: "error",
						onClick: () => S(o)
					}) })
				]
			}), l && o < y.length - 1 && /* @__PURE__ */ A(g, {})] }, a.id))
		}) })]
	});
};
G.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	defaultValue: i.object.isRequired,
	title: i.string.isRequired,
	spacing: i.number,
	divider: i.bool,
	elevation: i.number,
	variant: i.string,
	children: i.element.isRequired
};
//#endregion
//#region src/components/Select.jsx
var K = ({ control: e, name: t, label: n, disabled: i = !1, onChange: o, fullWidth: s = !1, required: l = !1, variant: u = "outlined", multiple: d = !1, helperText: f, data: p, ...m }) => {
	if (!p || c(p)) throw Error("\"data\" cannot be empty");
	let g = k(), { field: v, fieldState: y, formState: x } = a({
		control: e,
		name: t,
		disabled: i
	}), T = r((e) => {
		v.onChange(e), o && o(e.target.value, x);
	}, [
		v,
		o,
		x
	]), E = R(y), D = E && (z(y.error.message) ? g(y.error.message) : y.error.message), O = `select-${t}-label`, M = z(n) ? g(n) : n, N = d && !v.value ? [] : v.value || "";
	return /* @__PURE__ */ j(_, {
		fullWidth: s,
		required: l,
		error: E,
		variant: u,
		children: [
			/* @__PURE__ */ A(S, {
				id: O,
				children: M
			}),
			/* @__PURE__ */ A(w, {
				label: M,
				labelId: O,
				value: N,
				onChange: T,
				inputRef: v.ref,
				multiple: d,
				disabled: v.disabled,
				renderValue: (e) => Array.isArray(e) ? p.filter((t) => e.includes(t.value)).map((e) => e.label).join(", ") : p.filter((t) => t.value === e).map((e) => e.label),
				...m,
				children: p.map((e) => /* @__PURE__ */ j(C, {
					value: e.value,
					disabled: e.disabled,
					children: [d && /* @__PURE__ */ A(h, { checked: N.includes(e.value) }), e.label]
				}, `select-${t}-option-${e.value}`))
			}),
			E ? /* @__PURE__ */ A(b, { children: D }) : f ? /* @__PURE__ */ A(b, { children: z(f) ? g(f) : f }) : null
		]
	});
};
K.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	fullWidth: i.bool,
	required: i.bool,
	variant: i.string,
	multiple: i.bool,
	helperText: i.string,
	data: i.arrayOf(i.shape({
		label: i.string.isRequired,
		value: i.oneOfType([i.number, i.string]).isRequired,
		disabled: i.bool
	})).isRequired
};
//#endregion
//#region src/components/Switch.jsx
var q = ({ control: e, name: t, label: n, disabled: i, onChange: o, required: s = !1, helperText: c, ...l }) => {
	let u = k(), { field: d, fieldState: f, formState: p } = a({
		control: e,
		name: t,
		disabled: i
	}), m = r((e) => {
		d.onChange(e), o && o(e.target.value, p);
	}, [
		d,
		o,
		p
	]), h = R(f), g = h && (z(f.error.message) ? u(f.error.message) : f.error.message);
	return /* @__PURE__ */ j(_, {
		required: s,
		error: h,
		children: [/* @__PURE__ */ A(y, { children: /* @__PURE__ */ A(v, {
			label: z(n) ? u(n) : n,
			control: /* @__PURE__ */ A(E, {
				checked: !!d.value,
				onChange: m,
				...l
			})
		}) }), h ? /* @__PURE__ */ A(b, { children: g }) : c ? /* @__PURE__ */ A(b, { children: z(c) ? u(c) : c }) : null]
	});
};
q.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	required: i.bool,
	helperText: i.string
};
//#endregion
//#region src/components/TextField.jsx
var J = ({ control: e, name: t, label: n, disabled: i = !1, onChange: o, required: s = !1, helperText: c, ...l }) => {
	let u = k(), { field: d, fieldState: f, formState: p } = a({
		control: e,
		name: t,
		disabled: i
	}), m = r((e) => {
		let t = e.target.value;
		d.onChange(t), o && o(t, p);
	}, [
		d,
		o,
		p
	]), h = R(f), g = h && (z(f.error.message) ? u(f.error.message) : f.error.message);
	return /* @__PURE__ */ A(D, {
		label: z(n) ? u(n) : n,
		value: d.value || "",
		onChange: m,
		onBlur: d.onBlur,
		inputRef: d.ref,
		disabled: d.disabled,
		required: s,
		error: h,
		helperText: g || c,
		...l
	});
};
J.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	required: i.bool,
	helperText: i.string
};
//#endregion
//#region src/components/TimePicker.jsx
var Y = ({ control: e, name: t, label: n, disabled: i = !1, onChange: o, required: s = !1, helperText: c, fullWidth: l, ...u }) => {
	let d = k(), { field: f, fieldState: p, formState: m } = a({
		control: e,
		name: t,
		disabled: i
	}), h = r((e) => {
		f.onChange(e), o && o(e, m);
	}, [
		f,
		o,
		m
	]), g = R(p), _ = g && (z(p.error.message) ? d(p.error.message) : p.error.message), v = !f.value || f.value === "" ? null : f.value;
	return /* @__PURE__ */ A(N, {
		label: z(n) ? d(n) : n,
		value: v,
		onChange: h,
		onBlur: f.onBlur,
		inputRef: f.ref,
		disabled: f.disabled,
		slotProps: { textField: {
			required: s,
			error: g,
			helperText: _ || c,
			fullWidth: l
		} },
		...u
	});
};
Y.propTypes = {
	control: i.object.isRequired,
	name: i.string.isRequired,
	label: i.string.isRequired,
	disabled: i.bool,
	onChange: i.func,
	required: i.bool,
	helperText: i.string,
	fullWidth: i.bool
};
//#endregion
export { V as Autocomplete, H as DatePicker, U as FormButtons, W as Hidden, G as Repeatable, K as Select, q as Switch, J as TextField, Y as TimePicker };