@m4l/components 9.3.34-JT25112025.beta.2 → 9.3.34-JT26112025.beta.1

package/@types/export.d.ts

@@ -241,5 +241,8 @@ declare module '@mui/material/styles' {
     M4LIconsFormatter?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
     };
+    M4LImageFormatter?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+    };
   }
 }

package/@types/types.d.ts

@@ -304,6 +304,10 @@ import {
   IconsFormatterOwnerState,
   IconsFormatterSlotsType,
 } from '../components/formatters/IconsFormatter/types';
+import {
+  ImageFormatterOwnerState,
+  ImageFormatterSlotsType,
+} from '../components/formatters/ImageFormatter';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -397,6 +401,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: MFIsolationAppSlotsType;
     M4LTagsFormatter: TagsFormatterSlotsType;
     M4LIconsFormatter: IconsFormatterSlotsType;
+    M4LImageFormatter: ImageFormatterSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -489,6 +494,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: Partial<MFIsolationAppOwnerState>;
     M4LTagsFormatter: Partial<TagsFormatterOwnerState>;
     M4LIconsFormatter: Partial<IconsFormatterOwnerState>;
+    M4LImageFormatter: Partial<ImageFormatterOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -946,5 +952,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
       variants?: ComponentsVariants['M4LIconsFormatter'];
     };
+    M4LImageFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LImageFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+      variants?: ComponentsVariants['M4LImageFormatter'];
+    };
   }
 }

package/components/DataGrid/Datagrid.styles.js

@@ -24,42 +24,6 @@ const dataGridStyles = {
     flex: 1,
     overflow: "hidden",
     "& .rdg .MuiCheckbox-root": {
-      overflow: "visible",
-      padding: 0,
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.small.action,
-        height: theme.vars.size.mobile.small.action
-      } : {
-        width: theme.vars.size.desktop.small.action,
-        height: theme.vars.size.desktop.small.action
-      },
-      display: "inline-flex",
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: theme.size.borderRadius.r1,
-      "&:hover": {
-        backgroundColor: theme.vars.palette.default.hoverOpacity
-      },
-      "&:active": {
-        backgroundColor: theme.vars.palette.default.activeOpacity
-      },
-      "&.Mui-checked": {
-        "&:hover": {
-          backgroundColor: theme.vars.palette.primary.hoverOpacity,
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.hover
-          }
-        },
-        "&:active": {
-          backgroundColor: theme.vars.palette.primary.activeOpacity,
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.active
-          }
-        }
-      },
-      "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
-      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
@@ -306,6 +270,7 @@ const dataGridStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
+        scrollBehavior: "smooth",
         display: "grid",
         contain: "content",
         boxSizing: "border-box",
@@ -416,19 +381,33 @@ const dataGridStyles = {
           outline: `2px solid var(--rdg-selection-color)`,
           outlineOffset: "-2px"
         },
-        "&:has(> .MuiCheckbox-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
         "& .checkbox-checked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.enabled
-          }
+          "& path:first-of-type": {
+            fill: theme.vars.palette.primary.main
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
         },
         "& .checkbox-unChecked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
+          "& path": {
+            fill: theme.vars.palette.text.primary
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
         },
         "& .rdg-text-editor": {
           textAlign: "inherit",
@@ -694,54 +673,26 @@ const dataGridStyles = {
    * Estilos para el wrapper del CheckboxCellAdapter
    * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
    */
-  checkboxCellWrapper: ({ theme }) => ({
+  checkboxCellWrapper: ({ theme, ownerState }) => ({
     "& .checkbox-checked": {
-      "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.primary.enabled
-      }
+      "& path:first-of-type": {
+        fill: theme.vars.palette.primary.main
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
     },
     "& .checkbox-unChecked": {
-      "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.text.primary
-      }
+      "& path": {
+        fill: theme.vars.palette.text.primary
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
     },
     "& .MuiCheckbox-root": {
-      overflow: "visible",
-      padding: 0,
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.small.action,
-        height: theme.vars.size.mobile.small.action
-      } : {
-        width: theme.vars.size.desktop.small.action,
-        height: theme.vars.size.desktop.small.action
-      },
-      display: "inline-flex",
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: theme.size.borderRadius.r1,
-      "&:hover": {
-        backgroundColor: theme.vars.palette.default.hoverOpacity
-      },
-      "&:active": {
-        backgroundColor: theme.vars.palette.default.activeOpacity
-      },
-      "&.Mui-checked": {
-        "&:hover": {
-          backgroundColor: theme.vars.palette.primary.hoverOpacity,
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.hover
-          }
-        },
-        "&:active": {
-          backgroundColor: theme.vars.palette.primary.activeOpacity,
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.active
-          }
-        }
-      },
-      "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
-      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
@@ -942,28 +893,6 @@ const dataGridStyles = {
       }
     }
   }),
-  /**
-   * Placeholder editable
-   */
-  editablePlaceholder: ({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1)
-  }),
-  /**
-   * EditLabel
-   */
-  editLabel: ({ theme, ownerState }) => ({
-    width: "auto",
-    opacity: 1,
-    transition: "opacity 0.3s ease",
-    ...getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
-      "body"
-    )
-  }),
-  iconButtonEdit: () => ({}),
   /**
    * Header de la card personalizada (avatar + nombre + email)
    */

