@m4l/components 9.3.27 → 9.3.28

package/components/mui_extended/Select/Select.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton, useModuleDictionary } from "@m4l/core";
 import { useTheme } from "@mui/material";
+import { useForkRef } from "@mui/material/utils";
 import clsx from "clsx";
-import { forwardRef, useMemo, useState, useCallback } from "react";
+import { forwardRef, useMemo, useState, useRef, useCallback, useEffect } 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 { I as ICON_ARROW_DOWN, S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT } from "./constants.js";
 import { S as SELECT_DICTIONARY } from "./dictionary.js";
@@ -23,6 +24,7 @@ const Select = forwardRef(
     placeholder,
     className,
     dataTestId,
+    readOnly = false,
     ...otherProps
   }, ref) {
     const { currentSize } = useComponentSize(size);
@@ -33,22 +35,27 @@ const Select = forwardRef(
     const arrowDropDownIcon = `${host_static_assets}/${environment_assets}/${ICON_ARROW_DOWN}`;
     const selectedValue = useMemo(() => value, [value]);
     const [openLocal, setOpenLocal] = useState(false);
+    const selectRef = useRef(null);
     const theme = useTheme();
     const ownerState = useMemo(() => ({
       size: adjustedSize,
       disabled,
       error,
       variant,
-      multiple
-    }), [adjustedSize, disabled, error, variant, multiple]);
+      multiple,
+      readOnly
+    }), [adjustedSize, disabled, error, variant, multiple, readOnly]);
     const handleLocalChange = useCallback((event) => {
+      if (readOnly || disabled) {
+        return;
+      }
       const newValue = event.target.value;
       if (!onChange) {
         return;
       }
       if (multiple) {
-        const selectedOptions = options.filter((option) => newValue.includes(option.id));
-        if (selectedOptions.length > 0) {
+        if (Array.isArray(newValue)) {
+          const selectedOptions = options.filter((option) => newValue.includes(option.id));
           onChange(selectedOptions);
         }
       } else {
@@ -57,28 +64,41 @@ const Select = forwardRef(
           onChange(selectedOption);
         }
       }
-    }, [multiple, onChange, options]);
+    }, [multiple, onChange, options, readOnly, disabled]);
     const handleDelete = useCallback((optionToDelete) => {
+      if (readOnly || disabled) {
+        return;
+      }
       if (multiple && Array.isArray(selectedValue)) {
         const newSelectedOptions = options.filter((option) => option.id !== optionToDelete.id && selectedValue.includes(option.id));
         onChange?.(newSelectedOptions);
       }
-    }, [multiple, selectedValue, onChange, options]);
+    }, [multiple, selectedValue, onChange, options, readOnly, disabled]);
+    const handleToggleClick = useCallback(() => {
+      if (disabled || readOnly) {
+        return;
+      }
+      if (multiple) {
+        if (!openLocal) {
+          setOpenLocal(true);
+        }
+        return;
+      }
+      setOpenLocal(!openLocal);
+    }, [disabled, readOnly, multiple, openLocal]);
     const ArrowIcon = useMemo(() => {
       return () => /* @__PURE__ */ jsx(
         ArrowDownStyled,
         {
           ownerState: { ...ownerState },
           icon: arrowDropDownIcon,
-          disabled,
+          disabled: disabled || readOnly,
           size: adjustedSize,
-          onClick: () => {
-            !disabled && setOpenLocal(!openLocal);
-          },
+          onClick: handleToggleClick,
           rotationAngle: openLocal ? 180 : 0
         }
       );
-    }, [ownerState, arrowDropDownIcon, disabled, adjustedSize, openLocal]);
+    }, [ownerState, arrowDropDownIcon, disabled, readOnly, adjustedSize, openLocal, handleToggleClick]);
     const RenderIcon = useCallback((icon) => {
       if (!icon) {
         return null;
@@ -104,8 +124,8 @@ const Select = forwardRef(
       e.stopPropagation();
     }, []);
     const renderValue = () => {
-      if (!selectedValue || multiple && Array.isArray(selectedValue) && selectedValue.length === 0) {
-        return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { variant: "body", color: "text.disabled", children: placeholder });
+      if (selectedValue === null || selectedValue === void 0 || multiple && Array.isArray(selectedValue) && selectedValue.length === 0) {
+        return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { ownerState: { disabled, readOnly }, variant: "body", color: "text.disabled", children: placeholder });
       }
       if (multiple) {
         if (!Array.isArray(selectedValue)) {
@@ -124,7 +144,7 @@ const Select = forwardRef(
                 label: option.label,
                 startIcon: option.startAdornment,
                 opacity: true,
-                onDeleted: () => handleDelete(option),
+                onDeleted: readOnly || disabled ? void 0 : () => handleDelete(option),
                 iconButtonProps: { onMouseDown: onMouseDownIconButtonChip, onKeyDown: onKeyDownIconButtonChip }
               },
               option.id
@@ -135,17 +155,26 @@ const Select = forwardRef(
         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", size: adjustedSize, className: SELECT_CLASSES.renderValueTypography, children: selectedOption.label })
+          /* @__PURE__ */ jsx(RenderValueTypography, { ownerState: { disabled, readOnly }, variant: "body", color: "text.primary", size: adjustedSize, className: SELECT_CLASSES.renderValueTypography, children: selectedOption.label })
         ] }) : "";
       }
     };
     const onOpen = useCallback(() => {
+      if (disabled || readOnly) {
+        return;
+      }
       setOpenLocal(true);
-    }, []);
+    }, [disabled, readOnly]);
     const onClose = useCallback(() => {
       setOpenLocal(false);
     }, []);
