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

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

import { jsx as s, Fragment as L, jsxs as B } from "react/jsx-runtime";
import X from "@mui/material/Autocomplete";
import Y from "@mui/material/TextField";
import { useField as Z, Field as w, FormSpy as _ } from "react-final-form";
import { FormHelperText as N, FormControl as V, FormLabel as H, FormGroup as Q, FormControlLabel as M, Checkbox as rr, Switch as er, RadioGroup as tr, Radio as or, InputLabel as nr, Select as sr, MenuItem as lr, TextField as ir } from "@mui/material";
import { DatePicker as ur, DateTimePicker as ar, TimePicker as cr } from "@mui/x-date-pickers";
function R({ showError: n, meta: t, formHelperTextProps: e, helperText: r }) {
  return n ? /* @__PURE__ */ s(N, { ...e, children: t.error || t.submitError }) : r ? /* @__PURE__ */ s(N, { ...e, children: r }) : /* @__PURE__ */ s(L, {});
}
const dr = {
  subscription: {
    error: !0,
    submitError: !0,
    dirtySinceLastSubmit: !0,
    touched: !0,
    modified: !0
  }
}, O = (n) => Z(n, dr), A = ({
  meta: { submitError: n, dirtySinceLastSubmit: t, error: e, touched: r, modified: o }
}) => !!((n && !t || e) && (r || o)), gr = ({
  meta: { submitError: n, dirtySinceLastSubmit: t, error: e, touched: r }
}) => !!((n && !t || e) && r);
function Cr(n) {
  const { name: t, fieldProps: e, ...r } = n;
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: (o) => /* @__PURE__ */ s(pr, { ...o, ...r }),
      ...e
    }
  );
}
function pr(n) {
  const {
    input: { name: t, value: e, onChange: r, onFocus: o, onBlur: l },
    meta: u,
    options: c,
    label: f,
    required: h,
    multiple: a,
    textFieldProps: P,
    getOptionValue: d,
    showError: b = A,
    onChange: p,
    ...m
  } = n;
  function i(x) {
    return d ? a ? x ? x.map(d) : null : x ? d(x) : null : x;
  }
  const { helperText: y, ...E } = m, {
    variant: k,
    onFocus: g,
    onBlur: C,
    ...T
  } = P || {};
  let F;
  d ? e && c.forEach((x) => {
    const I = d(x);
    a ? (F || (F = []), e.forEach((S) => {
      S === I && F.push(x);
    })) : e === I && (F = x);
  }) : F = e;
  const v = (x, I, S, W) => {
    const q = i(I);
    r(q), p && p(x, I, S, W);
  }, { error: $, submitError: G } = u, z = b({ meta: u });
  return /* @__PURE__ */ s(
    X,
    {
      multiple: a,
      onChange: v,
      options: c,
      value: F || (a ? [] : null),
      renderInput: (x) => {
        var I, S, W, q, J;
        return /* @__PURE__ */ s(
          Y,
          {
            label: f,
            required: h,
            helperText: z ? $ || G : y,
            error: z,
            name: t,
            variant: k,
            onFocus: (D) => {
              g == null || g(D), o(D);
            },
            onBlur: (D) => {
              C == null || C(D), l(D);
            },
            ...x,
            ...T,
            InputProps: {
              ...x.InputProps,
              ...T.InputProps,
              ...((I = T.InputProps) == null ? void 0 : I.startAdornment) && {
                startAdornment: /* @__PURE__ */ B(L, { children: [
                  T.InputProps.startAdornment,
                  (S = x.InputProps) == null ? void 0 : S.startAdornment
                ] })
              },
              ...((W = T.InputProps) == null ? void 0 : W.endAdornment) && {
                endAdornment: /* @__PURE__ */ B(L, { children: [
                  (q = x.InputProps) == null ? void 0 : q.endAdornment,
                  (J = T.InputProps) == null ? void 0 : J.endAdornment
                ] })
              }
            },
            fullWidth: !0
          }
        );
      },
      ...E
    }
  );
}
function kr(n) {
  const {
    required: t,
    label: e,
    data: r,
    name: o,
    helperText: l,
    fieldProps: u,
    formControlProps: c,
    formGroupProps: f,
    formLabelProps: h,
    formControlLabelProps: a,
    formHelperTextProps: P,
    showError: d = A,
    ...b
  } = n, p = Array.isArray(r) ? r : [r], m = !Array.isArray(r), i = O(o), y = d(i);
  return /* @__PURE__ */ B(V, { required: t, error: y, ...c, children: [
    e ? /* @__PURE__ */ s(H, { ...h, children: e }) : /* @__PURE__ */ s(L, {}),
    /* @__PURE__ */ s(Q, { ...f, children: p.map((E, k) => /* @__PURE__ */ s(
      M,
      {
        name: o,
        label: E.label,
        value: m ? void 0 : E.value,
        disabled: E.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            type: "checkbox",
            name: o,
            render: ({
              input: { name: g, value: C, onChange: T, checked: F, onBlur: v, onFocus: $, ...G }
            }) => /* @__PURE__ */ s(
              rr,
              {
                name: g,
                value: C,
                onChange: T,
                checked: F,
                disabled: E.disabled,
                slotProps: {
                  input: { required: t, onBlur: v, onFocus: $, ...G }
                },
                indeterminate: E.indeterminate,
                ...b
              }
            ),
            ...u
          }
        ),
        ...a
      },
      k
    )) }),
    /* @__PURE__ */ s(
      R,
      {
        showError: y,
        meta: i.meta,
        formHelperTextProps: P,
        helperText: l
      }
    )
  ] });
}
function wr(n) {
  const {
    name: t,
    data: e,
    label: r,
    required: o,
    helperText: l,
    fieldProps: u,
    formControlProps: c,
    formGroupProps: f,
    formLabelProps: h,
    formControlLabelProps: a,
    formHelperTextProps: P,
    showError: d = A,
    ...b
  } = n, p = Array.isArray(e) ? e : [e], m = !Array.isArray(e), i = O(t), y = d(i);
  return /* @__PURE__ */ B(V, { required: o, error: y, ...c, children: [
    r ? /* @__PURE__ */ s(H, { ...h, children: r }) : /* @__PURE__ */ s(L, {}),
    /* @__PURE__ */ s(Q, { ...f, children: p.map((E, k) => /* @__PURE__ */ s(
      M,
      {
        name: t,
        label: E.label,
        value: m ? void 0 : E.value,
        disabled: E.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            type: "checkbox",
            name: t,
            render: ({ input: { name: g, value: C, onChange: T, checked: F, ...v } }) => /* @__PURE__ */ s(
              er,
              {
                name: g,
                value: C,
                onChange: T,
                checked: F,
                disabled: E.disabled,
                required: o,
                inputProps: { required: o, ...v },
                ...b
              }
            ),
            ...u
          }
        ),
        ...a
      },
      k
    )) }),
    /* @__PURE__ */ s(
      R,
      {
        showError: y,
        meta: i.meta,
        formHelperTextProps: P,
        helperText: l
      }
    )
  ] });
}
function Ar(n) {
  const {
    name: t,
    data: e,
    label: r,
    required: o,
    helperText: l,
    formLabelProps: u,
    formControlLabelProps: c,
    fieldProps: f,
    formControlProps: h,
    radioGroupProps: a,
    formHelperTextProps: P,
    showError: d = A,
    ...b
  } = n, p = O(t), m = d(p);
  return /* @__PURE__ */ B(V, { required: o, error: m, ...h, children: [
    !!r && /* @__PURE__ */ s(H, { ...u, children: r }),
    /* @__PURE__ */ s(tr, { ...a, children: e.map((i, y) => /* @__PURE__ */ s(
      M,
      {
        name: t,
        label: i.label,
        value: i.value,
        disabled: i.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            name: t,
            type: "radio",
            render: ({
              input: { name: E, value: k, onChange: g, checked: C, onBlur: T, onFocus: F, ...v }
            }) => /* @__PURE__ */ s(
              or,
              {
                name: E,
                value: k,
                onChange: g,
                checked: C,
                disabled: i.disabled,
                required: o,
                slotProps: {
                  input: {
                    required: o,
                    onBlur: T,
                    onFocus: F,
                    ...v
                  }
                },
                ...b
              }
            ),
            ...f
          }
        ),
        ...c
      },
      y
    )) }),
    /* @__PURE__ */ s(
      R,
      {
        showError: m,
        meta: p.meta,
        formHelperTextProps: P,
        helperText: l
      }
    )
  ] });
}
function Ir(n) {
  const {
    name: t,
    label: e,
    data: r,
    children: o,
    required: l,
    multiple: u,
    helperText: c,
    fieldProps: f,
    inputLabelProps: h,
    formControlProps: a,
    formHelperTextProps: P,
    menuItemProps: d,
    showError: b = A,
    ...p
  } = n;
  if (!r && !o)
    throw new Error("Please specify either children or data as an attribute.");
  const { variant: m } = p, i = O(t), y = b(i);
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: ({ input: { name: E, value: k, onChange: g, ...C } }) => {
        const T = u && !k ? [] : k, F = `select-input-${E}`;
        return /* @__PURE__ */ B(
          V,
          {
            required: l,
            error: y,
            fullWidth: !0,
            variant: m,
            ...a,
            children: [
              !!e && /* @__PURE__ */ s(nr, { id: F, ...h, children: e }),
              /* @__PURE__ */ s(
                sr,
                {
                  name: E,
                  value: T,
                  onChange: g,
                  multiple: u,
                  label: e,
                  labelId: F,
                  inputProps: { required: l, ...C },
                  ...p,
                  children: r ? r.map((v) => /* @__PURE__ */ s(
                    lr,
                    {
                      value: v.value,
                      disabled: v.disabled,
                      ...d,
                      children: v.label
                    },
                    v.value
                  )) : o
                }
              ),
              /* @__PURE__ */ s(
                R,
                {
                  showError: y,
                  meta: i.meta,
                  formHelperTextProps: P,
                  helperText: c
                }
              )
            ]
          }
        );
      },
      ...f
    }
  );
}
function Sr(n) {
  const { name: t, fieldProps: e, ...r } = n;
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: (o) => /* @__PURE__ */ s(mr, { ...o, ...r }),
      ...e
    }
  );
}
function mr(n) {
  const {
    input: { name: t, onChange: e, value: r, ...o },
    meta: l,
    showError: u = A,
    ...c
  } = n, { error: f, submitError: h } = l, a = u({ meta: l }), { helperText: P, textFieldProps: d, slotProps: b, required: p, ...m } = c;
  return /* @__PURE__ */ s(
    ur,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...m,
      slotProps: {
        ...b,
        textField: {
          ...d,
          helperText: a ? f || h : P,
          inputProps: {
            onBlur: (i) => {
              o.onBlur(i);
            },
            onFocus: (i) => {
              o.onFocus(i);
            }
          },
          error: a,
          fullWidth: !0,
          name: t,
          onChange: e,
          value: r === "" ? null : r,
          required: p
        }
      }
    }
  );
}
function Br(n) {
  const { name: t, fieldProps: e, ...r } = n;
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: (o) => /* @__PURE__ */ s(fr, { ...o, ...r }),
      ...e
    }
  );
}
function fr(n) {
  const {
    input: { name: t, onChange: e, value: r, ...o },
    meta: l,
    showError: u = A,
    ...c
  } = n, { error: f, submitError: h } = l, a = u({ meta: l }), { helperText: P, textFieldProps: d, slotProps: b, required: p, ...m } = c;
  return /* @__PURE__ */ s(
    ar,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...m,
      slotProps: {
        ...b,
        textField: {
          ...d,
          helperText: a ? f || h : P,
          inputProps: {
            onBlur: (i) => {
              o.onBlur(i);
            },
            onFocus: (i) => {
              o.onFocus(i);
            }
          },
          error: a,
          fullWidth: !0,
          name: t,
          onChange: e,
          value: r === "" ? null : r,
          required: p
        }
      }
    }
  );
}
function Dr(n) {
  const { name: t, fieldProps: e, ...r } = n;
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: (o) => /* @__PURE__ */ s(hr, { ...o, ...r }),
      ...e
    }
  );
}
function hr(n) {
  const {
    input: { name: t, onChange: e, value: r, ...o },
    meta: l,
    showError: u = A,
    ...c
  } = n, { error: f, submitError: h } = l, a = u({ meta: l }), { helperText: P, textFieldProps: d, required: b, ...p } = c;
  return /* @__PURE__ */ s(
    cr,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...p,
      slotProps: {
        textField: {
          ...d,
          helperText: a ? f || h : P,
          inputProps: {
            onBlur: (m) => {
              o.onBlur(m);
            },
            onFocus: (m) => {
              o.onFocus(m);
            }
          },
          error: a,
          fullWidth: !0,
          name: t,
          onChange: e,
          value: r === "" ? null : r,
          required: b
        }
      }
    }
  );
}
function Lr(n) {
  const { name: t, type: e, fieldProps: r, ...o } = n;
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      type: e,
      render: ({ input: l, meta: u }) => /* @__PURE__ */ s(Pr, { input: l, meta: u, name: t, type: e, ...o }),
      ...r
    }
  );
}
function Pr(n) {
  const {
    input: { name: t, value: e, type: r, onChange: o, onBlur: l, onFocus: u, ...c },
    meta: f,
    required: h,
    fullWidth: a = !0,
    helperText: P,
    showError: d = A,
    ...b
  } = n, { error: p, submitError: m } = f, i = d({ meta: f });
  return /* @__PURE__ */ s(
    ir,
    {
      fullWidth: a,
      helperText: i ? p || m : P,
      error: i,
      onChange: o,
      onBlur: l,
      onFocus: u,
      name: t,
      value: e,
      type: r,
      required: h,
      inputProps: { required: h, ...c },
      ...b
    }
  );
}
function j(n, t, e) {
  const r = String.prototype.split.call(t, /[,[\].]+?/).filter(Boolean).reduce((o, l) => o != null ? o[l] : o, n);
  return r === void 0 || r === n ? e : r;
}
function K(n, t, e) {
  return Object(n) !== n || (Array.isArray(t) || (t = t.toString().match(/[^.[\]]+/g) || []), t.slice(0, -1).reduce(
    (r, o, l) => Object(r[o]) === r[o] ? (
      // Yes: then follow that path
      r[o]
    ) : (
      // No: create the key. Is the next key a potential array-index?
      r[o] = Math.abs(t[l + 1]) >> 0 === +t[l + 1] ? [] : {}
    ),
    // No: assign a new plain object
    n
  )[t[t.length - 1]] = e), n;
}
function U(n, t) {
  return n.inner.reduce((e, r) => {
    const { path: o, message: l } = r, u = t ? t(r) : l;
    if (o && j(e, o)) {
      const c = j(e, o);
      c.push(u), K(e, o, c);
    } else
      K(e, o, [u]);
    return e;
  }, {});
}
function Wr(n, t) {
  return async (e) => {
    try {
      return await n.validate(e, { abortEarly: !1 }), {};
    } catch (r) {
      return U(r, t);
    }
  };
}
function qr(n, t) {
  return (e) => {
    try {
      return n.validateSync(e, { abortEarly: !1 }), {};
    } catch (r) {
      return U(r, t);
    }
  };
}
function br(n) {
  const t = n.fields;
  return Object.keys(t).reduce((e, r) => (t[r].fields ? e[r] = br(t[r]) : e[r] = !t[r].spec.optional, e), {});
}
function Vr() {
  return /* @__PURE__ */ s(_, { subscription: { values: !0 }, children: ({ values: n }) => /* @__PURE__ */ s("pre", { children: JSON.stringify(n, void 0, 2) }) });
}
export {
  Cr as Autocomplete,
  kr as Checkboxes,
  Sr as DatePicker,
  Br as DateTimePicker,
  Vr as Debug,
  R as ErrorMessage,
  Ar as Radios,
  Ir as Select,
  wr as Switches,
  Lr as TextField,
  Dr as TimePicker,
  br as makeRequired,
  Wr as makeValidate,
  qr as makeValidateSync,
  gr as showErrorOnBlur,
  A as showErrorOnChange,
  O as useFieldForErrors
};
//# sourceMappingURL=mui-rff.esm.js.map