package/components/DataGrid/dictionary.d.ts

@@ -38,5 +38,4 @@ export declare const DICTIONARY: {
     VIEW_MODE_CARDS: string;
     TOOLTIP_VIEW_MODE: string;
     DETAILS: string;
-    EDIT_PLACEHOLDER: string;
 };

package/components/DataGrid/dictionary.js

@@ -37,8 +37,7 @@ const DICTIONARY = {
   VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
   VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
   TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,
-  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`,
-  EDIT_PLACEHOLDER: `${DATAGRID_ID_DICTIONARY}.edit_placeholder`
+  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`
 };
 export {
   DICTIONARY as D,

package/components/DataGrid/formatters/ColumnIconFormatter/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Clave única para identificar el componente IconAction en el sistema
+ */
+export declare const COLUMN_ICON_KEY_COMPONENT = "M4LColumnIconFormatter";

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.d.ts

@@ -0,0 +1,13 @@
+import { ColumnImageFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Componente interno que renderiza la celda y puede usar hooks
+ */
+export declare function ImageFormatterCell<TRow>(props: {
+    formatterProps: RenderCellProps<TRow>;
+    fieldValue: ColumnImageFormatterProps<TRow>['fieldValue'];
+    fieldText: ColumnImageFormatterProps<TRow>['fieldText'];
+    width?: ColumnImageFormatterProps<TRow>['width'];
+    height?: ColumnImageFormatterProps<TRow>['height'];
+    cover?: ColumnImageFormatterProps<TRow>['cover'];
+}): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getPropertyByString } from "@m4l/core";
+import { I as IMAGE_SIZES } from "./constants.js";
+import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
+import { I as ImageFormatter } from "../../../formatters/ImageFormatter/ImageFormatter.js";
+function ImageFormatterCell(props) {
+  const { formatterProps, fieldValue, fieldText, width, height, cover } = props;
+  const context = useContext(DataGridContext);
+  const viewMode = context?.viewMode ?? "cards";
+  const hasCustomSize = width !== void 0 && height !== void 0;
+  const finalWidth = viewMode === "cards" && hasCustomSize ? width : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const finalHeight = viewMode === "cards" && hasCustomSize ? height : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const src = getPropertyByString(formatterProps.row, fieldValue) ?? void 0;
+  const text = fieldText ? getPropertyByString(formatterProps.row, fieldText) ?? void 0 : void 0;
+  if (!src) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  return /* @__PURE__ */ jsx(
+    ImageFormatter,
+    {
+      src,
+      alt: text || src,
+      width: finalWidth,
+      height: finalHeight,
+      text,
+      cover
+    }
+  );
+}
+export {
+  ImageFormatterCell as I
+};

package/components/DataGrid/formatters/ColumnImageFormatter/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dimensiones de imagen según densidad en vista tabla
+ */
+export declare const IMAGE_SIZES: {
+    readonly cards: 60;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/constants.js

@@ -0,0 +1,6 @@
+const IMAGE_SIZES = {
+  cards: 60
+};
+export {
+  IMAGE_SIZES as I
+};

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.d.ts

@@ -0,0 +1,8 @@
+import { RenderCellProps } from 'react-data-grid';
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Formatter para mostrar imágenes con o sin texto
+ * @param props - Propiedades del formatter
+ * @returns Función que recibe RenderCellProps y retorna el ImageFormatter
+ */
+export declare function ColumnImageFormatter<TRow>(props: ColumnImageFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { I as ImageFormatterCell } from "./ImageFormatterCell.js";
+function ColumnImageFormatter(props) {
+  const { fieldValue, fieldText, cover } = props;
+  const width = "width" in props && props.width !== void 0 ? props.width : void 0;
+  const height = "height" in props && props.height !== void 0 ? props.height : void 0;
+  const formatter = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      ImageFormatterCell,
+      {
+        formatterProps,
+        fieldValue,
+        fieldText,
+        width,
+        height,
+        cover
+      }
+    );
+  };
+  formatter.__imageFormatterHeight = height ?? 60;
+  return formatter;
+}
+export {
+  ColumnImageFormatter as C
+};

package/components/DataGrid/formatters/ColumnImageFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export { useColumnImage } from './useColumnImage';
+export { ColumnImageFormatter } from './formatter';
+export * from './types';

package/components/DataGrid/formatters/ColumnImageFormatter/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnImageFormatter/types.d.ts

@@ -0,0 +1,44 @@
+import { DeepKeyOf } from '../../../../utils/types';
+interface ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Campo del row que contiene la URL de la imagen
+     */
+    fieldValue: DeepKeyOf<TRow>;
+    /**
+     * Campo opcional del row que contiene el texto a mostrar junto a la imagen
+     */
+    fieldText?: DeepKeyOf<TRow>;
+    /**
+     * Si es true, la imagen usa object-fit: cover (recorta si es necesario)
+     * Si es false o undefined, usa object-fit: contain (muestra completa)
+     * @default false
+     */
+    cover?: boolean;
+}
+/**
+ * Props sin dimensiones personalizadas (usa IMAGE_SIZES.cards por defecto)
+ */
+interface ColumnImageFormatterWithoutSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    width?: never;
+    height?: never;
+}
+/**
+ * Props con dimensiones personalizadas para vista cards
+ * IMPORTANTE: width y height deben proporcionarse juntas
+ */
+interface ColumnImageFormatterWithSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Ancho personalizado para la imagen en vista cards (en píxeles)
+     */
+    width: number;
+    /**
+     * Alto personalizado para la imagen en vista cards (en píxeles)
+     */
+    height: number;
+}
+/**
+ * Props para ColumnImageFormatter
+ * Puede tener dimensiones personalizadas (width Y height juntas) o ninguna
+ */
+export type ColumnImageFormatterProps<TRow> = ColumnImageFormatterWithoutSize<TRow> | ColumnImageFormatterWithSize<TRow>;
+export {};

