@m4l/components 1.0.0 → 1.0.2

package/components/hook-form/RHFMultiCheckbox/index.437e6ba3.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+function RHFMultiCheckbox({ name, options, ...other }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => {
+        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: option,
+            ...other
+          },
+          option
+        )) });
+      }
+    }
+  );
+}
+export {
+  RHFMultiCheckbox as R
+};

package/components/hook-form/RHFPeriod/index.c8868100.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { useModuleSkeleton } from "@m4l/core";
+import { c as useFormFocus } from "../../../vendor.3eadfa16.js";
+import { F as FieldLabel } from "../../FieldLabel/index.400a46e0.js";
+import { P as Period } from "../../Period/index.3d695534.js";
+const RHFPeriodRoot = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const componentName = "M4LRHFPeriod";
+generateUtilityClasses(componentName, [
+  "root",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFPeriodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const { control } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFPeriodRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Period,
+                {
+                  value,
+                  onChange,
+                  state: !!error === true ? "error" : state,
+                  readOnly,
+                  skeletonWidth,
+                  skeletonHeight,
+                  size
+                }
+              ),
+              error && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error.message || "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  RHFPeriod as R
+};

package/components/hook-form/RHFRadioGroup/index.11c0add8.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  getOptionValue,
+  ...other
+}) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(RadioGroup, { ...field, row: true, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            defaultValue: field.value,
+            value: getOptionValue(option),
+            control: /* @__PURE__ */ jsx(Radio, {}),
+            label: getOptionLabel(option)
+          },
+          getOptionValue(option)
+        )) }),
+        !!error && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { px: 2 }, children: error.message })
+      ] })
+    }
+  );
+}
+export {
+  RHFRadioGroup as R
+};

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

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

package/components/hook-form/RHFTextField/index.2ae1f130.js

@@ -0,0 +1,326 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
+import { forwardRef, useState, useEffect } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.87f4726c.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled } from "@mui/material/styles";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.0660ee9c.js";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { c as useFormFocus } from "../../../vendor.3eadfa16.js";
+import { F as FieldLabel } from "../../FieldLabel/index.400a46e0.js";
+const SkeletonTextFieldRoot = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+const WrapperSkeletonRHFTextField = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.vars.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1),
+  gap: "4px"
+}));
+const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
+const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
+const RHFTEXTFIELD_PREFIX = "RHFTextField";
+const getNameDataTestId$1 = (KEY) => {
+  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
+};
+const SkeletonTextField = (props) => {
+  const { skeletonWidth, skeletonHeight, ownerState, classes, hasLabel } = props;
+  const { type: variant } = ownerState;
+  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, { children: [
+    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
+    /* @__PURE__ */ jsx(
+      WrapperSkeletonRHFTextField,
+      {
+        className: classes.skeleton,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("skeleton") } : {},
+        children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" })
+        ] })
+      }
+    )
+  ] });
+};
+const RHFTextFieldRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFTextField?.styleOverrides
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.vars.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const componentName = "M4LRHFTextField";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "label",
+    "skeleton",
+    "variantText",
+    "variantPassword",
+    "variantInfo",
+    "isDisabled",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
+    "sizeSmall",
+    "sizeMedium",
+    "isFocus",
+    "isTabSelected"
+  ]
+);
+const getRHFTextFieldClassesByState = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.type === "password" ? "variantPassword" : "variantText",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.disabled && "isDisabled",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "error" && "variantError"
+    ],
+    label: ["label"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTextField = forwardRef((props, ref) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    label,
+    size = "small",
+    startIcon,
+    endIcon,
+    variant,
+    helperMessage = "",
+    disabled,
+    mandatory,
+    mandatoryMessage,
+    helperText,
+    ...other
+  } = props;
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(null);
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const ownerState = {
+    type: type === "password" ? "password" : "text",
+    size: !isDesktop ? "medium" : size,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    variant: currentVariant,
+    disabled
+  };
+  const classes = getRHFTextFieldClassesByState(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFTextFieldRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      role: "textbox",
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}` } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { onChange, value, name, ref: inputRef }, fieldState: { error } }) => {
+            const onInternalChange = (event) => {
+              if (type === "number") {
+                if (event.target.value) {
+                  onChange(Number(event.target.value));
+                  return;
+                }
+              }
+              onChange(event);
+            };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  variant: "outlined",
+                  disabled,
+                  ref,
+                  inputRef,
+                  InputLabelProps: { shrink: true },
+                  autoComplete,
+                  onChange: onInternalChange,
+                  value: type === "number" ? isNaN(value) ? 0 : value : value || "",
+                  name,
+                  inputProps: {
+                    ...process.env.NODE_ENV !== "production" ? {
+                      [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
+                    } : {}
+                  },
+                  fullWidth: true,
+                  error: !!error,
+                  type,
+                  ...startIcon || endIcon ? {
+                    InputProps: {
+                      ...{
+                        ...startIcon ? {
+                          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startIcon })
+                        } : {},
+                        ...endIcon ? {
+                          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endIcon })
+                        } : {}
+                      }
+                    }
+                  } : {},
+                  ...other
+                }
+              ),
+              currentVariant ? /* @__PURE__ */ jsx(
+                HelperText,
+                {
+                  variant: currentVariant,
+                  message: currentVariant !== "error" ? helperMessage : error?.message
+                }
+              ) : null
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        SkeletonTextField,
+        {
+          classes,
+          skeletonWidth,
+          skeletonHeight,
+          ownerState,
+          hasLabel: label
+        }
+      )
+    }
+  );
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPasswordRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
+}));
+generateUtilityClasses(
+  "M4LRHFTextFieldPassword",
+  [
+    "root"
+  ]
+);
+function getRHFTextFieldPasswordUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
+const getNameDataTestId = (KEY) => {
+  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
+};
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight,
+    size,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    RHFTextFieldPasswordRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: /* @__PURE__ */ jsx(
+        RHFTextField,
+        {
+          name,
+          label,
+          type: showPassword ? "text" : "password",
+          autoComplete: "on",
+          skeletonWidth,
+          skeletonHeight,
+          size,
+          mandatory,
+          mandatoryMessage,
+          helperMessage,
+          InputProps: {
+            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => setShowPassword(!showPassword),
+                variant: "line",
+                src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+              }
+            ) })
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  RHFTextField as R,
+  RHFTEXTFIELD_ROOT_TEST_ID as a,
+  RHFTEXTFIELD_INPUT_TEST_ID as b,
+  RHFTEXTFIELD_PREFIX as c,
+  RHFTextFieldPassword as d
+};