@m4l/components 0.1.27 → 0.1.28

package/components/hook-form/RHFCheckbox/index.6dcec9e2.js

@@ -1,58 +1,68 @@
-import { useFormContext as a, Controller as c } from "react-hook-form";
-import { styled as m } from "@mui/material/styles";
-import { styled as p, Skeleton as d, FormControlLabel as h, Checkbox as x } from "@mui/material";
-import { useModuleSkeleton as u } from "@m4l/core";
-import { jsx as e, jsxs as f, Fragment as g } from "react/jsx-runtime";
-const k = p("div")(() => ({
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1 } from "@mui/material/styles";
+import { styled, Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperSkeletonCheckBox = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   width: "36px",
   height: "36px"
-})), C = () => /* @__PURE__ */ e(k, {
-  children: /* @__PURE__ */ e(d, {
-    variant: "rounded",
-    width: "18px",
-    height: "18px"
-  })
-}), y = m("p")(({
-  theme: t
+}));
+const SkeletonCheckBox = () => {
+  return /* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rounded",
+      width: "18px",
+      height: "18px"
+    })
+  });
+};
+const ErrorLabel = styled$1("p")(({
+  theme
 }) => ({
-  ...t.typography.caption,
-  color: t.palette.error.main,
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
   marginRight: 14,
   marginLeft: 14
 }));
-function L({
-  name: t,
-  sizeCheck: n = "small",
-  ...l
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  ...other
 }) {
   const {
-    control: i
-  } = a(), s = u();
-  return /* @__PURE__ */ e(h, {
-    control: /* @__PURE__ */ e(c, {
-      name: t,
-      control: i,
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
       render: ({
-        field: o,
+        field,
         fieldState: {
-          error: r
+          error
+        }
+      }) => {
+        if (isSkeleton) {
+          return /* @__PURE__ */ jsx(SkeletonCheckBox, {});
         }
-      }) => s ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ f(g, {
-        children: [/* @__PURE__ */ e(x, {
-          size: n,
-          ...o,
-          checked: o.value
-        }), r?.message && /* @__PURE__ */ e(y, {
-          children: r?.message + ""
-        })]
-      })
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Checkbox, {
+            size: sizeCheck,
+            ...field,
+            checked: field.value
+          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+            children: error?.message + ""
+          })]
+        });
+      }
     }),
-    ...l
+    ...other
   });
 }
 export {
-  L as R
+  RHFCheckbox as R
 };

package/components/hook-form/RHFDateTime/index.9231a7c7.js

@@ -1,81 +1,94 @@
-import { useFormContext as c, Controller as f } from "react-hook-form";
-import { Skeleton as s, TextField as x } from "@mui/material";
-import { DateTimePicker as g } from "@mui/x-date-pickers";
-import { useModuleSkeleton as k, useEnvironment as F } from "@m4l/core";
-import { styled as v } from "@mui/material/styles";
-import { jsxs as C, jsx as t } from "react/jsx-runtime";
-const T = v("div")(({
-  theme: e
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { jsxs, jsx } from "react/jsx-runtime";
+const SKTRHFWrapperTextField = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   width: "100%",
   height: "42.25px",
   alignItems: "center",
   justifyContent: "space-between",
-  border: `1px solid ${e.palette.divider}`,
+  border: `1px solid ${theme.palette.divider}`,
   padding: "0 14px",
-  borderRadius: e.spacing(0.5)
-})), S = (e) => {
+  borderRadius: theme.spacing(0.5)
+}));
+const SkeletonRHFDateTime = (props) => {
   const {
-    skeletonWidth: n,
-    skeletonHeight: r
-  } = e;
-  return /* @__PURE__ */ C(T, {
-    children: [/* @__PURE__ */ t(s, {
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  return /* @__PURE__ */ jsxs(SKTRHFWrapperTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
-      width: n,
-      height: r
-    }), /* @__PURE__ */ t(s, {
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
       variant: "circular",
       width: "20px",
       height: "20px"
     })]
   });
 };
-function y(e) {
+function RHFDateTime(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonWidth = "50%",
+    skeletonHeight = 14
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
   const {
-    name: n,
-    autoComplete: r = "off",
-    skeletonWidth: l = "50%",
-    skeletonHeight: m = 14
-  } = e, d = k(), {
-    control: p
-  } = c(), {
     dfnsFormat: {
-      datetime_format: h,
-      datetime_mask: u
+      datetime_format,
+      datetime_mask
     }
-  } = F();
-  return d ? /* @__PURE__ */ t(S, {
-    skeletonWidth: l,
-    skeletonHeight: m
-  }) : /* @__PURE__ */ t(f, {
-    name: n,
-    control: p,
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
+      skeletonWidth,
+      skeletonHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: i,
+      field,
       fieldState: {
-        error: a
+        error
       }
-    }) => /* @__PURE__ */ t(g, {
-      ampm: !1,
-      inputFormat: h,
-      mask: u,
-      label: "",
-      value: i.value,
-      onChange: (o) => {
-        isNaN(o) ? i.onChange(void 0) : i.onChange(o);
-      },
-      renderInput: (o) => /* @__PURE__ */ t(x, {
-        autoComplete: r,
-        fullWidth: !0,
-        error: !!a,
-        helperText: a?.message,
-        ...o
-      })
-    })
+    }) => {
+      return /* @__PURE__ */ jsx(DateTimePicker, {
+        ampm: false,
+        inputFormat: datetime_format,
+        mask: datetime_mask,
+        label: "",
+        value: field.value,
+        onChange: (value) => {
+          if (!isNaN(value)) {
+            field.onChange(value);
+          } else {
+            field.onChange(void 0);
+          }
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          autoComplete,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          ...params
+        })
+      });
+    }
   });
 }
 export {
-  y as R
+  RHFDateTime as R
 };

