@m4l/components 9.3.24-JT04112025.beta.1 → 9.3.24-JT04112025.beta.2

package/@types/export.d.ts

@@ -235,5 +235,11 @@ declare module '@mui/material/styles' {
     M4LTextField?: {
       styleOverrides?: ComponentsOverrides<Theme>[' M4LTextField'];
     };
+    M4LTagsFormatter?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTagsFormatter'];
+    };
+    M4LIconsFormatter?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
+    };
   }
 }

package/@types/types.d.ts

@@ -292,7 +292,18 @@ import {
   ImageTextOwnerState,
   ImageTextSlotsType,
 } from '../components/ImageText/types';
-import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+import {
+  FormContainerOwnerState,
+  FormContainerSlotsType,
+} from '../components/FormContainer/types';
+import {
+  TagsFormatterOwnerState,
+  TagsFormatterSlotsType,
+} from '../components/formatters/TagsFormatter/types';
+import {
+  IconsFormatterOwnerState,
+  IconsFormatterSlotsType,
+} from '../components/formatters/IconsFormatter/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -381,6 +392,8 @@ declare module '@mui/material/styles' {
     M4LStepper: StepperSlotsType;
     M4LImageText: ImageTextSlotsType;
     M4LFormContainer: FormContainerSlotsType;
+    M4LTagsFormatter: TagsFormatterSlotsType;
+    M4LIconsFormatter: IconsFormatterSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -468,6 +481,8 @@ declare module '@mui/material/styles' {
     M4LStepper: Partial<StepperOwnerState>;
     M4LImageText: Partial<ImageTextOwnerState>;
     M4LFormContainer: Partial<FormContainerOwnerState>;
+    M4LTagsFormatter: Partial<TagsFormatterOwnerState>;
+    M4LIconsFormatter: Partial<IconsFormatterOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -900,5 +915,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LFormContainer'];
       variants?: ComponentsVariants['M4LFormContainer'];
     };
+    M4LTagsFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LTagsFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTagsFormatter'];
+      variants?: ComponentsVariants['M4LTagsFormatter'];
+    };
+    M4LIconsFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LIconsFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
+      variants?: ComponentsVariants['M4LIconsFormatter'];
+    };
   }
 }

package/components/CommonActions/components/ActionFormCancel/ActionFormCancel.js

@@ -10,23 +10,17 @@ import { D as DICTIONARY } from "../../dictionary.js";
 import { W as WindowConfirm } from "../../../WindowConfirm/WindowConfirm.js";
 import { B as ButtonRootStyled } from "./slots/ActionFormCancelSlots.js";
 function ActionFormCancel(props) {
-  const {
-    className,
-    onClose,
-    linkToCloseWindow,
-    "data-testid": dataTestId
-  } = props;
+  const { className } = props;
   const { getLabel } = useModuleDictionary();
   const { openModal } = useModal();
-  const { close, setFnQueryClose } = useWindowToolsMF();
+  const { close: closeWindow, setFnQueryClose: setQueryClose } = useWindowToolsMF();
   const { control } = useFormContext();
   const { isDirty } = useFormState({
     control
   });
   const onConfirmQuit = useCallback(() => {
-    close(false);
-    onClose?.();
-  }, [close, onClose]);
+    closeWindow();
+  }, []);
   const onClickCancel = useCallback(() => {
     if (isDirty) {
       openModal({
@@ -44,12 +38,10 @@ function ActionFormCancel(props) {
     } else {
       onConfirmQuit();
     }
-  }, [isDirty, openModal, getLabel, onConfirmQuit]);
+  }, [getLabel, isDirty, openModal]);
   useEffect(() => {
-    if (linkToCloseWindow) {
-      setFnQueryClose(onClickCancel);
-    }
-  }, [onClickCancel, setFnQueryClose, linkToCloseWindow]);
+    setQueryClose(onClickCancel);
+  }, []);
   return /* @__PURE__ */ jsx(
     ButtonRootStyled,
     {
@@ -57,8 +49,7 @@ function ActionFormCancel(props) {
       variant: "outlined",
       onClick: onClickCancel,
       className: clsx(classActoinFormCancelRoot, className),
-      label: getLabel(DICTIONARY.LABEL_CANCEL),
-      "data-testid": dataTestId
+      label: getLabel(DICTIONARY.LABEL_CANCEL)
     }
   );
 }

package/components/CommonActions/components/ActionFormCancel/types.d.ts

