mui-rhf-integration/dist/index.js

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

import { jsx as a, jsxs as g } from "react/jsx-runtime";
import { Autocomplete as A, TextField as b, Checkbox as R, FormControl as w, FormLabel as x, FormGroup as k, FormControlLabel as y, FormHelperText as B, RadioGroup as F, Radio as S, Switch as G, Box as E } from "@mui/material";
import { useController as m } from "react-hook-form";
const T = ({
  control: d,
  name: u,
  rules: h,
  textFieldProps: n,
  multiple: r,
  valueToOption: l,
  optionToValue: i,
  loading: f,
  ...v
}) => {
  const { field: o, fieldState: c } = m({ control: d, name: u, rules: h });
  let e = o.value;
  return e === void 0 ? e = null : e && l && (f ? e = r ? [] : null : r ? (Array.isArray(e) || (console.warn("Received a non-array value for a multiple Autocomplete"), e = []), e = e.map(l).filter((s) => s != null)) : r || (e = l(e))), /* @__PURE__ */ a(
    A,
    {
      onChange: (s, t) => {
        if (!(i && t)) {
          o.onChange(t);
          return;
        }
        if (!r) {
          o.onChange(i(t));
          return;
        }
        if (Array.isArray(t)) {
          o.onChange(t.map(i));
          return;
        }
        console.warn("Autocomplete is set to multiple but value is an not array");
      },
      value: e,
      multiple: r,
      loading: f,
      renderInput: (s) => /* @__PURE__ */ a(
        b,
        {
          ...n,
          ...s,
          error: !!c.error,
          onBlur: o.onBlur,
          helperText: c.error?.message ?? n?.helperText,
          inputRef: o.ref
        }
      ),
      ...v
    }
  );
}, H = ({
  control: d,
  name: u,
  ...h
}) => {
  const { field: n } = m({ control: d, name: u });
  let r = n.value;
  if (r == null)
    r = !1;
  else if (typeof r != "boolean")
    throw new Error("RhfCheckbox value must be boolean, null or undefined");
  return /* @__PURE__ */ a(
    R,
    {
      checked: r,
      onChange: (l, i) => {
        n.onChange(i);
      },
      onBlur: n.onBlur,
      ref: n.ref,
      ...h
    }
  );
}, I = ({
  control: d,
  name: u,
  rules: h,
  label: n,
  options: r,
  helperText: l,
  formLabelProps: i,
  formGroupProps: f,
  ...v
}) => {
  const { field: o, fieldState: c } = m({ control: d, name: u, rules: h });
  let e = o.value;
  if (e == null)
    e = [];
  else if (!Array.isArray(e))
    throw new Error("RhfCheckboxGroup value must be array, null or undefined");
  const s = (t, p) => {
    if (!p) {
      o.onChange(
        e.filter((C) => C !== t)
      );
      return;
    }
    o.onChange([...e, t]);
  };
  return /* @__PURE__ */ g(
    w,
    {
      error: c.invalid,
      component: "fieldset",
      variant: "standard",
      ref: o.ref,
      ...v,
      children: [
        /* @__PURE__ */ a(x, { component: "legend", ...i, children: n }),
        /* @__PURE__ */ a(k, { ...f, children: r.map((t) => /* @__PURE__ */ a(
          y,
          {
            name: t.value,
            checked: e.includes(t.value),
            onChange: (p, C) => {
              s(t.value, C);
            },
            control: /* @__PURE__ */ a(R, {}),
            label: t.label
          },
          t.value
        )) }),
        (l || c.error) && /* @__PURE__ */ a(B, { children: c.error?.message ?? l })
      ]
    }
  );
}, q = ({
  control: d,
  name: u,
  rules: h,
  label: n,
  options: r,
  helperText: l,
  formLabelProps: i,
  radioGroupProps: f,
  ...v
}) => {
  const { field: o, fieldState: c } = m({ control: d, name: u, rules: h });
  let e = o.value;
  if (e == null)
    e = null;
  else if (typeof e != "string")
    throw new Error("RhfRadioGroup value must be string, null or undefined");
  return /* @__PURE__ */ g(
    w,
    {
      error: !!c.error,
      variant: "standard",
      ref: o.ref,
      ...v,
      children: [
        /* @__PURE__ */ a(x, { ...i, children: n }),
        /* @__PURE__ */ a(
          F,
          {
            ...f,
            name: u,
            onChange: (s, t) => {
              o.onChange(t);
            },
            onBlur: o.onBlur,
            value: e,
            children: r.map((s) => /* @__PURE__ */ a(
              y,
              {
                value: s.value,
                control: /* @__PURE__ */ a(S, {}),
                label: s.label
              },
              s.value
            ))
          }
        ),
        (l || c.error) && /* @__PURE__ */ a(B, { children: c.error?.message ?? l })
      ]
    }
  );
}, z = ({
  control: d,
  name: u,
  ...h
}) => {
  const { field: n } = m({ control: d, name: u });
  let r = n.value;
  if (r == null)
    r = !1;
  else if (typeof r != "boolean")
    throw new Error("RhfSwitch value must be boolean, null or undefined");
  return /* @__PURE__ */ a(
    G,
    {
      checked: r,
      onChange: (l, i) => {
        n.onChange(i);
      },
      onBlur: n.onBlur,
      ref: n.ref,
      ...h
    }
  );
}, D = ({
  control: d,
  name: u,
  rules: h,
  maxCharacters: n,
  ...r
}) => {
  const { field: l, fieldState: i } = m({ control: d, name: u, rules: h });
  let f = l.value;
  if (f == null)
    f = "";
  else if (typeof f != "string")
    throw new Error("RhfTextField value must be string, null or undefined");
  let v = i.error?.message ?? r.helperText;
  return n !== void 0 && (v = /* @__PURE__ */ g(E, { component: "span", sx: { display: "flex", justifyContent: "space-between" }, children: [
    /* @__PURE__ */ a("span", { children: v }),
    /* @__PURE__ */ g("span", { children: [
      f.length,
      "/",
      n
    ] })
  ] })), /* @__PURE__ */ a(
    b,
    {
      ...r,
      name: u,
      error: !!i.error,
      onChange: l.onChange,
      onBlur: l.onBlur,
      value: f,
      inputRef: l.ref,
      helperText: v
    }
  );
};
export {
  T as RhfAutocomplete,
  H as RhfCheckbox,
  I as RhfCheckboxGroup,
  q as RhfRadioGroup,
  z as RhfSwitch,
  D as RhfTextField
};