@m4l/components 0.2.35 → 1.0.0

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

@@ -1,34 +0,0 @@
-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
-  } = 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.e4e4530f.js

@@ -1,112 +0,0 @@
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { unstable_composeClasses } from "@mui/base";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.0412576c.js";
-import { P as Period } from "../../Period/index.3f89d8a4.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
-        }
-      }) => {
-        console.log("value RHFPeriod", value);
-        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.1ddb3d93.js

@@ -1,45 +0,0 @@
-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,
-  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.b6ca8bb2.js

@@ -1,36 +0,0 @@
-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
-  } = 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.1bfa601f.js

@@ -1,358 +0,0 @@
-import { useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
-import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.f8a3021b.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.6469f148.js";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.0412576c.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.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.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
-};