@m4l/components 9.1.119 → 9.1.121

package/components/mui_extended/Select/Select.js

@@ -1,18 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEnvironment, useModuleSkeleton, useModuleDictionary, getPropertyByString } from "@m4l/core";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
-import { forwardRef, useState, useEffect, 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 { forwardRef, useMemo, useState, useCallback } from "react";
+import { A as ArrowDownStyled, a as AdormentStyled, S as SelectRootStyled, b as SkeletonSelectStyled, M as MenuItemListStyled, c as MenuItemNoOptionStyled, 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";
+import { C as Chip } from "../../Chip/Chip.js";
 import { S as SelectSlots } from "./slots/SelectEnum.js";
-const Select = forwardRef((props, ref) => {
-  const {
-    value,
+const Select = forwardRef(
+  function Select2({
+    value = null,
     options = [],
+    multiple,
     onChange,
     size = "medium",
     disabled = false,
@@ -21,155 +23,203 @@ const Select = forwardRef((props, ref) => {
     placeholder,
     className,
     dataTestId,
-    id,
     ...otherProps
-  } = props;
-  const { currentSize } = useComponentSize(size);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
-  const { getLabel } = useModuleDictionary();
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const [selectedValue, setSelectedValue] = useState(value ?? "");
-  const [open, setOpen] = useState(false);
-  const theme = useTheme();
-  useEffect(() => {
-    if (value && value !== selectedValue) {
-      setSelectedValue(value);
-    }
-  }, [value, selectedValue]);
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : error ? "error" : "primary",
-    theme.vars.palette.default
-  );
-  const ownerState = useMemo(() => ({
-    size: adjustedSize,
-    disabled,
-    error,
-    variant,
-    paletteColor
-  }), [adjustedSize, disabled, error, variant, paletteColor]);
-  const handleLocalChange = (event) => {
-    const newValue = event.target.value;
-    setSelectedValue(newValue);
-    setOpen(false);
-    const selectedOption = options.find((option) => String(option.id) === String(newValue));
-    if (selectedOption && onChange) {
-      onChange(selectedOption);
-    }
-  };
-  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 }, className: SELECT_CLASSES.skeletonSelect });
-  }
-  return /* @__PURE__ */ jsx(
-    SelectRootStyled,
-    {
-      ...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: handleLocalChange,
-      fullWidth: true,
+  }, ref) {
+    const { currentSize } = useComponentSize(size);
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const isSkeleton = useModuleSkeleton();
+    const { getLabel } = useModuleDictionary();
+    const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+    const arrowDropDownIcon = `${host_static_assets}/${environment_assets}/${ICON_ARROW_DOWN}`;
+    const selectedValue = useMemo(() => value, [value]);
+    const [open, setOpen] = useState(false);
+    const theme = useTheme();
+    const ownerState = useMemo(() => ({
+      size: adjustedSize,
       disabled,
       error,
-      renderValue,
-      size: adjustedSize,
-      open,
-      displayEmpty: true,
-      onClick: () => {
-        !disabled && setOpen(!open);
-      },
-      MenuProps: {
-        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
-            }
-          }
+      variant
+    }), [adjustedSize, disabled, error, variant]);
+    const handleLocalChange = useCallback((event) => {
+      const newValue = event.target.value;
+      if (!onChange) {
+        return;
+      }
+      if (multiple) {
+        const selectedOptions = options.filter((option) => newValue.includes(option.id));
+        if (selectedOptions.length > 0) {
+          onChange(selectedOptions);
         }
-      },
-      children: options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx(
-        MenuItemListStyled,
+      } else {
+        const selectedOption = options.find((option) => option.id === newValue);
+        if (selectedOption) {
+          onChange(selectedOption);
+        }
+      }
+    }, [multiple, onChange, options]);
+    const handleDelete = useCallback((optionToDelete) => {
+      if (multiple && Array.isArray(selectedValue)) {
+        const newSelectedOptions = options.filter((option) => option.id !== optionToDelete.id && selectedValue.includes(option.id));
+        onChange?.(newSelectedOptions);
+      }
+    }, [multiple, selectedValue, onChange, options]);
+    const ArrowIcon = useMemo(() => {
+      return () => /* @__PURE__ */ jsx(
+        ArrowDownStyled,
         {
-          className: SELECT_CLASSES.menuItemList,
           ownerState: { ...ownerState },
-          size: adjustedSize,
-          value: String(option.id),
+          icon: arrowDropDownIcon,
           disabled,
-          label: option.label,
-          selected: selectedValue === option.id,
-          startIcon: RenderIcon(option.startAdornment)
-        },
-        String(option.id)
-      )) : /* @__PURE__ */ jsx(
-        MenuItemNoOptionStyled,
-        {
-          ownerState: { ...ownerState },
-          className: SELECT_CLASSES.menuItemNoOptions,
           size: adjustedSize,
-          label: getLabel(SELECT_DICTIONARY.noOptions),
-          disabled: true
+          onClick: () => {
+            !disabled && setOpen(!open);
+          },
+          rotationAngle: open ? 180 : 0
+        }
+      );
+    }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, open]);
+    const RenderIcon = useCallback((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
+          }
+        );
+      }
+    }, [disabled, adjustedSize]);
+    const onMouseDownIconButtonChip = useCallback((e) => {
+      e.stopPropagation();
+    }, []);
+    const onKeyDownIconButtonChip = useCallback((e) => {
+      e.stopPropagation();
+    }, []);
+    const renderValue = () => {
+      if (!selectedValue || multiple && Array.isArray(selectedValue) && selectedValue.length === 0) {
+        return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { variant: "body", color: "text.disabled", ownerState: {}, children: placeholder });
+      }
+      if (multiple) {
+        if (!Array.isArray(selectedValue)) {
+          return null;
         }
-      )
+        const selectedOptions = selectedValue.map((optionId) => options.find((opt) => opt.id === optionId));
+        return /* @__PURE__ */ jsx(
+          RenderValueContainerStyled,
+          {
+            ownerState: { ...ownerState },
+            className: SELECT_CLASSES.renderValueContainer,
+            children: selectedOptions.map((option) => option ? /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size: adjustedSize,
+                label: option.label,
+                startIcon: option.startAdornment,
+                opacity: true,
+                onDeleted: () => handleDelete(option),
+                iconButtonProps: { onMouseDown: onMouseDownIconButtonChip, onKeyDown: onKeyDownIconButtonChip }
+              },
+              option.id
+            ) : null)
+          }
+        );
+      } else {
+        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 })
+        ] }) : "";
+      }
+    };
+    const onOpen = useCallback(() => {
+      setOpen(true);
+    }, []);
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+    const StyledSelect = useMemo(() => SelectRootStyled(), []);
+    if (isSkeleton) {
+      return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.skeletonSelect });
     }
