@m4l/components 3.0.0 → 3.0.1

package/components/hook-form/RHFTextField/index.80b98b98.js

@@ -1,296 +0,0 @@
-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.7b6c1ee3.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index.db9e7ddb.js";
-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.f77cc2ab.js";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.js";
-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 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";
-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
-};