@m4l/components 3.1.6 → 3.1.8

package/components/hook-form/RHFAutocomplete/index-DS57m8AX.js

@@ -1,657 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createElement, useMemo, useRef, useState, useEffect } from "react";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { useFormFocus } from "../../../index.js";
-import { generateUtilityClasses, generateUtilityClass, Skeleton, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormContext, Controller } from "react-hook-form";
-import { unstable_composeClasses } from "@mui/base";
-import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index-CqpubQQr.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
-import { I as Image } from "../../Image/index-BxphCFC7.js";
-import { T as Typography } from "../../mui_extended/Typography/index-DXq1fG8k.js";
-import { H as HelperText } from "../../HelperText/index-sLK3dYG0.js";
-import { F as FieldLabel } from "../../FieldLabel/index-C8od8D0w.js";
-import { C as CircularProgress } from "../../mui_extended/CircularProgress/index-Bnnti_G6.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index-B8lOMybH.js";
-const componentName = "M4LRHFAutocomplete";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root",
-    "withImage",
-    "skeleton",
-    "label",
-    "popper",
-    "skeletonRoot",
-    "skeletonContainerText",
-    "containerRefreshDown",
-    "iconRefresh",
-    "iconDown",
-    /* states or variants of elements */
-    "variantInfo",
-    "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.multiple && "multiple"
-    ],
-    skeleton: ["skeleton"],
-    label: ["label"],
-    popper: [
-      "popper",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.imageScale && "imageScale",
-      ownerState.imageRepeat && "imageRepeat"
-    ],
-    skeletonRoot: ["skeletonRoot"],
-    skeletonContainerText: ["SkeletonContainerText"],
-    containerRefreshDown: ["containerRefreshDown"],
-    iconRefresh: ["iconRefresh"],
-    iconDown: ["iconDown"],
-    chip: [
-      "chip",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
-const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
-const getNameDataTestId = (KEY) => {
-  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
-};
-function withRenderOption(getUrlImage, classes) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ createElement(
-      WrapperOption,
-      {
-        ...optionProps,
-        key: optionProps.key,
-        className: classes.withImage,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {}
-      },
-      /* @__PURE__ */ jsx(Image, { src: getUrlImage(option) }),
-      /* @__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" } })
-        ] })
-      }
-    )
-  ] });
-};
-function ComponentTypeImage(props) {
-  const {
-    name: nameRHF,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeletonWidth = 100,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeletonHeight = "18px",
-    options,
-    disabled,
-    getOptionUrlImage,
-    onOpen,
-    onClose,
-    loading,
-    variant,
-    helperMessage,
-    size = "small",
-    onChangeFilterParmsLocal,
-    mandatory,
-    mandatoryMessage,
-    multiple,
-    imageScale = true,
-    imageRepeat,
-    refresh,
-    ...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((currentState) => !currentState);
-    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,
-    multiple: Boolean(multiple),
-    imageScale: Boolean(imageScale),
-    imageRepeat: Boolean(imageRepeat)
-  };
-  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",
-                        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: withRenderOption(getOptionUrlImageLocal, classes),
-                  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)
-                              },
-                              "ImageTextField"
-                            ) : null,
-                            params.InputProps.startAdornment
-                          ] }),
-                          endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : /* @__PURE__ */ jsxs("div", { className: classes.containerRefreshDown, children: [
-                            refresh && /* @__PURE__ */ jsx(
-                              IconButton,
-                              {
-                                className: classes.iconRefresh,
-                                src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
-                                onClick: () => refresh(),
-                                disabled,
-                                size
-                              }
-                            ),
-                            /* @__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)
-                            }
-                          ) : 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 ComponentTypeText(props) {
-  const {
-    name: nameRHF,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeletonWidth = 100,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeletonHeight = "18px",
-    options,
-    disabled,
-    onOpen,
-    onClose,
-    loading,
-    variant,
-    helperMessage,
-    size = "small",
-    onChangeFilterParmsLocal,
-    mandatory,
-    mandatoryMessage,
-    multiple,
-    refresh,
-    ...other
-  } = props;
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  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((currentState) => !currentState);
-    if (onOpen) onOpen(event);
-  };
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(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,
-    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",
-                        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: 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__ */ jsx(Fragment, { children: params.InputProps.startAdornment }),
-                          endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : /* @__PURE__ */ jsxs("div", { className: classes.containerRefreshDown, children: [
-                            refresh && /* @__PURE__ */ jsx(
-                              IconButton,
-                              {
-                                className: classes.iconRefresh,
-                                src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
-                                onClick: () => refresh(),
-                                disabled,
-                                size
-                              }
-                            ),
-                            /* @__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: void 0,
-                          sx: {
-                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
-                          }
-                        }
-                      );
-                    })
-                  } : {}
-                }
-              ),
-              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
-            ] });
-          }
-        }
-      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { classes, hasLabel: label })
-    }
-  );
-}
-function RHFAutocomplete(props) {
-  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
-}
-function getRHFAutocompleteComponentsDictionary() {
-  return ["rhf_autocomplete"];
-}
-export {
-  RHFAutocomplete as R,
-  getRHFAutocompleteComponentsDictionary as g
-};