package/components/hook-form/RHFMultiCheckbox/index.2680b3b6.js

@@ -1,34 +1,34 @@
-import { useFormContext as m, Controller as s } from "react-hook-form";
-import { FormGroup as C, FormControlLabel as h, Checkbox as x } from "@mui/material";
-import { jsx as o } from "react/jsx-runtime";
-function k({
-  name: n,
-  options: l,
-  ...c
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFMultiCheckbox({
+  name,
+  options,
+  ...other
 }) {
   const {
-    control: t
-  } = m();
-  return /* @__PURE__ */ o(s, {
-    name: n,
-    control: t,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: e
+      field
     }) => {
-      const u = (r) => e.value.includes(r) ? e.value.filter((a) => a !== r) : [...e.value, r];
-      return /* @__PURE__ */ o(C, {
-        children: l.map((r) => /* @__PURE__ */ o(h, {
-          control: /* @__PURE__ */ o(x, {
-            checked: e.value.includes(r),
-            onChange: () => e.onChange(u(r))
+      const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+      return /* @__PURE__ */ jsx(FormGroup, {
+        children: options.map((option) => /* @__PURE__ */ jsx(FormControlLabel, {
+          control: /* @__PURE__ */ jsx(Checkbox, {
+            checked: field.value.includes(option),
+            onChange: () => field.onChange(onSelected(option))
           }),
-          label: r,
-          ...c
-        }, r))
+          label: option,
+          ...other
+        }, option))
       });
     }
   });
 }
 export {
-  k as R
+  RHFMultiCheckbox as R
 };

package/components/hook-form/RHFPeriod/index.64a228d5.js

@@ -0,0 +1,55 @@
+import { styled } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { E as ErrorLabel } from "../../ErrorLabel/index.c8615f16.js";
+import { P as Period } from "../../Period/index.2941fbda.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error,
+          readOnly,
+          skeletonWidth,
+          skeletonHeight
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export {
+  RHFPeriod as R
+};

package/components/hook-form/RHFRadioGroup/index.b3335e13.js

@@ -1,43 +1,43 @@
-import { useFormContext as s, Controller as u } from "react-hook-form";
-import { RadioGroup as c, FormControlLabel as x, Radio as p, FormHelperText as f } from "@mui/material";
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
-function j({
-  name: l,
-  options: m,
-  getOptionLabel: e,
-  ...n
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  ...other
 }) {
   const {
-    control: a
-  } = s();
-  return /* @__PURE__ */ r(u, {
-    name: l,
-    control: a,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: d,
+      field,
       fieldState: {
-        error: t
+        error
       }
-    }) => /* @__PURE__ */ R("div", {
-      children: [/* @__PURE__ */ r(c, {
-        ...d,
-        row: !0,
-        ...n,
-        children: m.map((o, i) => /* @__PURE__ */ r(x, {
-          value: o,
-          control: /* @__PURE__ */ r(p, {}),
-          label: e?.length ? e[i] : o
-        }, o))
-      }), !!t && /* @__PURE__ */ r(f, {
-        error: !0,
+    }) => /* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx(RadioGroup, {
+        ...field,
+        row: true,
+        ...other,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
+          value: option,
+          control: /* @__PURE__ */ jsx(Radio, {}),
+          label: getOptionLabel?.length ? getOptionLabel[index] : option
+        }, option))
+      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
+        error: true,
         sx: {
           px: 2
         },
-        children: t.message
+        children: error.message
       })]
     })
   });
 }
 export {
-  j as R
+  RHFRadioGroup as R
 };

package/components/hook-form/RHFSelect/index.b6ca8bb2.js

@@ -1,36 +1,36 @@
-import { useFormContext as m, Controller as s } from "react-hook-form";
-import { TextField as u } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
-function x({
-  name: r,
-  children: o,
-  ...l
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFSelect({
+  name,
+  children,
+  ...other
 }) {
   const {
-    control: n
-  } = m();
-  return /* @__PURE__ */ t(s, {
-    name: r,
-    control: n,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: i,
+      field,
       fieldState: {
-        error: e
+        error
       }
-    }) => /* @__PURE__ */ t(u, {
-      ...i,
-      select: !0,
-      fullWidth: !0,
+    }) => /* @__PURE__ */ jsx(TextField, {
+      ...field,
+      select: true,
+      fullWidth: true,
       SelectProps: {
-        native: !0
+        native: true
       },
-      error: !!e,
-      helperText: e?.message,
-      ...l,
-      children: o
+      error: !!error,
+      helperText: error?.message,
+      ...other,
+      children
     })
   });
 }
 export {
-  x as R
+  RHFSelect as R
 };