@m4l/components 9.1.70 → 9.1.72

package/components/mui_extended/Select/Select.js

@@ -2,12 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton, useModuleDictionary, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
-import { useState, useMemo } from "react";
-import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { I as Icon } from "../../Icon/Icon.js";
-import { S as SkeletonSelectStyled, a as SelectRootStyled, L as LabelPlaceholerStyled, R as RenderOptionContainerStyled, b as LabelOptionStyled, M as MenuItemSelectStyled, I as IconButtonStyled } from "./slots/SelectSlots.js";
+import { forwardRef, useState, useMemo } from "react";
+import { A as ArrowDownStyled, S as SkeletonSelectStyled, a as SelectRootStyled, M as MenuItemListStyled, b as MenuItemNoOptionStyled, c as AdormentStyled, L as LabelPlaceholerStyled, R as RenderValueContainerStyled, d as RenderValueTypography } from "./slots/SelectSlots.js";
+import { S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT, I as ICON_ARROW_DOWN } from "./constants.js";
+import { S as SELECT_DICTIONARY } from "./dictionary.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-const Select = (props) => {
+import { S as SelectSlots } from "./slots/SelectEnum.js";
+const Select = forwardRef((props, ref) => {
   const {
     value,
     options = [],
@@ -15,141 +17,154 @@ const Select = (props) => {
     size = "medium",
     disabled = false,
     error = false,
-    color = "default",
     variant = "outlined",
-    placeholder = "Selecciona una opcion",
-    className
+    placeholder,
+    className,
+    dataTestId,
+    id,
+    ...otherProps
   } = props;
   const { currentSize } = useComponentSize(size);
   const { host_static_assets, environment_assets } = useEnvironment();
   const isSkeleton = useModuleSkeleton();
   const { getLabel } = useModuleDictionary();
-  const theme = useTheme();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const [selectedValue, setSelectedValue] = useState(value || "");
+  const [selectedValue, setSelectedValue] = useState(value ?? "");
+  const [open, setOpen] = useState(false);
+  const theme = useTheme();
   const paletteColor = getPropertyByString(
     theme.vars.palette,
-    disabled ? "default" : error ? "error" : color,
+    disabled ? "default" : error ? "error" : "primary",
     theme.vars.palette.default
   );
-  const ownerState = {
+  const ownerState = useMemo(() => ({
     size: adjustedSize,
     disabled,
     error,
     variant,
-    paletteColor,
-    color
-  };
-  const optionsMap = useMemo(
-    () => new Map(options.map((opt) => [opt.id.toString(), opt])),
-    [options]
-  );
-  const handleChange = (event) => {
+    paletteColor
+  }), [adjustedSize, disabled, error, variant, paletteColor]);
+  const handleLocalChange = (event) => {
     const newValue = event.target.value;
     setSelectedValue(newValue);
-    const selectedOption = optionsMap.get(newValue);
-    if (selectedOption) {
-      onChange?.(selectedOption);
+    setOpen(false);
+    const selectedOption = options.find((option) => String(option.id) === String(newValue));
+    if (selectedOption && onChange) {
+      onChange(selectedOption);
     }
   };
-  const isOptionEqualToValueLocal = (optionId, currentValue) => optionId === currentValue;
-  const ArrowDropDownIcon = `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/chevron_down.svg`;
-  const arrowIcon = () => /* @__PURE__ */ jsx(
-    IconButtonStyled,
-    {
-      ownerState: { ...ownerState },
-      src: ArrowDropDownIcon,
-      disabled,
-      size: adjustedSize
+  const arrowDropDownIcon = `${host_static_assets}/${environment_assets}/${ICON_ARROW_DOWN}`;
+  const ArrowIcon = useMemo(() => {
+    return () => /* @__PURE__ */ jsx(
+      ArrowDownStyled,
+      {
+        ownerState: { ...ownerState },
+        icon: arrowDropDownIcon,
+        disabled,
+        size: adjustedSize,
+        onClick: () => {
+          !disabled && setOpen(!open);
+        },
+        rotationAngle: open ? 180 : 0
+      }
+    );
+  }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, open]);
+  const RenderIcon = (icon) => {
+    if (!icon) {
+      return null;
     }
-  );
+    if (typeof icon !== "string") {
+      return icon;
+    } else {
+      return /* @__PURE__ */ jsx(
+        AdormentStyled,
+        {
+          ownerState: {},
+          src: icon,
+          size: adjustedSize,
+          className: SELECT_CLASSES.renderValueStartAdorment,
+          disabled
+        }
+      );
+    }
+  };
+  const renderValue = () => {
+    if (!Boolean(selectedValue)) {
+      return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { variant: "body", color: "text.disabled", ownerState: {}, children: placeholder });
+    }
+    const selectedOption = options.find((option) => String(option.id) === String(selectedValue));
+    return selectedOption ? /* @__PURE__ */ jsxs(RenderValueContainerStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.renderValueContainer, children: [
+      selectedOption.startAdornment && RenderIcon(selectedOption.startAdornment),
+      /* @__PURE__ */ jsx(RenderValueTypography, { variant: "body", color: "text.primary", ownerState: {}, size: adjustedSize, className: SELECT_CLASSES.renderValueTypography, children: selectedOption.label })
+    ] }) : "";
+  };
   if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState } });
