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 Y from "@mui/material/Autocomplete";
import { useField as Z, Field as w, FormSpy as _ } from "react-final-form";
import { FormHelperText as z, FormControl as V, FormLabel as $, FormGroup as j, FormControlLabel as G, 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 ur from "@mui/material/TextField";
import { DatePicker as ar, DateTimePicker as cr, TimePicker as dr } from "@mui/x-date-pickers";
function R({ showError: n, meta: t, formHelperTextProps: e, helperText: r }) {
  return n ? /* @__PURE__ */ s(z, { ...e, children: t.error || t.submitError }) : r ? /* @__PURE__ */ s(z, { ...e, children: r }) : /* @__PURE__ */ s(L, {});
}
const pr = {
  subscription: {
    error: !0,
    submitError: !0,
    dirtySinceLastSubmit: !0,
    touched: !0,
    modified: !0
  }
}, O = (n) => Z(n, pr), A = ({
  meta: { submitError: n, dirtySinceLastSubmit: t, error: e, touched: r, modified: o }
}) => !!((n && !t || e) && (r || o)), Cr = ({
  meta: { submitError: n, dirtySinceLastSubmit: t, error: e, touched: r }
}) => !!((n && !t || e) && r);
function kr(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, 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,
    placeholder: m,
    onChange: p,
    ...i
  } = n;
  function y(x) {
    return d ? a ? x ? x.map(d) : null : x ? d(x) : null : x;
  }
  const { helperText: E, ...C } = i, {
    variant: k,
    onFocus: v,
    onBlur: g,
    ...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 Q = (x, I, S, W) => {
    const q = y(I);
    r(q), p && p(x, I, S, W);
  }, { error: U, submitError: X } = u, H = b({ meta: u });
  return /* @__PURE__ */ s(
    Y,
    {
      multiple: a,
      onChange: Q,
      options: c,
      value: F || (a ? [] : null),
      renderInput: (x) => {
        var I, S, W, q, M;
        return /* @__PURE__ */ s(
          ur,
          {
            label: f,
            required: h,
            helperText: H ? U || X : E,
            error: H,
            name: t,
            placeholder: m,
            variant: k,
            onFocus: (D) => {
              v == null || v(D), o(D);
            },
            onBlur: (D) => {
              g == null || g(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,
                  (M = T.InputProps) == null ? void 0 : M.endAdornment
                ] })
              }
            },
            fullWidth: !0
          }
        );
      },
      ...C
    }
  );
}
function wr(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, m = Array.isArray(r) ? r : [r], p = !Array.isArray(r), i = O(o), y = d(i);
  return /* @__PURE__ */ B(V, { required: t, error: y, ...c, children: [
    e ? /* @__PURE__ */ s($, { ...h, children: e }) : /* @__PURE__ */ s(L, {}),
    /* @__PURE__ */ s(j, { ...f, children: m.map((E, C) => /* @__PURE__ */ s(
      G,
      {
        name: o,
        label: E.label,
        value: p ? void 0 : E.value,
        disabled: E.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            type: "checkbox",
            name: o,
            render: ({ input: { name: k, value: v, onChange: g, checked: T, ...F } }) => /* @__PURE__ */ s(
              rr,
              {
                name: k,
                value: v,
                onChange: g,
                checked: T,
                disabled: E.disabled,
                inputProps: { required: t, ...F },
                indeterminate: E.indeterminate,
                ...b
              }
            ),
            ...u
          }
        ),
        ...a
      },
      C
    )) }),
    /* @__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,
    fieldProps: u,
    formControlProps: c,
    formGroupProps: f,
    formLabelProps: h,
    formControlLabelProps: a,
    formHelperTextProps: P,
    showError: d = A,
    ...b
  } = n, m = Array.isArray(e) ? e : [e], p = !Array.isArray(e), i = O(t), y = d(i);
  return /* @__PURE__ */ B(V, { required: o, error: y, ...c, children: [
    r ? /* @__PURE__ */ s($, { ...h, children: r }) : /* @__PURE__ */ s(L, {}),
    /* @__PURE__ */ s(j, { ...f, children: m.map((E, C) => /* @__PURE__ */ s(
      G,
      {
        name: t,
        label: E.label,
        value: p ? void 0 : E.value,
        disabled: E.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            type: "checkbox",
            name: t,
            render: ({ input: { name: k, value: v, onChange: g, checked: T, ...F } }) => /* @__PURE__ */ s(
              er,
              {
                name: k,
                value: v,
                onChange: g,
                checked: T,
                disabled: E.disabled,
                required: o,
                inputProps: { required: o, ...F },
                ...b
              }
            ),
            ...u
          }
        ),
        ...a
      },
      C
    )) }),
    /* @__PURE__ */ s(
      R,
      {
        showError: y,
        meta: i.meta,
        formHelperTextProps: P,
        helperText: l
      }
    )
  ] });
}
function Ir(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, m = O(t), p = d(m);
  return /* @__PURE__ */ B(V, { required: o, error: p, ...h, children: [
    !!r && /* @__PURE__ */ s($, { ...u, children: r }),
    /* @__PURE__ */ s(tr, { ...a, children: e.map((i, y) => /* @__PURE__ */ s(
      G,
      {
        name: t,
        label: i.label,
        value: i.value,
        disabled: i.disabled,
        control: /* @__PURE__ */ s(
          w,
          {
            name: t,
            type: "radio",
            render: ({ input: { name: E, value: C, onChange: k, checked: v, ...g } }) => /* @__PURE__ */ s(
              or,
              {
                name: E,
                value: C,
                onChange: k,
                checked: v,
                disabled: i.disabled,
                required: o,
                inputProps: { required: o, ...g },
                ...b
              }
            ),
            ...f
          }
        ),
        ...c
      },
      y
    )) }),
    /* @__PURE__ */ s(
      R,
      {
        showError: p,
        meta: m.meta,
        formHelperTextProps: P,
        helperText: l
      }
    )
  ] });
}
function Sr(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,
    ...m
  } = n;
  if (!r && !o)
    throw new Error("Please specify either children or data as an attribute.");
  const { variant: p } = m, i = O(t), y = b(i);
  return /* @__PURE__ */ s(
    w,
    {
      name: t,
      render: ({ input: { name: E, value: C, onChange: k, ...v } }) => {
        const g = u && !C ? [] : C, T = `select-input-${E}`;
        return /* @__PURE__ */ B(
          V,
          {
            required: l,
            error: y,
            fullWidth: !0,
            variant: p,
            ...a,
            children: [
              !!e && /* @__PURE__ */ s(nr, { id: T, ...h, children: e }),
              /* @__PURE__ */ s(
                sr,
                {
                  name: E,
                  value: g,
                  onChange: k,
                  multiple: u,
                  label: e,
                  labelId: T,
                  inputProps: { required: l, ...v },
                  ...m,
                  children: r ? r.map((F) => /* @__PURE__ */ s(
                    lr,
                    {
                      value: F.value,
                      disabled: F.disabled,
                      ...d,
                      children: F.label
                    },
                    F.value
                  )) : o
                }
              ),
              /* @__PURE__ */ s(
                R,
                {
                  showError: y,
                  meta: i.meta,
                  formHelperTextProps: P,
                  helperText: c
                }
              )
            ]
          }
        );
      },
      ...f
    }
  );
}
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: m, ...p } = c;
  return /* @__PURE__ */ s(
    ar,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...p,
      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: m
        }
      }
    }
  );
}
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, slotProps: b, required: m, ...p } = c;
  return /* @__PURE__ */ s(
    cr,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...p,
      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: m
        }
      }
    }
  );
}
function Lr(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, 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, ...m } = c;
  return /* @__PURE__ */ s(
    dr,
    {
      onChange: e,
      value: r === "" ? null : r,
      ...m,
      slotProps: {
        textField: {
          ...d,
          helperText: a ? f || h : P,
          inputProps: {
            onBlur: (p) => {
              o.onBlur(p);
            },
            onFocus: (p) => {
              o.onFocus(p);
            }
          },
          error: a,
          fullWidth: !0,
          name: t,
          onChange: e,
          value: r === "" ? null : r,
          required: b
        }
      }
    }
  );
}
function Wr(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(br, { input: l, meta: u, name: t, type: e, ...o }),
      ...r
    }
  );
}
function br(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: m, submitError: p } = f, i = d({ meta: f });
  return /* @__PURE__ */ s(
    ir,
    {
      fullWidth: a,
      helperText: i ? m || p : 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 N(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 K(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), N(e, o, c);
    } else
      N(e, o, [u]);
    return e;
  }, {});
}
function qr(n, t) {
  return async (e) => {
    try {
      return await n.validate(e, { abortEarly: !1 }), {};
    } catch (r) {
      return K(r, t);
    }
  };
}
function Vr(n, t) {
  return (e) => {
    try {
      return n.validateSync(e, { abortEarly: !1 }), {};
    } catch (r) {
      return K(r, t);
    }
  };
}
function Er(n) {
  const t = n.fields;
  return Object.keys(t).reduce((e, r) => (t[r].fields ? e[r] = Er(t[r]) : e[r] = !t[r].spec.optional, e), {});
}
function Rr() {
  return /* @__PURE__ */ s(_, { subscription: { values: !0 }, children: ({ values: n }) => /* @__PURE__ */ s("pre", { children: JSON.stringify(n, void 0, 2) }) });
}
export {
  kr as Autocomplete,
  wr as Checkboxes,
  Br as DatePicker,
  Dr as DateTimePicker,
  Rr as Debug,
  R as ErrorMessage,
  Ir as Radios,
  Sr as Select,
  Ar as Switches,
  Wr as TextField,
  Lr as TimePicker,
  Er as makeRequired,
  qr as makeValidate,
  Vr as makeValidateSync,
  Cr as showErrorOnBlur,
  A as showErrorOnChange,
  O as useFieldForErrors
};
//# sourceMappingURL=mui-rff.esm.js.map