@m4l/components 0.2.35 → 0.2.36

package/components/hook-form/RHFPeriod/index.70cfc422.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { unstable_composeClasses } from "@mui/base";
+import { useModuleSkeleton } from "@m4l/core";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.js";
+import { P as Period } from "../../Period/index.c6d1a95a.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/RHFPeriod/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RHFPeriodRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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/RHFRadioGroup/types.d.ts

@@ -1,4 +1,4 @@
-import { RadioProps } from "@mui/material";
+import { RadioProps } from '@mui/material';
 export interface RHFRadioGroupProps<TOption extends RadioProps> {
     name: string;
     defaultValue?: string;

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.fa97889a.js

@@ -0,0 +1,325 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+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.b0ee4965.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.0718eeac.js";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.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
+};

package/components/hook-form/RHFTextField/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const RHFTextFieldRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFTextField/subcomponents/Skeleton/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SkeletonTextFieldRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperSkeletonRHFTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFTextField/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { RHFTextFieldClassesType } from "../classes/types";
+import { RHFTextFieldClassesType } from '../classes/types';
 export declare const getNameDataTestId: (KEY: keyof RHFTextFieldClassesType) => string;

package/components/hook-form/RHFTextFieldPassword/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RHFTextFieldPasswordRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFTextFieldPassword/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { RHFTextFieldPasswordClassesType } from "../classes/types";
+import { RHFTextFieldPasswordClassesType } from '../classes/types';
 export declare const getNameDataTestId: (KEY: keyof RHFTextFieldPasswordClassesType) => string;

package/components/hook-form/RHFTextFieldPassword/types.d.ts

@@ -1,3 +1,2 @@
 import { RHFTextFieldProps } from '../RHFTextField/types';
-export interface RHFTextFieldPasswordProps extends RHFTextFieldProps {
-}
+export declare type RHFTextFieldPasswordProps = RHFTextFieldProps;

package/components/hook-form/RHFUpload/RHFUploadImage/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { RHFUploadImageUtilityClasses } from ".";
+import { RHFUploadImageUtilityClasses } from '.';
 export interface RHFUploadImageClassesType {
     root: string;
     dropZoneStyle: string;

package/components/hook-form/RHFUpload/RHFUploadImage/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperRHFUploadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const UploadImageRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;