@m4l/components 9.3.23 → 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/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/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;

package/components/DataGrid/hooks/useModalCardDetail.js

@@ -3,7 +3,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useCallback } from "react";
 import { u as useModal } from "../../../hooks/useModal/index.js";
-import { b as ContentModalSettingStyled, D as DataGridRootStyled } from "../slots/DataGridSlot.js";
+import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../slots/DataGridSlot.js";
 import { p as pathIcons } from "../icons.js";
 import { C as CardDetails } from "../subcomponents/Cards/subcomponents/CardDetails/index.js";
 import { D as DICTIONARY } from "../dictionary.js";
@@ -12,7 +12,6 @@ import { A as ActionsContainer } from "../../CommonActions/components/ActionsCon
 import { W as WindowBase } from "../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
 const useModalDetail = ({
-  row,
   columns,
   viewMode,
   onRowsChange
@@ -22,52 +21,54 @@ const useModalDetail = ({
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
-  const onOpenDetail = useCallback(() => {
-    const viewColumnsConfig = getConfigColumns(viewMode);
-    openModal({
-      initialWidth: 500,
-      initialHeight: 680,
-      fullScreen: isMobile,
-      window: /* @__PURE__ */ jsx(
-        WindowBase,
-        {
-          title: getLabel(DICTIONARY.DETAILS),
-          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.info}`,
-          onClose: closeModal,
-          className: "detail-modal",
-          variant: "outlined",
-          emergeType: "modal",
-          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
-            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
-              CardDetails,
-              {
-                row,
-                columns,
-                viewColumnsConfig,
-                onRowsChange,
-                size: size || "medium"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }) })
-          ] })
-        }
-      )
-    });
-  }, [
-    row,
-    columns,
-    viewMode,
-    onRowsChange,
-    size,
-    getConfigColumns,
-    openModal,
-    closeModal,
-    getLabel,
-    host_static_assets,
-    environment_assets,
-    isMobile
-  ]);
-  return onOpenDetail;
+  const handleOpenDetail = useCallback(
+    (row) => {
+      const viewColumnsConfig = getConfigColumns(viewMode);
+      openModal({
+        initialWidth: 500,
+        initialHeight: 680,
+        fullScreen: isMobile,
+        window: /* @__PURE__ */ jsx(
+          WindowBase,
+          {
+            title: getLabel(DICTIONARY.DETAILS),
+            iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.info}`,
+            onClose: closeModal,
+            className: "detail-modal",
+            variant: "outlined",
+            emergeType: "modal",
+            children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
+              /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
+                CardDetails,
+                {
+                  row,
+                  columns,
+                  viewColumnsConfig,
+                  onRowsChange,
+                  size: size || "medium"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }) })
+            ] })
+          }
+        )
+      });
+    },
+    [
+      columns,
+      onRowsChange,
+      size,
+      getConfigColumns,
+      openModal,
+      closeModal,
+      getLabel,
+      host_static_assets,
+      environment_assets,
+      isMobile,
+      viewMode
+    ]
+  );
+  return handleOpenDetail;
 };
 export {
   useModalDetail as u

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

@@ -33,9 +33,11 @@ export declare enum TableSlots {
     textToggleCardButton = "textToggleCardButton",
     card = "card",
     cardsContainer = "cardsContainer",
+    cardContentWrapper = "cardContentWrapper",
     cardHeader = "cardHeader",
     cardHeaderLeft = "cardHeaderLeft",
     cardHeaderRight = "cardHeaderRight",
+    cardContent = "cardContent",
     containerLabelValueColumn = "containerLabelValueColumn",
     contentWrapperColumn = "contentWrapperColumn",
     cardDetailContainer = "cardDetailContainer",

package/components/DataGrid/slots/DataGridEnum.js

@@ -36,9 +36,11 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["textToggleCardButton"] = "textToggleCardButton";
   TableSlots2["card"] = "card";
   TableSlots2["cardsContainer"] = "cardsContainer";
+  TableSlots2["cardContentWrapper"] = "cardContentWrapper";
   TableSlots2["cardHeader"] = "cardHeader";
   TableSlots2["cardHeaderLeft"] = "cardHeaderLeft";
   TableSlots2["cardHeaderRight"] = "cardHeaderRight";
+  TableSlots2["cardContent"] = "cardContent";
   TableSlots2["containerLabelValueColumn"] = "containerLabelValueColumn";
   TableSlots2["contentWrapperColumn"] = "contentWrapperColumn";
   TableSlots2["cardDetailContainer"] = "cardDetailContainer";

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

@@ -44,7 +44,9 @@ export declare const CardStyled: import('@emotion/styled').StyledComponent<any,
 export declare const CardHeaderStyled: 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 CardHeaderLeftStyled: 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 CardHeaderRightStyled: 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 CardsContainerStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const CardContentWrapperStyled: 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 CardContentStyled: 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 CardsContainerStyled: 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 ContainerLabelValueColumnStyled: 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 ContentWrapperColumnStyled: 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 CardDetailContainerStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;