@m4l/components 9.1.56 → 9.1.57

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,52 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
-import { useTheme } from "@mui/material";
-import { forwardRef, useState, useMemo, useEffect, useCallback } from "react";
-import { w as withRenderOption } from "./renderOptions/index.js";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { forwardRef, useState, useEffect, useCallback, useMemo } from "react";
+import { r as renderOption } from "./renderOptions/index.js";
+import { Autocomplete as Autocomplete$1 } from "@mui/material";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { A as AutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled, C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled } from "./slots /AutocompleteSlots.js";
+import { C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled, S as SkeletonAutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled } from "./slots /AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
 const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
   const {
     getOptionLabel,
     isOptionEqualToValue,
-    skeletonWidth = 100,
     options,
     disabled,
     onOpen,
     onClose,
     loading,
     variant = "outlined",
-    helperMessage,
     size = "medium",
     onChangeFilterParmsLocal,
     multiple,
-    imageScale = true,
-    //Diferencia
-    imageRepeat,
-    // Diferencia
     getOptionUrlImage,
     // Diferencia
-    type = "outlined",
-    color = "primary",
     refresh,
     error = false,
     onChange,
-    value,
-    customError,
-    ...other
+    value
   } = props;
   const { getLabel } = useModuleDictionary();
-  useModuleSkeleton();
-  const theme = useTheme();
+  const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
   const [open, setOpen] = useState(false);
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  useMemo(
-    () => getOptionUrlImage !== void 0,
-    [getOptionUrlImage]
-  );
   const [selectedValue, setSelectedValue] = useState(
     value || (multiple ? [] : null)
   );
@@ -60,7 +45,16 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     }
     setSelectedValue(value || (multiple ? [] : null));
   }, [value, multiple, getOptionLabel]);
-  const handleDelete = (optionToDelete) => {
+  const isOptionEqualToValueLocal = useCallback(
+    (option, val) => {
+      if (val === null || val === void 0) {
+        return false;
+      }
+      return isOptionEqualToValue(option, val);
+    },
+    [isOptionEqualToValue]
+  );
+  const handleDelete = useCallback((optionToDelete) => {
     if (Array.isArray(selectedValue)) {
       const updatedValue = selectedValue.filter(
         (val) => !isOptionEqualToValueLocal(val, optionToDelete)
@@ -72,11 +66,11 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
         "removeOption"
       );
     }
-  };
-  const handleRefresh = () => {
+  }, [selectedValue, isOptionEqualToValueLocal, onChange]);
+  const handleRefresh = useCallback(() => {
     refresh?.();
     setOpen(true);
-  };
+  }, [refresh]);
   const handleChange = (event, newSelectedValue, reason) => {
     const updatedValue = multiple ? Array.isArray(newSelectedValue) ? newSelectedValue : [] : newSelectedValue;
     setSelectedValue(updatedValue);
@@ -91,27 +85,18 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       onChangeFilterParmsLocal(newValue, reason);
     }
   };
-  const isOptionEqualToValueLocal = useCallback(
-    (option, val) => {
-      if (val === null || val === void 0) {
-        return false;
-      }
-      return isOptionEqualToValue(option, val);
-    },
-    [isOptionEqualToValue]
-  );
   const onCloseLocal = (event, reason) => {
     setOpen(false);
     if (onClose) {
       onClose(event, reason);
     }
   };