package/components/DataGrid/formatters/ColumnImageFormatter/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.d.ts

@@ -0,0 +1,9 @@
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter para columnas con imágenes en DataGrid
+ * @param props - Propiedades del formatter
+ * @returns Objeto con el formatter
+ */
+export declare const useColumnImage: <TRow>(props: ColumnImageFormatterProps<TRow>) => {
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
+import { C as ColumnImageFormatter } from "./formatter.js";
+const useColumnImage = (props) => {
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(
+    () => ({
+      formatter: ColumnImageFormatter(stateProps)
+    }),
+    [stateProps]
+  );
+};
+export {
+  useColumnImage as u
+};

package/components/DataGrid/formatters/index.d.ts

@@ -11,3 +11,4 @@ export * from './ColumnUncertaintyFormatter';
 export * from './ColumnChipStatusFormatter';
 export * from './ColumnTagsFormatter';
 export * from './ColumnColorFormatter';
+export * from './ColumnImageFormatter';

package/components/DataGrid/hooks/useModalCardDetail.d.ts

@@ -3,4 +3,4 @@ import { UseModalDetailProps } from '../types';
  * Hook que renderiza el modal de detalle para cualquier vista
  * mostrando TODAS las columnas sin excepción
  */
-export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
+export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, }: UseModalDetailProps<TRow>) => (row: TRow) => void;

package/components/DataGrid/hooks/useModalCardDetail.js

@@ -14,8 +14,7 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
 const useModalDetail = ({
   columns,
   viewMode,
-  onRowsChange,
-  rows
+  onRowsChange
 }) => {
   const { getConfigColumns, size } = useDataGrid();
   const { openModal, closeModal } = useModal();
@@ -25,7 +24,6 @@ const useModalDetail = ({
   const handleOpenDetail = useCallback(
     (row) => {
       const viewColumnsConfig = getConfigColumns(viewMode);
-      const rowIndex = rows.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -44,8 +42,6 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
-                  rows,
-                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,
@@ -60,7 +56,6 @@ const useModalDetail = ({
     },
     [
       columns,
-      rows,
       onRowsChange,
       size,
       getConfigColumns,

package/components/DataGrid/icons.d.ts

@@ -27,5 +27,4 @@ export declare const pathIcons: {
     mail: string;
     smartphone: string;
     internet: string;
-    edit: string;
 };

package/components/DataGrid/icons.js

@@ -23,8 +23,7 @@ const pathIcons = {
   viewTable: "frontend/components/data_grid/assets/icons/table.svg",
   viewCards: "frontend/components/data_grid/assets/icons/card.svg",
   info: "frontend/components/data_grid/assets/icons/info.svg",
-  expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
-  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
+  expanded: "frontend/components/data_grid/assets/icons/expanded.svg"
 };
 export {
   pathIcons as p

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -50,10 +50,7 @@ export declare enum TableSlots {
     customCardFieldContent = "customCardFieldContent",
     customCardIconContainer = "customCardIconContainer",
     checkboxCellWrapper = "checkboxCellWrapper",
-    editorCellWrapper = "editorCellWrapper",
-    editablePlaceholder = "editablePlaceholder",
-    editLabel = "editLabel",
-    iconButtonEdit = "iconButtonEdit"
+    editorCellWrapper = "editorCellWrapper"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -54,9 +54,6 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["customCardIconContainer"] = "customCardIconContainer";
   TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
   TableSlots2["editorCellWrapper"] = "editorCellWrapper";
-  TableSlots2["editablePlaceholder"] = "editablePlaceholder";
-  TableSlots2["editLabel"] = "editLabel";
-  TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -76,9 +76,6 @@ export declare const ButtonHeaderActionsStyled: import('@emotion/styled').Styled
 export declare const NameColumnIconStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IconColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const NameColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const EditablePlaceholderStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const EditLabelStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
-export declare const IconButtonEditStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 /**
  * ****************
  * Slots TextEditor