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

react-hook-form components using MaterialUI

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