-  const onOpenLocal = (event) => {
+  const onOpenLocal = useCallback((event) => {
     setOpen((currentState) => !currentState);
     if (onOpen) {
       onOpen(event);
     }
-  };
+  }, [onOpen]);
   const getOptionLabelLocal = useCallback(
     (option) => {
       if (typeof option === "string") {
@@ -124,26 +109,18 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     },
     [getOptionLabel]
   );
-  const getOptionUrlImageLocal = (option) => {
+  const getOptionUrlImageLocal = useCallback((option) => {
     if (option === void 0 || option === null || getOptionUrlImage === void 0) {
       return "";
     }
     return getOptionUrlImage(option);
-  };
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : color || "default",
-    theme.vars.palette.default
-  );
-  const ownerState = {
+  }, [getOptionUrlImage]);
+  const ownerState = useMemo(() => ({
     size: adjustedSize,
     variant,
     disabled,
-    paletteColor,
-    autocompleteColor: color,
-    imageScale: Boolean(imageScale),
     multiple: Boolean(multiple)
-  };
+  }), [adjustedSize, disabled, multiple, variant]);
   const [inputValue, setInputValue] = useState("");
   useEffect(() => {
     if (!open && value === null && inputValue !== "") {
@@ -168,16 +145,83 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       e.preventDefault();
     }
   };
+  const selectedOption = options.find((option) => {
+    return isOptionEqualToValueLocal(option, selectedValue);
+  });
+  const adornments = useMemo(() => {
+    const returnValue = {};
+    if (Array.isArray(selectedValue) && multiple) {
+      returnValue.startAdornment = selectedValue.map((option, index) => /* @__PURE__ */ jsx(
+        ChipStyled,
+        {
+          size: adjustedSize,
+          label: getOptionLabelLocal(option),
+          opacity: true,
+          onDeleted: () => handleDelete(option),
+          ownerState: { ...ownerState }
+        },
+        index
+      ));
+    } else {
+      if (getOptionUrlImage && selectedOption) {
+        returnValue.startAdornment = /* @__PURE__ */ jsx(
+          ImageStyled,
+          {
+            ownerState: { ...ownerState },
+            src: getOptionUrlImageLocal(selectedOption),
+            alt: getOptionLabelLocal(selectedOption)
+          }
+        );
+      }
+    }
+    if (loading) {
+      returnValue.endAdornment = /* @__PURE__ */ jsx(
+        CircularProgressStyled,
+        {
+          ownerState: { ...ownerState },
+          color: "primary",
+          size: adjustedSize
+        }
+      );
+    } else {
+      returnValue.endAdornment = /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
+        IconButtonStyled,
+        {
+          ownerState: { ...ownerState },
+          icon: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
+          onClick: handleRefresh,
+          disabled,
+          size: adjustedSize
+        }
+      ) : /* @__PURE__ */ jsx(
+        IconButtonStyled,
+        {
+          ownerState: { ...ownerState },
+          icon: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
+          onClick: (event) => onOpenLocal(event),
+          disabled,
+          size: adjustedSize
+        }
+      ) });
+    }
+    return returnValue;
+  }, [selectedValue, multiple, loading, adjustedSize, getOptionLabelLocal, ownerState, handleDelete, getOptionUrlImage, selectedOption, getOptionUrlImageLocal, refresh, host_static_assets, environment_assets, handleRefresh, disabled, onOpenLocal]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonAutocompleteStyled,
+      {
+        ownerState: { ...ownerState }
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    AutocompleteStyled,
+    Autocomplete$1,
     {
-      ownerState: { ...ownerState },
-      tabIndex: 0,
-      disableClearable: true,
       multiple,
       onKeyDown: checkKeyDown,
       size: adjustedSize,
       ref,
+      forcePopupIcon: false,
       autoSelect: false,
       options,
       getOptionLabel: getOptionLabelLocal,
@@ -202,14 +246,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       open,
       onInputChange: handleInputChange,
       onChange: handleChange,
-      filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
       loading,
       loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
       disabled,
       noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
+      filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
       renderOption: (renderProps, option) => {
         const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
-        return withRenderOption(color)(renderProps, {
+        return renderOption(renderProps, {
           ...typeof option === "object" && option !== null ? option : {},
           label: getOptionLabelLocal(option),
           selected: isSelected,
@@ -218,76 +262,30 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
         });
       },
       renderInput: (params) => {
-        const selectedOption = options.find((option) => {
-          return isOptionEqualToValueLocal(option, selectedValue);
-        });
+        const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
+        const { className: _classNoCount, ...otherInputProps } = InputProps;
+        const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
         return /* @__PURE__ */ jsx(
           RenderInputStyled,
           {
-            ownerState: { ...ownerState },
-            ...params,
-            color,
-            error,
-            size: adjustedSize,
             variant,
+            ownerState: { ...ownerState },
             InputLabelProps: {
-              ...params.InputLabelProps,
+              ...InputLabelProps,
               shrink: true
             },
-            fullWidth: true,
-            disabled,
-            SelectProps: { native: true },
+            inputProps: { ...otherinputProps },
+            error,
+            ...renderInputOhers,
+            autoComplete: "off",
             InputProps: {
-              ...params.InputProps,
-              autoComplete: "off",
-              // Asegura que sea string.
-              startAdornment: multiple ? Array.isArray(selectedValue) ? selectedValue.map((option, index) => /* @__PURE__ */ jsx(
-                ChipStyled,
-                {
-                  size: adjustedSize,
-                  label: getOptionLabelLocal(option),
-                  opacity: true,
-                  onDeleted: () => handleDelete(option),
-                  ownerState: { ...ownerState }
-                },
-                index
-              )) : null : type === "image" && !multiple && selectedOption ? /* @__PURE__ */ jsx(
-                ImageStyled,
-                {
-                  ownerState: { ...ownerState },
-                  src: getOptionUrlImageLocal(selectedOption),
-                  alt: getOptionLabelLocal(selectedOption)
-                }
-              ) : params.InputProps.startAdornment,
-              endAdornment: loading ? /* @__PURE__ */ jsx(
-                CircularProgressStyled,
-                {
-                  ownerState: { ...ownerState },
-                  color,
-                  size: adjustedSize
-                }
-              ) : /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
-                IconButtonStyled,
-                {
-                  ownerState: { ...ownerState },
-                  src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
-                  onClick: handleRefresh,
-                  disabled,
-                  size: adjustedSize
-                }
-              ) : /* @__PURE__ */ jsx(
-                IconButtonStyled,
-                {
-                  ownerState: { ...ownerState },
-                  src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
-                  onClick: (event) => onOpenLocal(event),
-                  disabled,
-                  size: adjustedSize
-                }
-              ) })
+              ...otherInputProps,
+              ...adornments
             },
-            ...other,
-            ref: params.InputProps.ref
+            SelectProps: { native: true },
+            size: adjustedSize,
+            fullWidth: true,
+            disabled
           }
         );
       }

package/components/mui_extended/Autocomplete/{AutocompleteStyles.js → Autocomplete.styles.js}

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
 const autocompleteSyles = {
   /**
    * Styles for the icon button component.
@@ -65,8 +66,8 @@ const autocompleteSyles = {
    * @updatedUser SebastianM - automatic
    */
   textField: ({ theme }) => ({
-    position: "relative",
-    height: "auto",
+    // position: 'relative',
+    height: "auto !important",
     "& .MuiInputBase-root": {
       padding: theme.vars.size.baseSpacings.sp1,
       gap: theme.vars.size.baseSpacings.sp1
@@ -92,8 +93,7 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  circularProgress: ({ theme, ownerState }) => ({
-    color: ownerState.paletteColor?.main,
+  circularProgress: ({ theme }) => ({
     position: "absolute",
     top: "18%",
     right: theme.vars.size.baseSpacings.sp2,
@@ -106,30 +106,22 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  skeletonAutocomplete: ({ theme, ownerState }) => ({
-    width: "100%",
-    background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.base,
-        minHeight: theme.vars.size.mobile.small.base
-      } : {
-        height: theme.vars.size.desktop.small.base,
-        minHeight: theme.vars.size.desktop.small.base
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.base,
-        minHeight: theme.vars.size.mobile.medium.base
-      } : {
-        height: theme.vars.size.desktop.medium.base,
-        minHeight: theme.vars.size.desktop.medium.base
-      }
-    }
-  })
+  skeletonAutocomplete: ({ theme, ownerState }) => {
+    return {
+      width: "100%",
+      background: theme.vars.palette.skeleton.transition,
+      display: "flex",
+      borderRadius: theme.vars.size.borderRadius.r1,
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState?.size || "medium",
+        "action",
+        (height) => ({ minHeight: height })
+      )
+    };
+  },
+  autocompleteRoot: {},
+  renderInputText: {}
 };
 export {
   autocompleteSyles as a

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -9,11 +9,11 @@ import { Sizes } from '@m4l/styles';
  * @updatedAt 2024-11-29 10:03:38 - automatic
  * @updatedUser SebastianM - automatic
  */
-export declare function withRenderOption<T>(color?: 'primary' | 'default' | 'error'): (optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
+export declare function renderOption<T>(optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
     label: string;
     selected?: boolean;
     disabled?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
-    size: Extract<Sizes, "small" | "medium">;
-}) => import("react/jsx-runtime").JSX.Element;
+    size: Extract<Sizes, 'small' | 'medium'>;
+}): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -1,24 +1,22 @@
 import { createElement } from "react";
-import { M as MenuItemStyled } from "../slots /AutocompleteSlots.js";
-function withRenderOption(color) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ createElement(
-      MenuItemStyled,
-      {
-        ownerState: {},
-        ...optionProps,
-        selected: option.selected,
-        color,
-        key: option.id || option.label,
-        label: option.label,
-        disabled: option.disabled,
-        startIcon: option.startAdornment,
-        endIcon: option.endAdornment,
-        size: option.size
-      }
-    );
-  };
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
+function renderOption(optionProps, option) {
+  const { className, ...otherOptionProps } = optionProps;
+  return /* @__PURE__ */ createElement(
+    MenuItem,
+    {
+      ...otherOptionProps,
+      selected: option.selected,
+      color: "primary",
+      key: option.id || option.label,
+      label: option.label,
+      disabled: option.disabled,
+      startIcon: option.startAdornment,
+      endIcon: option.endAdornment,
+      size: option.size
+    }
+  );
 }
 export {
-  withRenderOption as w
+  renderOption as r
 };