-  );
-});
+    return /* @__PURE__ */ jsx(
+      StyledSelect,
+      {
+        ...otherProps,
+        ...getPropDataTestId(SELECT_KEY_COMPONENT, SelectSlots.root, dataTestId),
+        ref,
+        className: clsx(SELECT_CLASSES.root, SELECT_CLASSES[variant], className),
+        ownerState: { ...ownerState },
+        IconComponent: ArrowIcon,
+        multiple,
+        value: selectedValue ?? (multiple ? [] : ""),
+        onChange: handleLocalChange,
+        fullWidth: true,
+        disabled,
+        error,
+        renderValue,
+        open,
+        native: false,
+        onOpen,
+        onClose,
+        displayEmpty: true,
+        MenuProps: {
+          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) => {
+            const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((opt) => {
+              return opt === option.id;
+            }) : selectedValue === option.id;
+            return /* @__PURE__ */ jsx(
+              MenuItemListStyled,
+              {
+                className: SELECT_CLASSES.menuItemList,
+                ownerState: { ...ownerState },
+                size: adjustedSize,
+                value: option.id,
+                disabled,
+                selected: isSelected,
+                label: option.label,
+                startIcon: RenderIcon(option.startAdornment)
+              },
+              String(option.id)
+            );
+          }
+        ) : /* @__PURE__ */ jsx(
+          MenuItemNoOptionStyled,
+          {
+            ownerState: { ...ownerState },
+            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,39 +1,66 @@
 import { S as SELECT_CLASSES } from "./constants.js";
-import { a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getHeightSizeStyles, a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const selectStyles = {
   /**
    * Estilos para el componente Select
    */
-  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"
-      },
-      "& .MuiSelect-nativeInput": {
-        all: "unset",
-        display: "none"
-      },
-      "& .M4LImage-root": {
-        ...getSizeStyles(
-          theme,
-          theme.generalSettings.isMobile,
-          ownerState.size || "medium",
-          "base",
-          (val) => {
-            return {
-              height: val,
-              width: val
-            };
+  root: ({ theme, ownerState }) => {
+    const color = ownerState.disabled ? "default" : ownerState.error ? "error" : "primary";
+    return {
+      [`&.${SELECT_CLASSES.root}`]: {
+        width: "100%",
+        borderRadius: theme.vars.size.borderRadius.r1,
+        border: theme.vars.size.borderStroke.actionInput,
+        borderColor: ownerState.error ? theme.vars.palette[color].enabled : theme.vars.palette.border.default,
+        padding: 0,
+        "& .MuiOutlinedInput-notchedOutline": {
+          all: "unset",
+          display: "none"
+        },
+        '&:has(.MuiSelect-select[aria-expanded="true"])': {
+          border: `1px solid ${theme.vars.palette[color].focus}`
+        },
+        "& .M4LImage-root": {
+          ...getHeightSizeStyles(
+            theme.generalSettings.isMobile,
+            ownerState.size || "medium",
+            "base",
+            (val) => {
+              return {
+                height: val,
+                width: val
+              };
+            }
+          )
+        },
+        "& .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 ? theme.vars.palette[color].enabled : theme.vars.palette.border.default
+        },
+        "&:hover": {
+          backgroundColor: ownerState.disabled ? "unset" : theme.vars.palette[color].hoverOpacity
+        },
+        "&:focus-within": {
+          borderColor: theme.vars.palette[color].focus
+        },
+        '&[aria-hidden="true"]': {
+          pointerEvents: "none"
+        },
+        ...ownerState.error && {
+          borderColor: theme.vars.palette[color].enabled,
+          "&:hover": {
+            borderColor: theme.vars.palette[color].hover,
+            backgroundColor: theme.vars.palette[color].hoverOpacity
           }
-        )
-      },
-      "& .MuiButtonBase-root": {
+        },
         // Tamaño del componente
         ...getSizeStyles(
           theme,
@@ -42,57 +69,14 @@ const selectStyles = {
           "action",
           (height) => {
             return {
-              width: height
+              minHeight: height,
+              height: "unset"
             };
           }
         )
-      },
-      "& .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
-      },
-      '&[aria-hidden="true"]': {
-        pointerEvents: "none"
-      },
-      "&[inert]": {
-        pointerEvents: "none",
-        opacity: 0.5
-      },
-      ...ownerState.error && {
-        borderColor: ownerState.paletteColor?.enabled,
-        "&:hover": {
-          borderColor: ownerState.paletteColor?.hover,
-          backgroundColor: ownerState.paletteColor?.hoverOpacity
-        }
-      },
-      // Tamaño del componente
-      ...getSizeStyles(
-        theme,
-        theme.generalSettings.isMobile,
-        ownerState.size || "medium",
-        "action",
-        (height) => {
-          return {
-            minHeight: height
-          };
-        }
-      )
-    }
-  }),
+      }
+    };
+  },
   /**
    * Estilos para el ícono de la fila
    */
@@ -104,12 +88,15 @@ const selectStyles = {
   renderValueContainer: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    flexWrap: "wrap"
   }),
   arrowDown: {},
   renderValueTypography: () => ({
     lineHeight: "inherit!important"
   }),