@@ -10,15 +10,6 @@ export interface ActionFormCancelProps extends ButtonProps {
     size?: Extract<Sizes, 'small' | 'medium'>;
     dictionaryId?: string;
     className?: string;
-    /**
-     * Cuando efectivamente se cierrar la ventana se ejecuta esta función.
-     */
-    onClose?: () => void;
-    /**
-     * Vicular la funcion de cierre de consulta con la funcion de cierre de la ventana.
-     */
-    linkToCloseWindow: boolean;
-    'data-testid'?: string;
 }
 export interface ActionFormCancelOwnerState {
     size?: Extract<Sizes, 'small' | 'medium'>;

package/components/DataGrid/DataGrid.js

@@ -39,7 +39,8 @@ function DataGrid(props) {
     externalSortSettings,
     externalFilterSettings,
     defaultViewMode,
-    cardsViewConfig
+    cardsViewConfig,
+    focusOnRowKey
   } = props;
   const {
     withSettings,
@@ -122,7 +123,10 @@ function DataGrid(props) {
                 onSelectedRowsChange,
                 rowKeyGetter,
                 onRowsChange,
-                cardsViewConfig
+                cardsViewConfig,
+                focusOnRowKey,
+                checkedRows,
+                onCheckedRowsChange
               }
             ),
             withPager && /* @__PURE__ */ jsx(

package/components/DataGrid/Datagrid.styles.js

@@ -315,8 +315,6 @@ const dataGridStyles = {
         display: "contents"
       },
       '& [role="columnheader"]': {
-        justifyContent: "center",
-        alignItems: "center",
         paddingTop: theme.vars.size.baseSpacings.sp2,
         paddingBottom: theme.vars.size.baseSpacings.sp2
       },
@@ -427,8 +425,6 @@ const dataGridStyles = {
         },
         "&.rdg-cell-frozen": {
           display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
           boxShadow: "unset",
           position: "sticky !important",
           zIndex: 1
@@ -437,6 +433,18 @@ const dataGridStyles = {
           position: "sticky !important",
           zIndex: 1
         },
+        // Ajuste de celda checkbox (No header)
+        '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
+          overflow: "visible",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        // Ajuste al checkbox (Header)
+        '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
+          justifyContent: "center",
+          alignItems: "center"
+        },
         "&:after": {
           content: `""`,
           borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
@@ -452,10 +460,13 @@ const dataGridStyles = {
           position: "sticky",
           top: 0,
           zIndex: 2,
-          justifyContent: "center",
-          alignItems: "center",
-          '&[aria-colindex="1"]': {
-            borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
+          // Ajuste de header checkbox
+          "&:has(> .MuiCheckbox-root)": {
+            borderTopLeftRadius: theme.vars.size.baseSpacings.sp2,
+            overflow: "visible",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
           }
         }
       },
@@ -463,9 +474,13 @@ const dataGridStyles = {
         ...theme.colorSchemes.finalTheme.typography.bodyDens,
         //ajuste de contenido filtro del DataGrid
         width: "100%",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
+        display: "-webkit-box !important",
+        WebkitBoxOrient: "vertical !important",
+        WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? "1 !important" : ownerState?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+        overflow: "hidden !important",
+        textOverflow: "ellipsis !important",
+        wordBreak: "break-word !important",
+        whiteSpace: "normal !important",
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -474,6 +489,22 @@ const dataGridStyles = {
         lineHeight: "var(--rdg-summary-row-height)!important",
         color: `${theme.vars.palette.text.secondary}`
       },
+      /**
+       * Estilos para las celdas de datos del grid (no headers, no checkbox)
+       * - .rdg-cell: Todas las celdas del grid
+       * - :not([role="columnheader"]): EXCLUYE las celdas de header
+       * - :not(:has(> .MuiCheckbox-root)): EXCLUYE las celdas que contienen checkbox
+       */
+      '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
+        display: "-webkit-box !important",
+        WebkitBoxOrient: "vertical !important",
+        WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? "1 !important" : ownerState?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+        overflow: "hidden !important",
+        textOverflow: "ellipsis !important",
+        wordBreak: "break-word !important",
+        whiteSpace: "normal !important",
+        lineHeight: ownerState?.currentRowHeightVariant === "compact" ? `${ownerState?.currentRowHeight}px !important` : ownerState?.currentRowHeightVariant === "confortable" ? `${(ownerState?.currentRowHeight ?? 48) / 3}px !important` : `${(ownerState?.currentRowHeight ?? 40) / 2}px !important`
+      },
       '& .rdg-cell[role="columnheader"].filter-cell': {
         "& .M4LDataGrid-draggableHeaderRoot": {
           gap: theme.vars.size.baseSpacings.sp3,
@@ -501,7 +532,6 @@ const dataGridStyles = {
       // Alineaciones
       "& .rdg-cell.rdg-cell-align-left": {
         textAlign: "start",
-        display: "inline",
         justifyContent: "center",
         alignContent: "center",
         alignItems: "center",
@@ -576,7 +606,6 @@ const dataGridStyles = {
       // Estilado de celdas de la cabecera
       "& .rdg-header-row .rdg-cell": {
         gridTemplateColumns: "auto",
-        placeContent: "center",
         boxShadow: "unset!important",
         borderBottom: theme.vars.size.borderStroke.container,
         borderColor: `${theme.vars.palette?.background.surface}!important`,
@@ -726,6 +755,12 @@ const dataGridStyles = {
       borderColor: theme.vars.palette.primary.selected
     }
   }),
+  /**
+   * Contenedor del contenido de la card
+   */
+  cardContentWrapper: () => ({
+    width: "100%"
+  }),
   /**
    * Header de la card con checkbox y acciones
    */
@@ -752,6 +787,15 @@ const dataGridStyles = {
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1
   }),
+  /**
+   * Contenido de la card (body)
+   */
+  cardContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    padding: theme.vars.size.density.compact
+  }),
   /**
    * Contenedor de las columnas de la card
    */
@@ -918,8 +962,8 @@ const dataGridStyles = {
     flexDirection: "column",
     lineHeight: "1",
     height: "100%",
-    justifyContent: "center",
-    textAlign: "center"
+    width: "100%",
+    justifyContent: "center"
   }),
   /**
    * Estilos para el icono de busqueda para los campos de ordenamiento en columnas
@@ -989,10 +1033,15 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor del nombre de la columna
    */
-  nameColumn: () => ({
-    textOverflow: "ellipsis",
+  nameColumn: ({ ownerState }) => ({
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
-    whiteSpace: "nowrap"
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    width: "100%"
   }),
   /**
    * Estilos para el contenedor del icono de la columna

package/components/DataGrid/constants.d.ts

@@ -1,3 +1,4 @@
+import { DataGridDensityConfig } from './types';
 export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
@@ -33,3 +34,21 @@ export declare const DATAGRID_ROW_HEADER_HEIGHTS: number[];
  * Alturas de las filas del DataGrid
  */
 export declare const DATAGRID_ROW_HEIGHTS: number[];
+/**
+ * Configuración de densidad para el DataGrid.
+ * Densidad estándar
+ */
+export declare const DATAGRID_DENSITIES_STANDARD: DataGridDensityConfig;
+/**
+ * Alturas de las filas del encabezado del DataGrid
+ */
+export declare const DATAGRID_ROW_HEADER_HEIGHTS_CONFORTABLE: number[];
+/**
+ * Alturas de las filas del DataGrid
+ */
+export declare const DATAGRID_ROW_HEIGHTS_CONFORTABLE: number[];
+/**
+ * Configuración de densidad para el DataGrid.
+ * Densidad confortable
+ */
+export declare const DATAGRID_DENSITIES_CONFORTABLE: DataGridDensityConfig;

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

@@ -1,7 +1,6 @@
 import { ColumnIconFormatterProps } from './types';
 import { RenderCellProps } from 'react-data-grid';
 /**
- * Function to format an icon in a column of a DataGrid
- * @template TRow - Tipo de datos de la fila
+ * ColumnIconFormatter es un formatter que renderiza un icono o varios iconos en una columna de un DataGrid
  */
 export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,10 @@
-import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
-import { r as renderIcon } from "./helpers/renderIcon.js";
+import { jsx } from "react/jsx-runtime";
+import { I as IconsFormatter } from "../../../formatters/IconsFormatter/IconsFormatter.js";
 function ColumnIconFormatter(props) {
   const { getIconProps } = props;
   return (renderProps) => {
     const iconProps = getIconProps(renderProps.row);
-    if (Array.isArray(iconProps)) {
-      return renderMultipleIcons(iconProps);
-    }
-    return renderIcon(iconProps);
+    return /* @__PURE__ */ jsx(IconsFormatter, { icons: iconProps });
   };
 }
 export {

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

@@ -1,3 +1,2 @@
 export { ColumnIconFormatter } from './formatter';
 export type { ColumnIconFormatterProps } from './types';
-export { useColumnIcon } from './useColumnIcon';

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

@@ -1,17 +1,15 @@
-import { default as React } from 'react';
 import { DeepKeyOf } from '../../../../utils/types';
 import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
 export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
 export type ColumnIconResponse = {
     iconUrl: string;
     tooltip?: string;
     onClick?: () => void;
-    Component?: React.ElementType;
     dataTestId?: string;
-    componentProps?: React.ComponentPropsWithoutRef<React.ElementType>;
     visible?: boolean;
     color?: IconColorDeep;
-    size?: 'small' | 'medium';
+    size?: Extract<Sizes, 'small' | 'medium'>;
 };
 export interface ColumnIconFormatterProps<TRow> {
     getIconProps: (obRowProps: TRow) => ColumnIconResponse | ColumnIconResponse[];

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

@@ -13,6 +13,11 @@ function ColumnSetCheckFormatter(parameters) {
         newCheckedRows.delete(rowKeyGetter(props.row));
       }
       setCheckedRows(newCheckedRows);
+      if (parameters.onAfterChange) {
+        parameters.onAfterChange();
+      } else if (props.column.onAfterChange) {
+        props.column.onAfterChange();
+      }
     };
     let disabled = false;
     if (disabledGetter) {
@@ -26,7 +31,8 @@ function ColumnSetCheckFormatter(parameters) {
         tabIndex: props.tabIndex,
         onChange,
         "aria-label": "Select"
-      }
+      },
+      `${rowKeyGetter(row)}-${checkedRows.has(rowKeyGetter(row))}`
     );
   };
   return formatter;

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

@@ -5,4 +5,5 @@ export type ColumnSetCheckFormatterProps<Row, TKey extends RowKey = RowKey> = {
     disabledGetter?: (row: Row) => boolean;
     rowKeyGetter: (row: Row) => TKey;
     useHook: (field: string) => [ReadonlySet<TKey>, (newHas: ReadonlySet<TKey>) => void];
+    onAfterChange?: () => void;
 };

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

@@ -0,0 +1,8 @@
+import { ColumnTagsFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar tags en una columna
+ * @param props - Propiedades del formatter
+ * @returns Componente TagFormatter
+ */
+export declare const ColumnTagsFormatter: <TRow>(props: ColumnTagsFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { T as TagsFormatter } from "../../../formatters/TagsFormatter/TagsFormatter.js";
+const ColumnTagsFormatter = (props) => {
+  const { fieldTags, size, className } = props;
+  return (renderProps) => {
+    const tags = getPropertyByString(
+      renderProps.row,
+      fieldTags.toString()
+    );
+    return /* @__PURE__ */ jsx(TagsFormatter, { tags, size, className });
+  };
+};
+export {
+  ColumnTagsFormatter as C
+};

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

@@ -0,0 +1,3 @@
+export { ColumnTagsFormatter } from './formatter';
+export type { ColumnTagsFormatterProps } from './types';
+export { useColumnTags } from './useColumnTags';

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,5 @@
+import { DeepKeyOf } from '../../../../utils/types';
+import { TagsFormatterProps } from '../../../formatters/TagsFormatter/types';
+export interface ColumnTagsFormatterProps<TRow> extends Pick<TagsFormatterProps, 'size' | 'className'> {
+    fieldTags: DeepKeyOf<TRow>;
+}

package/components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.d.ts

@@ -0,0 +1,9 @@
+import { ColumnTagsFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter, filter y customSort de la columna de tags
+ */
+export declare const useColumnTags: <TRow>(props: ColumnTagsFormatterProps<TRow>) => {
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    customFilter: (row: TRow, value: string) => boolean;
+    customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
+};

package/components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js

@@ -0,0 +1,60 @@
+import { getPropertyByString } from "@m4l/core";
+import { C as ColumnTagsFormatter } from "./formatter.js";
+import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { deepEqual } from "fast-equals";
+import { useState, useRef, useEffect, useMemo } from "react";
+const getCustomTagFilter = (props) => {
+  const { fieldTags } = props;
+  return (row, value) => {
+    const tags = getPropertyByString(
+      row,
+      getColumnKey(fieldTags),
+      null
+    );
+    if (!tags) {
+      return false;
+    }
+    const tagsArray = Array.isArray(tags) ? tags : [tags];
+    return tagsArray.some(
+      (tag) => tag.label.toLowerCase().includes(value.toLowerCase())
+    );
+  };
+};
+const getCustomTagSort = (props) => {
+  return (a, b) => {
+    const tagsA = getPropertyByString(
+      a,
+      getColumnKey(props.fieldTags),
+      null
+    );
+    const tagsB = getPropertyByString(
+      b,
+      getColumnKey(props.fieldTags),
+      null
+    );
+    const firstLabelA = tagsA ? Array.isArray(tagsA) ? tagsA[0]?.label : tagsA.label : "";
+    const firstLabelB = tagsB ? Array.isArray(tagsB) ? tagsB[0]?.label : tagsB.label : "";
+    return firstLabelA > firstLabelB ? 1 : firstLabelA < firstLabelB ? -1 : 0;
+  };
+};
+const useColumnTags = (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: ColumnTagsFormatter(stateProps),
+      customFilter: getCustomTagFilter(stateProps),
+      customSort: getCustomTagSort(stateProps)
+    }),
+    [stateProps]
+  );
+};
+export {
+  useColumnTags as u
+};

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

@@ -9,3 +9,4 @@ export * from './ColumnPriceFormatter';
 export * from './ColumnSetCheckFormatter';
 export * from './ColumnUncertaintyFormatter';
 export * from './ColumnChipStatusFormatter';
+export * from './ColumnTagsFormatter';

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

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