@m4l/components 9.3.19-BE241025-beta.1 → 9.3.19-BE241025-beta.3

package/components/AccountPopover/subcomponents/MenuPopover/MenuPopover.js

@@ -64,7 +64,7 @@ const MenuPopover = (props) => {
         /* @__PURE__ */ jsx(DividerStyled, {}),
         asyncState === "loading" ? /* @__PURE__ */ jsx(CircularProgressStyled, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(MenuItemSettingsStyled, { skeletonWidth: `calc(${getLabel("account_popover.label_settings").length}ex + ${sp2})`, onClick: handleClickSetting, label: getLabel("account_popover.label_settings"), endIcon: `${host_static_assets}/${environment_assets}/${PATH_CONFIGURATION}` }),
-          data.map((option) => /* @__PURE__ */ jsx(MenuItemStyled, { variant: "body", skeletonWidth: `calc(${option.title.length}ex + ${sp2})`, onClick: () => handleItemClick(option), label: option.title }, `${option.title}-${option.module_id}`)),
+          data.length > 0 && Array.isArray(data) && data.map((option) => /* @__PURE__ */ jsx(MenuItemStyled, { variant: "body", skeletonWidth: `calc(${option.title.length}ex + ${sp2})`, onClick: () => handleItemClick(option), label: option.title }, `${option.title}-${option.module_id}`)),
           /* @__PURE__ */ jsx(DividerStyled, {})
         ] }),
         /* @__PURE__ */ jsx(MenuItemLogoutStyled, { variant: "body", skeletonWidth: `calc(${getLabel("account_popover.label_logout").length}ex + ${sp2})`, onClick: handleLogout, label: getLabel("account_popover.label_logout"), endIcon: `${host_static_assets}/${environment_assets}/${PATH_SIGN_OFF}` })

package/components/MFIsolationApp/MFIsolationApp.js

@@ -134,9 +134,9 @@ function MFIsolationApp(props) {
                 onLoad,
                 loadAreasFromNetwork: activeAreasNetwork,
                 loadCookiesFromNetwork: activeCookiesFromNetwork,
-                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
+                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", position: "absolute", children: [
                   appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
-                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
+                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", position: "relative", children })
                 ] })
               }
             )

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useMemo, useCallback } from "react";
 import { r as renderOption } from "./renderOptions/index.js";
 import { u as useValuesAndHandlers } from "./hooks/useValuesAndHandlers.js";
 import { u as useStartAdornments } from "./hooks/useStartAdornments.js";
 import { u as useEndAdornments } from "./hooks/useEndAdornments.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled, R as RenderInputStyled, P as PopperComponentStyled } from "./slots/AutocompleteSlots.js";