+  // chip: () => ({
+  // }),
   /**
    * Styles for the label option
    */
@@ -122,14 +109,15 @@ const selectStyles = {
    * @returns {object} The styles for the label placeholder
    */
   labelPlaceholer: ({ theme }) => ({
-    paddingLeft: theme.vars.size.baseSpacings.sp1
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: theme.vars.size.baseSpacings.sp3
   }),
   /**
    * Styles for the menu item select
    * @param {object} theme - The theme object
    * @returns {object} The styles for the menu item select
    */
-  menuItemList: {},
+  menuItem: {},
   /**
    * Estilos del menuItem que no tiene opciones
    * @param {object} theme - The theme object

package/components/mui_extended/Select/constants.d.ts

@@ -16,7 +16,7 @@ export declare const COMBINATED_TEXTFIELD_ENUMS: {
     text: SelectComplementaryClasses.text;
     root: SelectSlots.root;
     adorment: SelectSlots.adorment;
-    menuItemList: SelectSlots.menuItemList;
+    menuItem: SelectSlots.menuItem;
     menuItemNoOptions: SelectSlots.menuItemNoOptions;
     skeletonSelect: SelectSlots.skeletonSelect;
     renderValueContainer: SelectSlots.renderValueContainer;

package/components/mui_extended/Select/slots/SelectEnum.d.ts

@@ -1,7 +1,7 @@
 export declare enum SelectSlots {
     root = "root",
     adorment = "adorment",
-    menuItemList = "menuItemList",
+    menuItem = "menuItem",
     menuItemNoOptions = "menuItemNoOptions",
     skeletonSelect = "skeletonMenuItem",
     renderValueContainer = "renderValueContainer",

package/components/mui_extended/Select/slots/SelectEnum.js

@@ -1,7 +1,7 @@
 var SelectSlots = /* @__PURE__ */ ((SelectSlots2) => {
   SelectSlots2["root"] = "root";
   SelectSlots2["adorment"] = "adorment";
-  SelectSlots2["menuItemList"] = "menuItemList";
+  SelectSlots2["menuItem"] = "menuItem";
   SelectSlots2["menuItemNoOptions"] = "menuItemNoOptions";
   SelectSlots2["skeletonSelect"] = "skeletonMenuItem";
   SelectSlots2["renderValueContainer"] = "renderValueContainer";