+    return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.skeletonSelect });
   }
-  const classSelect = getComponentSlotRoot("M4LSelectClass");
   return /* @__PURE__ */ jsx(
     SelectRootStyled,
     {
-      className: clsx(classSelect, className),
+      ...otherProps,
+      ...getPropDataTestId(SELECT_KEY_COMPONENT, SelectSlots.root, dataTestId),
+      id,
+      ref,
+      className: clsx(SELECT_CLASSES.root, SELECT_CLASSES[variant], className),
       ownerState: { ...ownerState },
+      IconComponent: ArrowIcon,
       value: selectedValue,
-      onChange: handleChange,
-      IconComponent: arrowIcon,
+      onChange: handleLocalChange,
       fullWidth: true,
       disabled,
       error,
-      renderValue: (selected) => {
-        if (!selected || selected === "" || !optionsMap.has(selected)) {
-          return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { size, ownerState: {}, children: placeholder });
-        }
-        const selectedOption = optionsMap.get(selected);
-        return /* @__PURE__ */ jsxs(RenderOptionContainerStyled, { size, ownerState: { ...ownerState }, children: [
-          selectedOption?.startAdornment && /* @__PURE__ */ jsx(Icon, { size, src: selectedOption.startAdornment }),
-          /* @__PURE__ */ jsx(LabelOptionStyled, { size, ownerState: { ...ownerState }, children: selectedOption?.label || placeholder })
-        ] });
+      renderValue,
+      size: adjustedSize,
+      open,
+      displayEmpty: true,
+      onClick: () => {
+        !disabled && setOpen(!open);
       },
       MenuProps: {
-        disableAutoFocusItem: true,
-        MenuListProps: {
-          onMouseMove: (event) => {
-            event.stopPropagation();
-          }
-        },
-        /**
-         * Handles the key down event for the menu.
-         * @param {React.KeyboardEvent} event - The key down event.
-         * @author SebastianM - automatic
-         * @createdAt 2024-12-23 10:47:53 - automatic
-         * @updatedAt 2025-01-03 11:42:15 - automatic
-         * @updatedUser Andrés Quintero - automatic
-         */
-        onKeyDown: (event) => {
-          const char = event.key.toLowerCase();
-          const matchingOption = options.find(
-            (option) => option.label.toLowerCase().startsWith(char)
-          );
-          if (matchingOption) {
-            const element = document.querySelector(
-              `[data-value='${matchingOption.id}']`
-            );
-            element?.scrollIntoView({ block: "nearest" });
-            setSelectedValue(matchingOption.id.toString());
-            const selectedOption = optionsMap.get(matchingOption.id.toString());
-            if (selectedOption) {
-              onChange?.(selectedOption);
+        sx: {
+          "& .MuiPaper-root": {
+            paddingTop: theme.vars.size.baseSpacings.sp3,
+            paddingBottom: theme.vars.size.baseSpacings.sp3,
+            paddingLeft: 0,
+            paddingRight: 0,
+            "& .MuiList-root": {
+              padding: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: theme.vars.size.baseSpacings.sp1
             }
           }
         }
       },
       children: options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx(
-        MenuItemSelectStyled,
+        MenuItemListStyled,
         {
+          className: SELECT_CLASSES.menuItemList,
           ownerState: { ...ownerState },
-          size,
-          value: option.id.toString(),
+          size: adjustedSize,
+          value: String(option.id),
           disabled,
           label: option.label,
-          selected: isOptionEqualToValueLocal(
-            option.id,
-            selectedValue
-          ),
-          startIcon: option.startAdornment,
-          endIcon: option.endAdornment,
-          "data-value": option.id
+          selected: selectedValue === option.id,
+          startIcon: RenderIcon(option.startAdornment)
         },
-        option.id
+        String(option.id)
       )) : /* @__PURE__ */ jsx(
-        MenuItemSelectStyled,
+        MenuItemNoOptionStyled,
         {
           ownerState: { ...ownerState },
-          selected: false,
-          size,
-          label: getLabel("select.no_options")
+          className: SELECT_CLASSES.menuItemNoOptions,
+          size: adjustedSize,
+          label: getLabel(SELECT_DICTIONARY.noOptions),
+          disabled: true
         }
       )
     }
   );
-};
+});
 export {
   Select as S
 };