+    useEffect(() => {
+      if (readOnly && openLocal) {
+        setOpenLocal(false);
+      }
+    }, [readOnly, openLocal]);
     const StyledSelect = useMemo(() => SelectRootStyled(), []);
+    const handleRef = useForkRef(selectRef, ref);
     if (isSkeleton) {
       return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState }, className: SELECT_CLASSES.skeletonSelect });
     }
@@ -154,7 +183,7 @@ const Select = forwardRef(
       {
         ...otherProps,
         ...getPropDataTestId(SELECT_KEY_COMPONENT, SelectSlots.root, dataTestId),
-        ref,
+        ref: handleRef,
         className: clsx(SELECT_CLASSES.root, SELECT_CLASSES[variant], className),
         ownerState: { ...ownerState },
         IconComponent: ArrowIcon,
@@ -165,29 +194,42 @@ const Select = forwardRef(
         disabled,
         error,
         renderValue,
-        open: openLocal,
+        open: readOnly ? false : openLocal,
         native: false,
         onOpen,
         onClose,
+        onClick: handleToggleClick,
         displayEmpty: true,
+        inputProps: {
+          ...otherProps.inputProps,
+          readOnly
+        },
         MenuProps: {
           disableScrollLock: true,
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left"
+          },
           sx: {
             "& .MuiPaper-root": {
-              paddingTop: theme.vars.size.baseSpacings.sp3,
-              paddingBottom: theme.vars.size.baseSpacings.sp3,
-              paddingLeft: 0,
-              paddingRight: 0,
+              padding: theme.vars.size.baseSpacings.sp1,
               maxHeight: "200px",
               overflow: "auto",
+              minWidth: `${(selectRef?.current?.offsetWidth ?? 0) + 1}px!important`,
+              // +1 para incluir el border del contenedor root.
               "& .MuiList-root": {
                 padding: 0,
-                display: "flex",
-                flexDirection: "column",
+                display: "grid",
+                gridTemplateColumns: "auto",
                 gap: theme.vars.size.baseSpacings.sp1,
-                width: "fit-content",
+                width: "fit-content!important",
+                minWidth: "100%",
                 "& .MuiMenuItem-root": {
-                  width: "fit-content"
+                  width: "100%"
                 }
               }
             }

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

@@ -13,6 +13,18 @@ const selectStyles = {
         border: theme.vars.size.borderStroke.actionInput,
         borderColor: ownerState?.error ? theme.vars.palette[color].enabled : theme.vars.palette.border.default,
         padding: 0,
+        cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer",
+        ...ownerState?.readOnly && {
+          "& .M4LSelect-renderValueTypography": {
+            userSelect: "text",
+            cursor: "text"
+          }
+        },
+        "& .MuiSelect-nativeInput": {
+          inset: 0,
+          border: "unset",
+          outline: "unset"
+        },
         "& .MuiOutlinedInput-notchedOutline": {
           all: "unset",
           display: "none"
@@ -41,7 +53,10 @@ const selectStyles = {
           boxSizing: "border-box",
           display: "flex",
           flexDirection: "column",
-          flexWrap: "unset"
+          flexWrap: "unset",
+          ...ownerState?.readOnly && {
+            cursor: "default"
+          }
         },
         // Estilos para la variante text
         [`&&&.${SELECT_CLASSES.text}`]: {
@@ -106,8 +121,12 @@ const selectStyles = {
     }
   }),
   arrowDown: {},
-  renderValueTypography: () => ({
-    lineHeight: "inherit!important"
+  /**
+   * Styles for the render value typography
+   */
+  renderValueTypography: ({ ownerState }) => ({
+    lineHeight: "inherit!important",
+    cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer"
   }),
   // chip: () => ({
   // }),
@@ -122,16 +141,32 @@ const selectStyles = {
    * Styles for the label placeholder
    * @returns {object} The styles for the label placeholder
    */
-  labelPlaceholer: ({ theme }) => ({
+  labelPlaceholer: ({ theme, ownerState }) => ({
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: theme.vars.size.baseSpacings.sp3
+    paddingRight: theme.vars.size.baseSpacings.sp3,
+    cursor: ownerState?.readOnly || ownerState?.disabled ? "default" : "pointer"
   }),
   /**
    * Styles for the menu item select
    * @param {object} theme - The theme object
    * @returns {object} The styles for the menu item select
    */
-  menuItem: {},
+  menuItem: {
+    "& .M4LMenuItem-menuItemContainer": {
+      width: "fit-content",
+      overflow: "unset",
+      "& .M4LImage-root": {
+        flexGrow: 1,
+        overflow: "auto",
+        flexShrink: 0
+      },
+      "& .M4LTypography-root": {
+        textOverflow: "unset",
+        overflow: "unset",
+        whiteSpace: "unset"
+      }
+    }
+  },
   /**
    * Estilos del menuItem que no tiene opciones
    * @param {object} theme - The theme object

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

@@ -45,6 +45,10 @@ export interface BaseSelectProps {
      * Identificador único del componente, para pruebas automatizadas.
      */
     dataTestId?: string;
+    /**
+     * Define si el Select está en modo solo lectura.
+     */
+    readOnly?: boolean;
 }
 export type SelectOptionValue<T extends string | number, Multiple> = Multiple extends true ? Array<SelectOption<T>> : SelectOption<T> | null;
 /**
@@ -72,8 +76,9 @@ export interface SelectProps<T extends string | number, Multiple extends boolean
  * Propiedades internas que definen el estado del componente `Select`.
  * paletteColor - Color de la paleta aplicado al Select.
  */
-export interface SelectOwnerState<T extends string | number, Multiple extends boolean | undefined = false> extends Pick<SelectProps<T, Multiple>, 'classes' | 'size' | 'error' | 'variant' | 'disabled' | 'multiple'> {
+export interface SelectOwnerState<T extends string | number, Multiple extends boolean | undefined = false> extends Pick<SelectProps<T, Multiple>, 'classes' | 'size' | 'error' | 'variant' | 'disabled' | 'multiple' | 'readOnly'> {
     disabled?: boolean;
+    readOnly?: boolean;
 }
 /**
  * Define los tipos de slots disponibles en el Select.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.27",
+  "version": "9.3.28",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -64,7 +64,8 @@
     "attr-accept": "2.2.2",
     "@vitejs/plugin-react": "4.3.4",
     "storybook": "8.3.4",
-    "@storybook/react": "8.3.4"
+    "@storybook/react": "8.3.4",
+    "rollup": "4.52.5"
   },
   "overrides": {
     "glob": "^10.4.5",
@@ -73,7 +74,8 @@
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "react-dom": "18.3.1",
-    "attr-accept": "2.2.2"
+    "attr-accept": "2.2.2",
+    "rollup": "4.52.5"
   },
   "files": [
     "*"