+import { P as PopperComponentStyled, R as RenderInputStyled, S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled } from "./slots/AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
 function AutocompleteComponent(props, ref) {
   const {
@@ -78,6 +78,81 @@ function AutocompleteComponent(props, ref) {
     open,
     readOnly
   });
+  const MemoizedPopperComponent = useCallback((popperProps) => {
+    const { color: popperColor, ...otherPopperProps } = popperProps;
+    return /* @__PURE__ */ jsx(
+      PopperComponentStyled,
+      {
+        ...otherPopperProps,
+        size: adjustedSize,
+        placement: "bottom-start",
+        ownerState: { ...ownerState }
+      }
+    );
+  }, [adjustedSize, ownerState]);
+  const memoizedRenderOption = useCallback((renderProps, option) => {
+    const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
+    return renderOption(renderProps, {
+      ...typeof option === "object" && option !== null ? option : {},
+      label: getOptionLabelLocal(option),
+      selected: isSelected,
+      disabled,
+      size
+    }, getOptionStartAdornment, getOptionEndAdornment);
+  }, [
+    multiple,
+    selectedValue,
+    isOptionEqualToValueLocal,
+    getOptionLabelLocal,
+    disabled,
+    size,
+    getOptionStartAdornment,
+    getOptionEndAdornment
+  ]);
+  const memoizedRenderInput = useCallback((params) => {
+    const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
+    const { className: _classNoCount, ...otherInputProps } = InputProps;
+    const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
+    return /* @__PURE__ */ jsx(
+      RenderInputStyled,
+      {
+        variant,
+        ownerState: { ...ownerState },
+        InputLabelProps: {
+          ...InputLabelProps,
+          shrink: true
+        },
+        inputProps: { ...otherinputProps, id: htmlFor },
+        error,
+        ...renderInputOhers,
+        autoComplete: "off",
+        InputProps: {
+          ...otherInputProps,
+          startAdornment: startAdornments,
+          endAdornment: endAdornments,
+          readOnly
+        },
+        SelectProps: { native: true },
+        size: adjustedSize,
+        fullWidth: true,
+        disabled,
+        placeholder
+      }
+    );
+  }, [
+    variant,
+    ownerState,
+    htmlFor,
+    error,
+    startAdornments,
+    endAdornments,
+    readOnly,
+    adjustedSize,
+    disabled,
+    placeholder
+  ]);
+  const memoizedLoadingText = useMemo(() => /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }), [adjustedSize, getLabel]);
+  const memoizedNoOptionsText = useMemo(() => /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }), [adjustedSize, getLabel]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonAutocompleteStyled,
@@ -99,18 +174,7 @@ function AutocompleteComponent(props, ref) {
       options,
       getOptionLabel: getOptionLabelLocal,
       clearOnBlur: false,
-      PopperComponent: (popperProps) => {
-        const { color: popperColor, ...otherPopperProps } = popperProps;
-        return /* @__PURE__ */ jsx(
-          PopperComponentStyled,
-          {
-            ...otherPopperProps,
-            size: adjustedSize,
-            placement: "bottom-start",
-            ownerState: { ...ownerState }
-          }
-        );
-      },
+      PopperComponent: MemoizedPopperComponent,
       isOptionEqualToValue: isOptionEqualToValueLocal,
       value: selectedValue,
       inputValue,
@@ -120,20 +184,11 @@ function AutocompleteComponent(props, ref) {
       onInputChange: handleInputChange,
       onChange: handleChange,
       loading,
-      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
+      loadingText: memoizedLoadingText,
       disabled,
-      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
+      noOptionsText: memoizedNoOptionsText,
       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 renderOption(renderProps, {
-          ...typeof option === "object" && option !== null ? option : {},
-          label: getOptionLabelLocal(option),
-          selected: isSelected,
-          disabled,
-          size
-        }, getOptionStartAdornment, getOptionEndAdornment);
-      },
+      renderOption: memoizedRenderOption,
       ListboxProps: {
         //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
         onScroll: (event) => {
@@ -148,37 +203,7 @@ function AutocompleteComponent(props, ref) {
           }
         }
       },
-      renderInput: (params) => {
-        const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
-        const { className: _classNoCount, ...otherInputProps } = InputProps;
-        const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
-        return /* @__PURE__ */ jsx(
-          RenderInputStyled,
-          {
-            variant,
-            ownerState: { ...ownerState },
-            InputLabelProps: {
-              ...InputLabelProps,
-              shrink: true
-            },
-            inputProps: { ...otherinputProps, id: htmlFor },
-            error,
-            ...renderInputOhers,
-            autoComplete: "off",
-            InputProps: {
-              ...otherInputProps,
-              startAdornment: startAdornments,
-              endAdornment: endAdornments,
-              readOnly
-            },
-            SelectProps: { native: true },
-            size: adjustedSize,
-            fullWidth: true,
-            disabled,
-            placeholder
-          }
-        );
-      }
+      renderInput: memoizedRenderInput
     }
   );
 }

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -108,9 +108,11 @@ const autocompleteSyles = {
       minWidth: "100%",
       maxHeight: "200px",
       "& .MuiAutocomplete-listbox": {
+        display: "grid",
+        gridTemplateColumns: "auto",
         height: "100%",
         "& .M4LMenuItem-root ": {
-          width: "fit-content",
+          width: "100%",
           "& .M4LTypography-root": {
             width: "fit-content",
             overflow: "unset"
@@ -120,7 +122,7 @@ const autocompleteSyles = {
     }
   }),
   /**
-   * Styles for the popover component.
+   * styles for the circular progress component.
    */
   circularProgress: {},
   /**

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js

@@ -5,9 +5,9 @@ import { I as Image } from "../../../Image/Image.js";
 import { a as autocompleteSyles } from "../Autocomplete.styles.js";
 import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
 import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
-import { S as Skeleton } from "../../Skeleton/Skeleton.js";
-import { T as TextField } from "../../TextField/TextField.js";
 import { P as Popper } from "../../Popper/Popper.js";
+import { T as TextField } from "../../TextField/TextField.js";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
 import { T as Typography } from "../../Typography/Typography.js";
 import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -17,6 +17,8 @@ const menuItemStyles = {
       paddingLeft: theme.vars.size.baseSpacings.sp4,
       paddingRight: theme.vars.size.baseSpacings.sp4,
       borderRadius: theme.vars.size.borderRadius.r0,
+      borderLeft: theme.vars.size.borderStroke.container,
+      borderLeftColor: "transparent",
       // Estilos base para el texto y el ícono
       "&&& .M4LTypography-root": {
         paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -46,10 +48,11 @@ const menuItemStyles = {
       //   outlineOffset: theme.vars.size.baseSpacings['sp0-5'],
       // },
       ...ownerState?.selected && {
-        borderLeft: theme.vars.size.borderStroke.container,
         borderLeftColor: paletteColor.enabled
       },
       "& .M4LImage-root": {
+        marginRight: 6,
+        marginLeft: 6,
         ...getHeightSizeStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.19-BE241025-beta.1",
+  "version": "9.3.19-BE241025-beta.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,7 +11,7 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.2.0-BE171025-beta.1",
+    "@m4l/graphics": "7.2.0-BE241025-beta.1",
     "@m4l/styles": "7.1.34-BE171025-beta.1",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",