@m4l/components 0.2.35 → 0.2.36

package/components/hook-form/RHFAutocomplete/index.1f2afb6b.js

@@ -1,429 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { useFormContext, Controller } from "react-hook-form";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
-import { I as Image } from "../../Image/index.b799c514.js";
-import { useMemo, useRef, useState, useEffect, createElement } from "react";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { unstable_composeClasses } from "@mui/base";
-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";
-import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.ad569afd.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.f8a3021b.js";
-const AutocompleteRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
-}));
-const WrapperOption = styled("li")(({
-  theme
-}) => ({
-  "& .m4l_image": {
-    marginRight: theme.spacing(1.5)
-  }
-}));
-const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
-const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
-const getNameDataTestId = (KEY) => {
-  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
-};
-function withRenderOption(getUrlImage, classes, imageWidth) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ jsxs(WrapperOption, {
-      ...optionProps,
-      className: classes.withImage,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("withImage")
-      } : {},
-      children: [/* @__PURE__ */ jsx(Image, {
-        src: getUrlImage(option),
-        width: imageWidth,
-        height: "100%"
-      }), /* @__PURE__ */ jsx(Typography, {
-        variant: "body",
-        children: optionProps.key
-      })]
-    });
-  };
-}
-const SkeletonRHFAutocomplete = (props) => {
-  const {
-    withImage,
-    classes,
-    hasLabel
-  } = props;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.skeletonRoot,
-    children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: "30%",
-      height: "16px"
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.skeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("skeleton")
-      } : {},
-      children: !withImage ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.skeletonContainerText,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: "50%",
-            height: "14px"
-          })
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16,
-          sx: {
-            minWidth: "16px"
-          }
-        })]
-      }) : /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular"
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.skeletonContainerText,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: "50%",
-            height: "14px"
-          })
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16,
-          sx: {
-            minWidth: "16px"
-          }
-        })]
-      })
-    })]
-  });
-};
-const componentName = "M4LRHFAutocomplete";
-generateUtilityClasses(componentName, [
-  "root",
-  "withImage",
-  "skeleton",
-  "label",
-  "popper",
-  "skeletonRoot",
-  "skeletonContainerText",
-  "iconDown",
-  "variantInfo",
-  "variantImage",
-  "isDisabled",
-  "imageWidthDefined",
-  "variantSuccess",
-  "variantWarning",
-  "variantError",
-  "sizeSmall",
-  "sizeMedium",
-  "isFocus",
-  "isTabSelected",
-  "chip"
-]);
-function getRHFAutocompleteClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.disabled && "isDisabled", ownerState.semantics === "info" && "variantInfo", ownerState.semantics === "success" && "variantSuccess", ownerState.semantics === "warning" && "variantWarning", ownerState.semantics === "error" && "variantError", ownerState.imageWidthDefined && "imageWidthDefined", ownerState.multiple && "multiple"],
-    withImage: ["withImage"],
-    skeleton: ["skeleton"],
-    label: ["label"],
-    popper: ["popper", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.imageWidthDefined && "imageWidthDefined"],
-    skeletonRoot: ["skeletonRoot"],
-    skeletonContainerText: ["SkeletonContainerText"],
-    iconDown: ["iconDown"],
-    chip: ["chip", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function RHFAutocomplete(props) {
-  const {
-    name: nameRHF,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    skeletonWidth = 100,
-    skeletonHeight = "18px",
-    options,
-    disabled,
-    getOptionUrlImage,
-    onOpen,
-    onClose,
-    loading,
-    variant,
-    helperMessage,
-    size = "small",
-    onChangeFilterParmsLocal,
-    imageWidth,
-    imageHeight,
-    mandatory,
-    mandatoryMessage,
-    multiple,
-    ...other
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    isFocus,
-    isTabSelected,
-    handlerFocus,
-    handlerOnKeyUp,
-    handlerOnBlur
-  } = useFormFocus();
-  const autocompleteRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const isDesktop = useResponsiveDesktop();
-  const onCloseLocal = (event, reason) => {
-    setOpen(false);
-    if (onClose)
-      onClose(event, reason);
-  };
-  const onOpenLocal = (event) => {
-    setOpen(true);
-    if (onOpen)
-      onOpen(event);
-  };
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(option);
-  };
-  const getOptionUrlImageLocal = (option) => {
-    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
-      return "";
-    }
-    return getOptionUrlImage(option);
-  };
-  const isOptionEqualToValueLocal = (option, value) => {
-    if (value === void 0 || value === null || option === null) {
-      return false;
-    }
-    return isOptionEqualToValue(option, value);
-  };
-  const {
-    control,
-    formState: {
-      errors
-    }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    semantics: currentVariant,
-    disabled,
-    imageWidthDefined: Boolean(imageWidth),
-    multiple: Boolean(multiple)
-  };
-  const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(AutocompleteRoot, {
-    className: classes.root,
-    tabIndex: 0,
-    onFocus: handlerFocus,
-    onBlur: handlerOnBlur,
-    onKeyUp: handlerOnKeyUp,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}`
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
-      name: nameRHF,
-      control,
-      render: ({
-        field: {
-          onChange,
-          value
-        },
-        fieldState: {
-          error
-        }
-      }) => {
-        const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
-        useEffect(() => {
-          if (!open && value === null && inputValue !== "") {
-            setInputValue("");
-          }
-          if (!open && value !== null && options.length === 0) {
-            onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
-          }
-        }, [value]);
-        const checkKeyDown = (e) => {
-          if (e.code === "Enter")
-            e.preventDefault();
-        };
-        return /* @__PURE__ */ jsxs(Fragment, {
-          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-            className: classes.label,
-            label,
-            mandatory,
-            mandatoryMessage,
-            helperMessage
-          }), /* @__PURE__ */ jsx(Autocomplete, {
-            autoComplete: true,
-            disableClearable: true,
-            multiple,
-            onKeyDown: checkKeyDown,
-            size,
-            ref: autocompleteRef,
-            autoSelect: false,
-            options,
-            getOptionLabel: getOptionLabelLocal,
-            inputValue,
-            clearOnBlur: false,
-            PopperComponent: (popperProps) => {
-              return /* @__PURE__ */ jsx(Popper, {
-                ...popperProps,
-                className: classes.popper,
-                placement: "bottom-start",
-                placeholder: void 0,
-                onPointerEnterCapture: () => {
-                },
-                onPointerLeaveCapture: () => {
-                },
-                sx: {
-                  ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
-                }
-              });
-            },
-            onInputChange: (_event, newValue, reason) => {
-              if (reason === "input") {
-                setInputValue(newValue);
-                if (onChangeFilterParmsLocal) {
-                  onChangeFilterParmsLocal(newValue, reason);
-                }
-              } else {
-                onChange(null);
-              }
-            },
-            isOptionEqualToValue: isOptionEqualToValueLocal,
-            value: Array.isArray(value) ? value : multiple ? value ? [value] : [] : value || null,
-            onOpen: onOpenLocal,
-            onClose: onCloseLocal,
-            open,
-            onChange: (_e, newValue) => {
-              if (!multiple && !Array.isArray(newValue)) {
-                setInputValue(getOptionLabelLocal(newValue));
-              } else {
-                setInputValue("");
-              }
-              onChange(Array.isArray(newValue) ? [...newValue] : newValue);
-            },
-            filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
-            loading,
-            loadingText: /* @__PURE__ */ jsx(Typography, {
-              variant: "body",
-              children: getLabel("rhf_autocomplete.loading_options")
-            }),
-            disabled,
-            noOptionsText: getLabel("rhf_autocomplete.no_options"),
-            renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
-            renderInput: (params) => {
-              return /* @__PURE__ */ jsx(TextField, {
-                ...params,
-                InputLabelProps: {
-                  ...params.InputLabelProps,
-                  shrink: true
-                },
-                fullWidth: true,
-                size,
-                SelectProps: {
-                  native: true
-                },
-                InputProps: {
-                  ...params.InputProps,
-                  startAdornment: /* @__PURE__ */ jsxs(Fragment, {
-                    children: [!multiple && withImage && value ? /* @__PURE__ */ jsx(Image, {
-                      src: getOptionUrlImageLocal(value),
-                      width: imageWidth,
-                      height: "100%"
-                    }, "ImageTextField") : null, params.InputProps.startAdornment]
-                  }),
-                  endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, {
-                    color: "inherit",
-                    size: 18
-                  }) : /* @__PURE__ */ jsx(IconButton, {
-                    className: classes.iconDown,
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
-                    onClick: (event) => onOpenLocal(event),
-                    disabled,
-                    size
-                  })
-                },
-                autoComplete: "off",
-                error: !!error,
-                ...other
-              });
-            },
-            ...multiple ? {
-              renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
-                const {
-                  key,
-                  ...restTagProps
-                } = getTagProps({
-                  index
-                });
-                return /* @__PURE__ */ createElement(Chip, {
-                  ...restTagProps,
-                  key,
-                  label: getOptionLabelLocal(option),
-                  className: classes.chip,
-                  icon: withImage && option ? /* @__PURE__ */ jsx(Image, {
-                    src: getOptionUrlImageLocal(option),
-                    width: imageWidth,
-                    height: imageHeight ?? "100%"
-                  }) : void 0,
-                  sx: {
-                    ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
-                  }
-                });
-              })
-            } : {}
-          }), currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, {
-            variant: currentVariant,
-            message: error?.message
-          }) : null]
-        });
-      }
-    }) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, {
-      withImage,
-      classes,
-      hasLabel: label
-    })
-  });
-}
-function getRHFAutocompleteComponentsDictionary() {
-  return ["rhf_autocomplete"];
-}
-export {
-  RHFAutocomplete as R,
-  getRHFAutocompleteComponentsDictionary as g
-};

package/components/hook-form/RHFCheckbox/index.eca64469.js

@@ -1,143 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormFocus } from "../../../index.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox.2a3b86c5.js";
-const RHFCheckboxRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LRHFCheckbox?.styleOverrides
-}));
-styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "8px"
-}));
-styled(Skeleton)(() => ({
-  width: "20px",
-  height: "20px",
-  borderRadius: "4px"
-}));
-const ContainerCheckTypography = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-generateUtilityClasses("M4LRHFCheckbox", [
-  "root",
-  "checkTypography",
-  "skeleton",
-  "small",
-  "medium",
-  "stateDisabled",
-  "stateError",
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFCheckboxUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFCheckbox", slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.sizeCheck === "small" && "small", ownerState.sizeCheck === "medium" && "medium", ownerState.disabled && "stateDisabled", ownerState.error && "stateError"],
-    skeleton: ["skeleton"],
-    checkTypography: ["checkTypography", ownerState.sizeCheck === "small" ? "small" : "medium", ownerState.disabled && "stateDisabled"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
-const getNameDataTestId = (KEY, NAME) => {
-  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
-};
-function RHFCheckbox(props) {
-  const {
-    name,
-    sizeCheck = "small",
-    label,
-    disabled = false,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const {
-    control,
-    formState: {
-      errors
-    }
-  } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const {
-    isFocus,
-    isTabSelected,
-    handlerFocus,
-    handlerOnKeyUp,
-    handlerOnBlur
-  } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    sizeCheck: !isDesktop ? "medium" : sizeCheck,
-    disabled,
-    error: errors[name] ? true : false
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(RHFCheckboxRoot, {
-    className: classes.root,
-    onFocus: handlerFocus,
-    onBlur: handlerOnBlur,
-    onKeyUp: handlerOnKeyUp,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root", name)
-    } : {},
-    children: /* @__PURE__ */ jsx(Controller, {
-      name,
-      control,
-      render: ({
-        field: {
-          onChange,
-          value
-        },
-        fieldState: {
-          error
-        }
-      }) => {
-        console.log("checkBox Field value", value);
-        return /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(ContainerCheckTypography, {
-            className: classes.checkTypography,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId("checkTypography", name)
-            } : {},
-            children: /* @__PURE__ */ jsx(CheckBox, {
-              size: sizeCheck,
-              onChange,
-              checked: value,
-              disabled: disabled ? true : false,
-              disableRipple: true,
-              label,
-              mandatory,
-              mandatoryMessage,
-              helperMessage,
-              htmlFor: name
-            })
-          }), error?.message && /* @__PURE__ */ jsx(HelperText, {
-            variant: "error",
-            message: error?.message + ""
-          })]
-        });
-      }
-    })
-  });
-}
-export {
-  RHFCheckbox as R
-};