package/components/mui_extended/Select/Select.styles.js

@@ -1,3 +1,5 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
+import { S as SELECT_CLASSES } from "./constants.js";
 const selectStyles = {
   /**
    * Estilos para el componente Select
@@ -6,185 +8,83 @@ const selectStyles = {
    * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  selectRoot: ({ theme, ownerState }) => ({
-    width: "100%",
-    paddingLeft: theme.vars.size.baseSpacings.sp1,
-    ...ownerState.error === true && {
-      "&.M4LSelectClass-root": {
-        borderColor: ownerState.paletteColor?.main
-      },
-      "&:hover fieldset": {
-        backgroundColor: theme.vars.palette.error.hoverOpacity,
-        borderColor: ownerState.paletteColor?.main
-      },
-      ...ownerState.variant === "text" && {
-        "&.M4LSelectClass-root": {
-          borderColor: ownerState.paletteColor?.main
-        }
+  root: ({ theme, ownerState }) => ({
+    [`&.${SELECT_CLASSES.root}`]: {
+      width: "100%",
+      borderRadius: theme.vars.size.borderRadius.r1,
+      border: theme.vars.size.borderStroke.actionInput,
+      borderColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.border.default,
+      padding: 0,
+      "& .MuiOutlinedInput-notchedOutline": {
+        all: "unset",
+        display: "none"
       },
-      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-        border: `${theme.vars.size.borderStroke.actionInput} ${ownerState.paletteColor?.main}`
+      "& .MuiSelect-nativeInput": {
+        all: "unset",
+        display: "none"
       },
-      "& .MuiIconButton-root": {
-        "& .M4LIconClass-root": {
-          backgroundColor: ownerState.paletteColor?.main
-        }
-      }
-    },
-    "& > .MuiPaper-root": {
-      padding: theme.vars.size.baseSpacings.sp2
-    },
-    "&:hover fieldset": {
-      backgroundColor: theme.vars.palette.primary.hoverOpacity,
-      borderColor: theme.vars.palette.border.default + "!important",
-      ...ownerState.error === true && {
-        backgroundColor: theme.vars.palette.error.hoverOpacity,
-        borderColor: theme.vars.palette.error.main + "!important"
-      }
-    },
-    "&.M4LSelectClass-root": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: theme.vars.size.baseSpacings.sp1,
-      borderRadius: theme.vars.size.borderRadius.r1,
-      "&:active": {
-        "& .MuiOutlinedInput-notchedOutline": {
-          borderTop: "transparent",
-          borderLeft: "transparent",
-          borderRight: "transparent"
-        },
-        "&.Mui-focused": {
-          "& .MuiIconButton-root": {
-            "& .M4LIconClass-root": {
-              backgroundColor: theme.vars.palette.primary.main,
-              ...ownerState.error === true && {
-                backgroundColor: ownerState.paletteColor?.main
-              }
-            }
+      "& .M4LImage-root": {
+        ...getHeightSizeStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "medium",
+          "base",
+          (val) => {
+            return {
+              height: val,
+              width: val
+            };
           }
-        }
+        )
       },
-      "&.Mui-focused": {
-        "&.Mui-focused": {
-          "& .MuiIconButton-root": {
-            "& .M4LIconClass-root": {
-              backgroundColor: theme.vars.palette.primary.main,
-              ...ownerState.error === true && {
-                backgroundColor: ownerState.paletteColor?.main
-              },
-              transform: "rotate(180deg)",
-              transition: "transform 0.3s ease"
-            }
+      "& .MuiButtonBase-root": {
+        // Tamaño del componente
+        ...getHeightSizeStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "medium",
+          "action",
+          (height) => {
+            return {
+              width: height
+            };
           }
-        }
+        )
       },
-      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-        border: `${theme.vars.size.borderStroke.actionInput} ${theme.vars.palette.primary.main}`,
-        ...ownerState.error === true && {
-          borderColor: ownerState.paletteColor?.main + "!important"
-        }
-      }
-    },
-    ...ownerState.variant === "text" && {
-      "&.M4LSelectClass-root": {
-        border: "none",
-        borderRadius: theme.vars.size.borderRadius.r1,
-        borderBottom: `${theme.vars.size.borderStroke.actionInput} ${theme.vars.palette.border.default}`,
-        padding: theme.vars.size.baseSpacings.sp1,
-        ...ownerState.error === true && {
-          borderColor: ownerState.paletteColor?.main,
-          "& .MuiIconButton-root": {
-            "& .M4LIconClass-root": {
-              backgroundColor: ownerState.paletteColor?.main
-            }
-          }
-        },
-        "&:active": {
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderTop: "transparent",
-            borderLeft: "transparent",
-            borderRight: "transparent"
-          },
-          "&.Mui-focused": {
-            "& .MuiIconButton-root": {
-              "& .M4LIconClass-root": {
-                backgroundColor: ownerState.paletteColor?.main
-              }
-            }
-          }
-        },
-        "&.Mui-focused": {
-          borderColor: theme.vars.palette.primary.main,
-          ...ownerState.error === true && {
-            borderColor: ownerState.paletteColor?.main + "!important"
-          },
-          "&.Mui-focused": {
-            "& .MuiIconButton-root": {
-              "& .M4LIconClass-root": {
-                backgroundColor: theme.vars.palette.primary.main,
-                ...ownerState.error === true && {
-                  backgroundColor: ownerState.paletteColor?.main
-                },
-                transform: "rotate(180deg)",
-                transition: "transform 0.3s ease"
-              }
-            }
-          }
-        },
-        "&:focus-active": {
-          borderTop: "transparent",
-          borderLeft: "transparent",
-          borderRight: "transparent"
-        },
-        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          border: "none"
+      "& .MuiSelect-select": {
+        padding: `${theme.vars.size.baseSpacings.sp1}!important`,
+        minHeight: "unset"
+      },
+      // Estilos para la variante text
+      [`&.${SELECT_CLASSES.text}`]: {
+        borderTop: 0,
+        borderRight: 0,
+        borderBottom: theme.vars.size.borderStroke.actionInput,
+        borderLeft: 0,
+        borderColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.border.default
+      },
+      "&:hover": {
+        backgroundColor: ownerState.disabled ? "unset" : ownerState.paletteColor?.hoverOpacity
+      },
+      "&:focus-within": {
+        borderColor: ownerState.paletteColor?.focus
+      },
+      ...ownerState.error && {
+        borderColor: ownerState.paletteColor?.enabled,
+        "&:hover": {
+          borderColor: ownerState.paletteColor?.hover,
+          backgroundColor: ownerState.paletteColor?.hoverOpacity
         }
       },
-      "& .MuiOutlinedInput-notchedOutline": {
-        minHeight: 0,
-        borderLeft: "transparent",
-        borderTop: "transparent",
-        borderRight: "transparent",
-        border: theme.vars.palette.primary.main,
-        ...ownerState.error === true && {
-          borderColor: ownerState.paletteColor?.main
+      // Tamaño del componente
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "action",
+        (height) => {
+          return {
+            minHeight: height
+          };
         }
-      }
-    },
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    },
-    "& .MuiSelect-select": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: theme.vars.size.baseSpacings.sp0,
-      "&::placeholder": {
-        color: theme.vars.palette.text.disabled
-      }
-    },
-    ...ownerState.disabled === true && {
-      borderColor: theme.vars.palette.border.disabled,
-      color: theme.vars.palette.text.disabled,
-      pointerEvents: "none"
+      )
     }
   }),
   /**
@@ -194,13 +94,7 @@ const selectStyles = {
    * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  iconButton: ({ theme }) => ({
-    position: "absolute",
-    right: theme.vars.size.baseSpacings.sp0,
-    top: "50%",
-    transform: "translateY(-50%)",
-    pointerEvents: "none"
-  }),
+  adorment: {},
   /**
    * Styles for the render option container
    * @returns {object} The styles for the render option container
@@ -209,28 +103,14 @@ const selectStyles = {
    * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  renderOptionContainer: ({ theme, ownerState }) => ({
+  renderValueContainer: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    color: theme.vars.palette.text.primary,
-    "& .M4LIconClass-root": {
-      backgroundColor: theme.vars.palette.text.primary
-    },
-    ...ownerState.error && {
-      "& .M4LIconClass-root": {
-        backgroundColor: theme.vars.palette.text.primary
-      }
-    },
-    "&:focus": {
-      "& .M4LIconClass-root": {
-        backgroundColor: theme.vars.palette.text.primary
-      }
-    },
-    ...ownerState.disabled && {
-      "& .M4LIconClass-root": {
-        backgroundColor: theme.vars.palette.text.disabled
-      }
-    }
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  arrowDown: {},
+  renderValueTypography: () => ({
+    lineHeight: "inherit!important"
   }),
   /**
    * Styles for the label option
@@ -252,35 +132,28 @@ const selectStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   labelPlaceholer: ({ theme }) => ({
-    color: theme.vars.palette.text.disabled,
-    zIndex: 100
+    paddingLeft: theme.vars.size.baseSpacings.sp1
   }),
   /**
-   * Styles for the menu options
+   * Styles for the menu item select
    * @param {object} theme - The theme object
-   * @returns {object} The styles for the menu options
+   * @returns {object} The styles for the menu item select
    * @author SebastianM - automatic
-   * @createdAt 2024-12-18 15:11:13 - automatic
+   * @createdAt 2024-12-26 14:16:33 - automatic
    * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  menuOptions: ({ theme }) => ({
-    padding: theme.vars.size.baseSpacings.sp2,
-    boxShadow: theme.vars.shadows[1]
-  }),
+  menuItemList: {},
   /**
-   * Styles for the menu item select
+   * Estilos del menuItem que no tiene opciones
    * @param {object} theme - The theme object
    * @returns {object} The styles for the menu item select
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  menuItemSelect: ({ theme }) => ({
-    paddingLeft: theme.vars.size.baseSpacings.sp2,
-    paddingRight: theme.vars.size.baseSpacings.sp2
-  }),
+  menuItemNoOptions: {},
   /**
    * Styles for the skeleton select component
    * @author SebastianM - automatic
@@ -295,25 +168,16 @@ const selectStyles = {
     alignItems: "center",
     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.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action",
+      (height) => {
+        return {
+          minHeight: `${height}!important`
+        };
       }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    )
   })
 };
 export {