mui-rff/dist/mui-rff.esm.js

Set of modern wrapper components to facilitate using Material UI with React Final Form

import e from "@mui/material/Autocomplete";
import t from "@mui/material/TextField";
import { Field as n, FormSpy as r, useField as i } from "react-final-form";
import { Checkbox as a, FormControl as o, FormControlLabel as s, FormGroup as c, FormHelperText as l, FormLabel as u, InputLabel as d, MenuItem as f, Radio as p, RadioGroup as m, Select as h, Switch as g, TextField as _ } from "@mui/material";
import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
import { DatePicker as x, DateTimePicker as S, TimePicker as C } from "@mui/x-date-pickers";
//#region src/Util.tsx
function w({ showError: e, meta: t, formHelperTextProps: n, helperText: r }) {
	return e ? /* @__PURE__ */ y(l, {
		...n,
		children: t.error || t.submitError
	}) : r ? /* @__PURE__ */ y(l, {
		...n,
		children: r
	}) : null;
}
var T = { subscription: {
	error: !0,
	submitError: !0,
	dirtySinceLastSubmit: !0,
	touched: !0,
	modified: !0
} }, E = (e) => i(e, T), D = ({ meta: { submitError: e, dirtySinceLastSubmit: t, error: n, touched: r, modified: i } }) => !!((e && !t || n) && (r || i)), O = ({ meta: { submitError: e, dirtySinceLastSubmit: t, error: n, touched: r } }) => !!((e && !t || n) && r);
//#endregion
//#region src/Autocomplete.tsx
function k({ name: e, fieldProps: t, showError: r = D, ...i }) {
	return /* @__PURE__ */ y(n, {
		name: e,
		render: (e) => /* @__PURE__ */ y(A, {
			fieldRenderProps: e,
			showError: r,
			...i
		}),
		...t
	});
}
function A(n) {
	let { fieldRenderProps: { input: { name: r, value: i, onChange: a, onFocus: o, onBlur: s }, meta: c }, options: l, label: u, required: d, multiple: f, textFieldProps: p, getOptionValue: m, showError: h, onChange: g, ..._ } = n;
	function x(e) {
		return m ? f ? e ? e.map(m) : null : e ? m(e) : null : e;
	}
	let { helperText: S, ...C } = _, { variant: w, onFocus: T, onBlur: E, slotProps: D, ...O } = p || {}, k;
	if (!m) k = i;
	else if (i) for (let e of l) {
		let t = m(e);
		if (f) {
			k ||= [];
			for (let n of i) n === t && k.push(e);
		} else i === t && (k = e);
	}
	let A = (e, t, n, r) => {
		a(x(t)), g && g(e, t, n, r);
	}, { error: j, submitError: M } = c, N = h({ meta: c }), P = typeof D?.input == "object" ? D.input : void 0;
	return /* @__PURE__ */ y(e, {
		multiple: f,
		onChange: A,
		options: l,
		renderInput: (e) => {
			let { InputLabelProps: n, InputProps: i, inputProps: a, ...c } = e;
			return /* @__PURE__ */ y(t, {
				error: N,
				helperText: N ? j || M : S,
				label: u,
				name: r,
				onBlur: (e) => {
					E?.(e), s(e);
				},
				onFocus: (e) => {
					T?.(e), o(e);
				},
				required: d,
				variant: w,
				...c,
				...O,
				fullWidth: !0,
				slotProps: {
					...D,
					htmlInput: {
						...a,
						...D?.htmlInput
					},
					input: {
						...i,
						...P,
						...P?.startAdornment && { startAdornment: /* @__PURE__ */ b(v, { children: [P.startAdornment, i?.startAdornment] }) },
						...P?.endAdornment && { endAdornment: /* @__PURE__ */ b(v, { children: [i?.endAdornment, P.endAdornment] }) }
					},
					inputLabel: {
						...n,
						...D?.inputLabel
					}
				}
			});
		},
		value: k || (f ? [] : null),
		...C
	});
}
//#endregion
//#region src/Checkboxes.tsx
function j(e) {
	let { required: t, label: r, data: i, name: l, helperText: d, fieldProps: f, formControlProps: p, formGroupProps: m, formLabelProps: h, formControlLabelProps: g, formHelperTextProps: _, showError: v = D, ...x } = e, S = Array.isArray(i) ? i : [i], C = !Array.isArray(i), T = E(l), O = v(T);
	return /* @__PURE__ */ b(o, {
		error: O,
		required: t,
		...p,
		children: [
			r ? /* @__PURE__ */ y(u, {
				...h,
				children: r
			}) : null,
			/* @__PURE__ */ y(c, {
				...m,
				children: S.map((e) => /* @__PURE__ */ y(s, {
					control: /* @__PURE__ */ y(n, {
						name: l,
						render: ({ input: { name: n, value: r, onChange: i, checked: o, onBlur: s, onFocus: c, ...l } }) => /* @__PURE__ */ y(a, {
							checked: o,
							disabled: e.disabled,
							indeterminate: e.indeterminate,
							name: n,
							onChange: i,
							slotProps: { input: {
								required: t,
								onBlur: s,
								onFocus: c,
								...l
							} },
							value: r,
							...x
						}),
						type: "checkbox",
						...f
					}),
					disabled: e.disabled,
					label: e.label,
					name: l,
					value: C ? void 0 : e.value,
					...g
				}, `${l}${e.label}`))
			}),
			/* @__PURE__ */ y(w, {
				formHelperTextProps: _,
				helperText: d,
				meta: T.meta,
				showError: O
			})
		]
	});
}
//#endregion
//#region src/DatePicker.tsx
function M(e) {
	let { name: t, fieldProps: r, ...i } = e;
	return /* @__PURE__ */ y(n, {
		name: t,
		render: (e) => /* @__PURE__ */ y(N, {
			...e,
			...i
		}),
		...r
	});
}
function N(e) {
	let { input: { name: t, onChange: n, value: r, ...i }, meta: a, showError: o = D, ...s } = e, { error: c, submitError: l } = a, u = o({ meta: a }), { helperText: d, textFieldProps: f, slotProps: p, required: m, ...h } = s;
	return /* @__PURE__ */ y(x, {
		onChange: n,
		value: r === "" ? null : r,
		...h,
		slotProps: {
			...p,
			textField: {
				...f,
				helperText: u ? c || l : d,
				inputProps: {
					onBlur: (e) => {
						i.onBlur(e);
					},
					onFocus: (e) => {
						i.onFocus(e);
					}
				},
				error: u,
				fullWidth: !0,
				name: t,
				onChange: n,
				value: r === "" ? null : r,
				required: m
			}
		}
	});
}
//#endregion
//#region src/DateTimePicker.tsx
function P(e) {
	let { name: t, fieldProps: r, ...i } = e;
	return /* @__PURE__ */ y(n, {
		name: t,
		render: (e) => /* @__PURE__ */ y(F, {
			...e,
			...i
		}),
		...r
	});
}
function F(e) {
	let { input: { name: t, onChange: n, value: r, ...i }, meta: a, showError: o = D, ...s } = e, { error: c, submitError: l } = a, u = o({ meta: a }), { helperText: d, textFieldProps: f, slotProps: p, required: m, ...h } = s;
	return /* @__PURE__ */ y(S, {
		onChange: n,
		value: r === "" ? null : r,
		...h,
		slotProps: {
			...p,
			textField: {
				...f,
				helperText: u ? c || l : d,
				inputProps: {
					onBlur: (e) => {
						i.onBlur(e);
					},
					onFocus: (e) => {
						i.onFocus(e);
					}
				},
				error: u,
				fullWidth: !0,
				name: t,
				onChange: n,
				value: r === "" ? null : r,
				required: m
			}
		}
	});
}
//#endregion
//#region src/Debug.tsx
function I() {
	return /* @__PURE__ */ y(r, {
		subscription: { values: !0 },
		children: ({ values: e }) => /* @__PURE__ */ y("pre", { children: JSON.stringify(e, void 0, 2) })
	});
}
//#endregion
//#region src/Radios.tsx
function L(e) {
	let { name: t, data: r, label: i, required: a, helperText: c, formLabelProps: l, formControlLabelProps: d, fieldProps: f, formControlProps: h, radioGroupProps: g, formHelperTextProps: _, showError: v = D, ...x } = e, S = E(t), C = v(S);
	return /* @__PURE__ */ b(o, {
		error: C,
		required: a,
		...h,
		children: [
			!!i && /* @__PURE__ */ y(u, {
				...l,
				children: i
			}),
			/* @__PURE__ */ y(m, {
				...g,
				children: r.map((e) => /* @__PURE__ */ y(s, {
					control: /* @__PURE__ */ y(n, {
						name: t,
						render: ({ input: { name: t, value: n, onChange: r, checked: i, onBlur: o, onFocus: s, ...c } }) => /* @__PURE__ */ y(p, {
							checked: i,
							disabled: e.disabled,
							name: t,
							onChange: r,
							required: a,
							slotProps: { input: {
								required: a,
								onBlur: o,
								onFocus: s,
								...c
							} },
							value: n,
							...x
						}),
						type: "radio",
						...f
					}),
					disabled: e.disabled,
					label: e.label,
					name: t,
					value: e.value,
					...d
				}, `${t}${e.label}`))
			}),
			/* @__PURE__ */ y(w, {
				formHelperTextProps: _,
				helperText: c,
				meta: S.meta,
				showError: C
			})
		]
	});
}
//#endregion
//#region src/Select.tsx
function R(e) {
	let { name: t, label: r, data: i, children: a, required: s, multiple: c, helperText: l, fieldProps: u, inputLabelProps: p, formControlProps: m, formHelperTextProps: g, menuItemProps: _, showError: v = D, ...x } = e;
	if (!(i || a)) throw Error("Please specify either children or data as an attribute.");
	let { variant: S } = x, C = E(t), T = v(C);
	return /* @__PURE__ */ y(n, {
		name: t,
		render: ({ input: { name: e, value: n, onChange: u, ...v } }) => {
			let E = c && !n ? [] : n, D = `select-input-${t}`;
			return /* @__PURE__ */ b(o, {
				error: T,
				fullWidth: !0,
				required: s,
				variant: S,
				...m,
				children: [
					!!r && /* @__PURE__ */ y(d, {
						id: D,
						...p,
						children: r
					}),
					/* @__PURE__ */ y(h, {
						inputProps: {
							required: s,
							...v
						},
						label: r,
						labelId: D,
						multiple: c,
						name: e,
						onChange: u,
						value: E,
						...x,
						children: i ? i.map((e) => /* @__PURE__ */ y(f, {
							disabled: e.disabled,
							value: e.value,
							..._,
							children: e.label
						}, `${e.value}${e.label}`)) : a
					}),
					/* @__PURE__ */ y(w, {
						formHelperTextProps: g,
						helperText: l,
						meta: C.meta,
						showError: T
					})
				]
			});
		},
		...u
	});
}
//#endregion
//#region src/Switches.tsx
function z(e) {
	let { name: t, data: r, label: i, required: a, helperText: l, fieldProps: d, formControlProps: f, formGroupProps: p, formLabelProps: m, formControlLabelProps: h, formHelperTextProps: _, showError: v = D, ...x } = e, S = Array.isArray(r) ? r : [r], C = !Array.isArray(r), T = E(t), O = v(T);
	return /* @__PURE__ */ b(o, {
		error: O,
		required: a,
		...f,
		children: [
			i ? /* @__PURE__ */ y(u, {
				...m,
				children: i
			}) : null,
			/* @__PURE__ */ y(c, {
				...p,
				children: S.map((e) => /* @__PURE__ */ y(s, {
					control: /* @__PURE__ */ y(n, {
						name: t,
						render: ({ input: { name: t, value: n, onChange: r, checked: i, ...o } }) => /* @__PURE__ */ y(g, {
							checked: i,
							disabled: e.disabled,
							name: t,
							onChange: r,
							required: a,
							slotProps: { input: {
								required: a,
								...o
							} },
							value: n,
							...x
						}),
						type: "checkbox",
						...d
					}),
					disabled: e.disabled,
					label: e.label,
					name: t,
					value: C ? void 0 : e.value,
					...h
				}, `${t}${e.label}`))
			}),
			/* @__PURE__ */ y(w, {
				formHelperTextProps: _,
				helperText: l,
				meta: T.meta,
				showError: O
			})
		]
	});
}
//#endregion
//#region src/TextField.tsx
function B({ name: e, type: t, fieldProps: r, showError: i = D, fullWidth: a = !0, ...o }) {
	return /* @__PURE__ */ y(n, {
		name: e,
		type: t,
		...r,
		render: (t) => /* @__PURE__ */ y(V, {
			fieldRenderProps: t,
			fullWidth: a,
			name: e,
			showError: i,
			...o
		})
	});
}
function V({ fieldRenderProps: { input: { value: e, type: t, onChange: n, onBlur: r, onFocus: i, ...a }, meta: o }, helperText: s, showError: c, slotProps: l, ...u }) {
	let { error: d, submitError: f } = o, p = c({ meta: o });
	return /* @__PURE__ */ y(_, {
		error: p,
		helperText: p ? d || f : s,
		onBlur: r,
		onChange: n,
		onFocus: i,
		slotProps: {
			...l,
			htmlInput: {
				...a,
				...l?.htmlInput
			}
		},
		type: t,
		value: e,
		...u
	});
}
//#endregion
//#region src/TimePicker.tsx
function H(e) {
	let { name: t, fieldProps: r, ...i } = e;
	return /* @__PURE__ */ y(n, {
		name: t,
		render: (e) => /* @__PURE__ */ y(U, {
			...e,
			...i
		}),
		...r
	});
}
function U(e) {
	let { input: { name: t, onChange: n, value: r, ...i }, meta: a, showError: o = D, ...s } = e, { error: c, submitError: l } = a, u = o({ meta: a }), { helperText: d, textFieldProps: f, required: p, ...m } = s;
	return /* @__PURE__ */ y(C, {
		onChange: n,
		value: r === "" ? null : r,
		...m,
		slotProps: { textField: {
			...f,
			helperText: u ? c || l : d,
			inputProps: {
				onBlur: (e) => {
					i.onBlur(e);
				},
				onFocus: (e) => {
					i.onFocus(e);
				}
			},
			error: u,
			fullWidth: !0,
			name: t,
			onChange: n,
			value: r === "" ? null : r,
			required: p
		} }
	});
}
//#endregion
//#region src/Validation.ts
var W = /[,[\].]+?/;
function G(e, t, n) {
	let r = String.prototype.split.call(t, W).filter(Boolean).reduce((e, t) => e == null ? e : e[t], e);
	return r === void 0 || r === e ? n : r;
}
function K(e, t, n) {
	return new Object(e) === e ? (Array.isArray(t) || (t = t.toString().match(/[^.[\]]+/g) || []), t.slice(0, -1).reduce((e, n, r) => new Object(e[n]) === e[n] ? e[n] : e[n] = Math.abs(t[r + 1]) >> 0 == +t[r + 1] ? [] : {}, e)[t.at(-1)] = n, e) : e;
}
function q(e, t) {
	return e.inner.reduce((e, n) => {
		let { path: r, message: i } = n, a = t === void 0 ? i : t(n);
		if (r && G(e, r)) {
			let t = G(e, r);
			t.push(a), K(e, r, t);
		} else K(e, r, [a]);
		return e;
	}, {});
}
function J(e, t) {
	return async (n) => {
		try {
			return await e.validate(n, { abortEarly: !1 }), {};
		} catch (e) {
			return q(e, t);
		}
	};
}
function Y(e, t) {
	return (n) => {
		try {
			return e.validateSync(n, { abortEarly: !1 }), {};
		} catch (e) {
			return q(e, t);
		}
	};
}
function X(e) {
	let t = e.fields;
	return Object.keys(t).reduce((e, n) => (t[n].fields ? e[n] = X(t[n]) : e[n] = !t[n].spec.optional, e), {});
}
//#endregion
export { k as Autocomplete, j as Checkboxes, M as DatePicker, P as DateTimePicker, I as Debug, w as ErrorMessage, L as Radios, R as Select, z as Switches, B as TextField, H as TimePicker, X as makeRequired, J as makeValidate, Y as makeValidateSync, O as showErrorOnBlur, D as showErrorOnChange, E as useFieldForErrors };

//# sourceMappingURL=mui-rff.esm.js.map