@m4l/components 9.3.19-BE101025-beta.2 → 9.3.19-BE241025-beta.1

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { SelectCellFormatter } from "react-data-grid";
+import { C as CheckboxCellAdapter } from "../../subcomponents/CheckboxCellAdapter/index.js";
 function ColumnSetCheckFormatter(parameters) {
   const { field, disabledGetter, rowKeyGetter, useHook } = parameters;
   const formatter = (props) => {
@@ -19,7 +19,7 @@ function ColumnSetCheckFormatter(parameters) {
       disabled = disabledGetter(row);
     }
     return /* @__PURE__ */ jsx(
-      SelectCellFormatter,
+      CheckboxCellAdapter,
       {
         value: checkedRows.has(rowKeyGetter(row)) || false,
         disabled,

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

@@ -0,0 +1,6 @@
+import { UseModalDetailProps } from '../types';
+/**
+ * Hook genérico 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;

package/components/DataGrid/hooks/useModalCardDetail.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { p as pathIcons } from "../icons.js";
+import { C as CardDetails } from "../subcomponents/Cards/subcomponents/CardDetails/index.js";
+import { D as DICTIONARY } from "../dictionary.js";
+import { u as useDataGrid } from "./useDataGrid.js";
+import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { W as WindowBase } from "../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
+const useModalDetail = ({
+  row,
+  columns,
+  viewMode,
+  onRowsChange
+}) => {
+  const { getConfigColumns, size } = useDataGrid();
+  const { openModal, closeModal } = useModal();
+  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;
+};
+export {
+  useModalDetail as u
+};

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

@@ -0,0 +1,50 @@
+import { Column } from 'react-data-grid';
+import { ProcessedColumnsOptions } from '../types';
+/**
+ * Hook que procesa columnas para cualquier vista que no sea Table.
+ * - Aplica configuración de visibilidad y orden (opcional)
+ * - Convierte formatters a renderCell
+ * - Filtra columnas especiales (SelectColumn, ActionsColumn)
+ * - Filtra cualquier columna con renderCell problemático
+ * @param columns - Columnas originales del DataGrid
+ * @param options - Opciones de procesamiento
+ * @returns Columnas procesadas y filtradas listas para usar en cualquier vista
+ */
+export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly Column<TRow, TSummaryRow>[], options?: ProcessedColumnsOptions): {
+    name: string | import('react').ReactElement;
+    key: string;
+    width?: string | number | null | undefined;
+    minWidth?: number | null | undefined;
+    maxWidth?: number | null | undefined;
+    cellClass?: string | ((row: TRow) => string | null | undefined) | null | undefined;
+    headerCellClass?: string | null | undefined;
+    summaryCellClass?: string | ((row: TSummaryRow) => string | null | undefined) | null | undefined;
+    renderHeaderCell?: ((props: import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderCell?: ((props: import('react-data-grid').RenderCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderSummaryCell?: ((props: import('react-data-grid').RenderSummaryCellProps<TSummaryRow, TRow>) => import('react').ReactNode) | null | undefined;
+    renderGroupCell?: ((props: import('react-data-grid').RenderGroupCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    renderEditCell?: ((props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode) | null | undefined;
+    editable?: boolean | ((row: TRow) => boolean) | null | undefined;
+    colSpan?: ((args: import('react-data-grid').ColSpanArgs<TRow, TSummaryRow>) => number | null | undefined) | null | undefined;
+    frozen?: boolean | null | undefined;
+    resizable?: boolean | null | undefined;
+    sortable?: boolean | null | undefined;
+    draggable?: boolean | null | undefined;
+    sortDescendingFirst?: boolean | null | undefined;
+    editorOptions?: {
+        readonly displayCellContent?: boolean | null | undefined;
+        readonly commitOnOutsideClick?: boolean | null | undefined;
+    } | null | undefined;
+    visible?: boolean;
+    hidden?: boolean;
+    fixed?: boolean;
+    type: import('../types').ColumnType;
+    align?: import('../types').ColumnAlign;
+    isDraggable?: boolean;
+    withFilter?: boolean;
+    withinHeaderRenderer?: import('react').FunctionComponent<import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>> | undefined;
+    customFilter?: ((row: TRow, value: string) => boolean) | undefined;
+    customSort?: ((a: TRow, b: TRow) => number) | undefined;
+    formatter?: ((props: any) => JSX.Element) | undefined;
+    editor?: import('@m4l/core').Maybe<(props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode>;
+}[];

package/components/DataGrid/hooks/useProcessedColumns.js

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { u as useDataGrid } from "./useDataGrid.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../constants.js";
+function useProcessedColumns(columns, options = {}) {
+  const { applyVisibilityFilter = true } = options;
+  const { getConfigColumns, viewMode } = useDataGrid();
+  const columnsConfig = useMemo(
+    () => getConfigColumns(viewMode || "cards"),
+    [getConfigColumns, viewMode]
+  );
+  return useMemo(() => {
+    const processedColumns = columns.filter((column) => {
+      if (column.key === DATAGRID_SELECT_COLUMN_KEY || column.key === DATAGRID_ACTIONS_COLUMN_KEY) {
+        return false;
+      }
+      if (!applyVisibilityFilter) {
+        return !column.hidden;
+      }
+      const columnConfig = columnsConfig.find((c) => c.key === column.key);
+      const visible = columnConfig ? columnConfig.visible : true;
+      return !column.hidden && visible;
+    }).map((column) => {
+      const newColumn = { ...column };
+      if (newColumn.formatter && !newColumn.renderCell) {
+        newColumn.renderCell = newColumn.formatter;
+      }
+      if (newColumn.editor && !newColumn.renderEditCell) {
+        newColumn.renderEditCell = newColumn.editor;
+      }
+      return newColumn;
+    });
+    processedColumns.sort((a, b) => {
+      const indexA = columnsConfig.findIndex((c) => c.key === a.key);
+      const indexB = columnsConfig.findIndex((c) => c.key === b.key);
+      const orderA = indexA === -1 ? columnsConfig.length : indexA;
+      const orderB = indexB === -1 ? columnsConfig.length : indexB;
+      return orderA - orderB;
+    });
+    return processedColumns;
+  }, [columns, columnsConfig, applyVisibilityFilter]);
+}
+export {
+  useProcessedColumns as u
+};

package/components/DataGrid/icons.d.ts

@@ -20,4 +20,11 @@ export declare const pathIcons: {
     freezeColumn: string;
     unfreezeColumn: string;
     hideColumn: string;
+    viewTable: string;
+    viewCards: string;
+    info: string;
+    expanded: string;
+    mail: string;
+    smartphone: string;
+    internet: string;
 };

package/components/DataGrid/icons.js

@@ -19,7 +19,11 @@ const pathIcons = {
   removeSort: "frontend/components/data_grid/assets/icons/eraser.svg",
   freezeColumn: "frontend/components/data_grid/assets/icons/pin.svg",
   unfreezeColumn: "frontend/components/data_grid/assets/icons/pin-off.svg",
-  hideColumn: "frontend/components/data_grid/assets/icons/eye-off.svg"
+  hideColumn: "frontend/components/data_grid/assets/icons/eye-off.svg",
+  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"
 };
 export {
   pathIcons as p

package/components/DataGrid/index.d.ts

@@ -5,5 +5,5 @@ export type { RowKey, ChangeUserColumn } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
-export type { IGridConfig, BaseConfigColumn } from './contexts/DataGridContext/types';
+export type { IGridConfig, IGridConfigExtended, BaseConfigColumn } from './contexts/DataGridContext/types';
 export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS } from './constants';

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

@@ -27,7 +27,28 @@ export declare enum TableSlots {
     buttonHeaderActions = "buttonHeaderActions",
     nameColumnIcon = "nameColumnIcon",
     iconColumn = "iconColumn",
-    nameColumn = "nameColumn"
+    nameColumn = "nameColumn",
+    containerToggleCards = "containerToggleCards",
+    cardToggleCardButton = "cardToggleCardButton",
+    textToggleCardButton = "textToggleCardButton",
+    card = "card",
+    cardsContainer = "cardsContainer",
+    cardHeader = "cardHeader",
+    cardHeaderLeft = "cardHeaderLeft",
+    cardHeaderRight = "cardHeaderRight",
+    containerLabelValueColumn = "containerLabelValueColumn",
+    contentWrapperColumn = "contentWrapperColumn",
+    cardDetailContainer = "cardDetailContainer",
+    labelHeaderColumn = "labelHeaderColumn",
+    valueColumn = "valueColumn",
+    customCardHeader = "customCardHeader",
+    customCardAvatar = "customCardAvatar",
+    customCardNameEmail = "customCardNameEmail",
+    customCardFieldWithIcon = "customCardFieldWithIcon",
+    customCardFieldContent = "customCardFieldContent",
+    customCardIconContainer = "customCardIconContainer",
+    checkboxCellWrapper = "checkboxCellWrapper",
+    editorCellWrapper = "editorCellWrapper"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -31,6 +31,27 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["nameColumnIcon"] = "nameColumnIcon";
   TableSlots2["iconColumn"] = "iconColumn";
   TableSlots2["nameColumn"] = "nameColumn";
+  TableSlots2["containerToggleCards"] = "containerToggleCards";
+  TableSlots2["cardToggleCardButton"] = "cardToggleCardButton";
+  TableSlots2["textToggleCardButton"] = "textToggleCardButton";
+  TableSlots2["card"] = "card";
+  TableSlots2["cardsContainer"] = "cardsContainer";
+  TableSlots2["cardHeader"] = "cardHeader";
+  TableSlots2["cardHeaderLeft"] = "cardHeaderLeft";
+  TableSlots2["cardHeaderRight"] = "cardHeaderRight";
+  TableSlots2["containerLabelValueColumn"] = "containerLabelValueColumn";
+  TableSlots2["contentWrapperColumn"] = "contentWrapperColumn";
+  TableSlots2["cardDetailContainer"] = "cardDetailContainer";
+  TableSlots2["labelHeaderColumn"] = "labelHeaderColumn";
+  TableSlots2["valueColumn"] = "valueColumn";
+  TableSlots2["customCardHeader"] = "customCardHeader";
+  TableSlots2["customCardAvatar"] = "customCardAvatar";
+  TableSlots2["customCardNameEmail"] = "customCardNameEmail";
+  TableSlots2["customCardFieldWithIcon"] = "customCardFieldWithIcon";
+  TableSlots2["customCardFieldContent"] = "customCardFieldContent";
+  TableSlots2["customCardIconContainer"] = "customCardIconContainer";
+  TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
+  TableSlots2["editorCellWrapper"] = "editorCellWrapper";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

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

@@ -37,6 +37,30 @@ export declare const ColumnsConfigActiosStyled: import('@emotion/styled').Styled
  * ****************
  */
 export declare const TableContainerStyled: 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 ContainerToggleCardsStyled: 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 CardToggleButtonStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const TextToggleCardButtonStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+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 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>>, {}>;
+export declare const LabelHeaderColumnStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const ValueColumnStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const CheckboxCellWrapperStyled: 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 EditorCellWrapperStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Slots para cards personalizadas
+ */
+export declare const CustomCardHeaderStyled: 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 CustomCardAvatarStyled: 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 CustomCardNameEmailStyled: 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 CustomCardFieldWithIconStyled: 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 CustomCardFieldContentStyled: 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 CustomCardIconContainerStyled: 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 TableWrapperDataGridStyled: 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 DraggableHeaderRootStyled: 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 IconSearchStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,9 +1,12 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, c as ColumnIconFormatterSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, C as ControlNavigateSlots, c as ColumnIconFormatterSlots, b as TableSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
+import { C as Card } from "../../Card/Card.js";
+import { C as ContainerFlow } from "../../ContainerFlow/ContainerFlow.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -60,6 +63,90 @@ const TableContainerStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.tableContaniner
 })(dataGridStyles.tableContaniner);
+const ContainerToggleCardsStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.containerToggleCards
+})(dataGridStyles.containerToggleCards);
+const CardToggleButtonStyled = styled(Card, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardToggleCardButton
+})(dataGridStyles.cardToggleCardButton);
+const TextToggleCardButtonStyled = styled(Typography, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.textToggleCardButton
+})(dataGridStyles.textToggleCardButton);
+const CardStyled = styled(Card, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.card
+})(dataGridStyles.card);
+const CardHeaderStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardHeader
+})(dataGridStyles.cardHeader);
+const CardHeaderLeftStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardHeaderLeft
+})(dataGridStyles.cardHeaderLeft);
+const CardHeaderRightStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardHeaderRight
+})(dataGridStyles.cardHeaderRight);
+const CardsContainerStyled = styled(ContainerFlow, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardsContainer
+})(dataGridStyles.cardsContainer);
+const ContainerLabelValueColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.containerLabelValueColumn
+})(dataGridStyles.containerLabelValueColumn);
+const ContentWrapperColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.contentWrapperColumn
+})(dataGridStyles.contentWrapperColumn);
+const CardDetailContainerStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardDetailContainer
+})(dataGridStyles.cardDetailContainer);
+const LabelHeaderColumnStyled = styled(Typography, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.labelHeaderColumn
+})(dataGridStyles.labelHeaderColumn);
+const ValueColumnStyled = styled(Typography, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.valueColumn
+})(dataGridStyles.valueColumn);
+const CheckboxCellWrapperStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.checkboxCellWrapper
+})(dataGridStyles.checkboxCellWrapper);
+const EditorCellWrapperStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.editorCellWrapper
+})(dataGridStyles.editorCellWrapper);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardHeader
+})(dataGridStyles.customCardHeader);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardAvatar
+})(dataGridStyles.customCardAvatar);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardNameEmail
+})(dataGridStyles.customCardNameEmail);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardFieldWithIcon
+})(dataGridStyles.customCardFieldWithIcon);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardFieldContent
+})(dataGridStyles.customCardFieldContent);
+styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.customCardIconContainer
+})(dataGridStyles.customCardIconContainer);
 const TableWrapperDataGridStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.tableWrapperDataGrid
@@ -126,33 +213,48 @@ const ColumnIconFormatterStyled = styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  ButtonHeaderActionsStyled as B,
+  DraggableHeaderRootStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
-  HeaderInputBaseStyled as H,
+  EditorCellWrapperStyled as E,
+  ButtonHeaderActionsStyled as F,
+  DraggableWrapperInputBaseStyled as G,
+  IconSearchStyled as H,
   IconColumnStyled as I,
+  HeaderInputBaseStyled as J,
+  HeaderRenderClickStyled as K,
+  LabelHeaderColumnStyled as L,
   MenuListStyled as M,
   NameColumnIconStyled as N,
+  InputTextEditorStyled as O,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
+  ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
   ColumnIconFormatterStyled as a,
-  ControlNavigateStyled as b,
-  ActionsConfigContainerStyled as c,
-  ContainerLeftActionsStyled as d,
-  ContainerRightActionsStyled as e,
-  RowsCountLabelStyled as f,
-  RowsCountValueStyled as g,
-  ColumnsConfigWrapperStyled as h,
-  ColumnsConfigDataGridStyled as i,
-  ColumnsConfigSelColumnsStyled as j,
-  ColumnsConfigActiosStyled as k,
-  ContentModalSettingStyled as l,
-  TableContainerStyled as m,
-  NameColumnStyled as n,
-  DraggableHeaderRootStyled as o,
-  DraggableWrapperInputBaseStyled as p,
-  IconSearchStyled as q,
-  HeaderRenderClickStyled as r,
-  InputTextEditorStyled as s
+  ContentModalSettingStyled as b,
+  ContainerLabelValueColumnStyled as c,
+  ContentWrapperColumnStyled as d,
+  CardsContainerStyled as e,
+  CardDetailContainerStyled as f,
+  CardHeaderStyled as g,
+  CardHeaderLeftStyled as h,
+  CardHeaderRightStyled as i,
+  CardStyled as j,
+  CheckboxCellWrapperStyled as k,
+  ControlNavigateStyled as l,
+  ActionsConfigContainerStyled as m,
+  ContainerLeftActionsStyled as n,
+  ContainerRightActionsStyled as o,
+  RowsCountLabelStyled as p,
+  RowsCountValueStyled as q,
+  ColumnsConfigWrapperStyled as r,
+  ColumnsConfigDataGridStyled as s,
+  ColumnsConfigSelColumnsStyled as t,
+  ColumnsConfigActiosStyled as u,
+  ContainerToggleCardsStyled as v,
+  CardToggleButtonStyled as w,
+  TextToggleCardButtonStyled as x,
+  TableContainerStyled as y,
+  NameColumnStyled as z
 };

package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.d.ts

@@ -0,0 +1,9 @@
+import { CardContentProps } from '../../../types';
+/**
+ * Hook que encapsula toda la lógica de renderizado del contenido de una Card
+ */
+export declare function useCardContent<TRow>({ row, columns, originalColumns, onRowsChange, }: CardContentProps<TRow>): {
+    cardContent: import("react/jsx-runtime").JSX.Element[];
+    columnsCount: number;
+    onOpenDetail: () => void;
+};

package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { u as useModalDetail } from "../../../hooks/useModalCardDetail.js";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { c as ContainerLabelValueColumnStyled, d as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../slots/DataGridSlot.js";
+function useCardContent({
+  row,
+  columns,
+  originalColumns,
+  onRowsChange
+}) {
+  const { getConfigColumns, size } = useDataGrid();
+  const [editingColumnKey, setEditingColumnKey] = useState(null);
+  const columnsConfig = getConfigColumns("cards");
+  const onOpenDetail = useModalDetail({
+    row,
+    columns: originalColumns,
+    viewMode: "cards",
+    onRowsChange
+  });
+  const cardContent = useMemo(() => {
+    return columns.map((column, index) => {
+      const configColumn = columnsConfig.find(
+        (config) => config.key === column.key
+      );
+      const shouldShowTitle = configColumn?.showTitle !== false;
+      return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
+        ContentWrapperColumnStyled,
+        {
+          onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
+            setEditingColumnKey(column.key);
+          } : void 0,
+          children: [
+            shouldShowTitle && /* @__PURE__ */ jsx(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: column.name }),
+            (() => {
+              if (column.renderEditCell && editingColumnKey === column.key) {
+                return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: column.renderEditCell({
+                  column,
+                  row,
+                  rowIdx: index,
+                  /**
+                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                   */
+                  onRowChange: (updatedRow) => {
+                    if (onRowsChange) {
+                      onRowsChange([updatedRow], {
+                        indexes: [index],
+                        column
+                      });
+                    }
+                  },
+                  onClose: () => setEditingColumnKey(null)
+                }) });
+              }
+              if (column.renderCell) {
+                const cellContent = column.renderCell({
+                  column,
+                  row,
+                  rowIdx: index,
+                  isCellSelected: false,
+                  tabIndex: -1,
+                  /**
+                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                   */
+                  onRowChange: (updatedRow) => {
+                    if (onRowsChange) {
+                      onRowsChange([updatedRow], {
+                        indexes: [index],
+                        column
+                      });
+                    }
+                  }
+                });
+                return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
+              }
+              return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
+            })()
+          ]
+        }
+      ) }, column.key);
+    });
+  }, [columns, columnsConfig, row, onRowsChange, editingColumnKey, size]);
+  return {
+    cardContent,
+    columnsCount: columns.length,
+    onOpenDetail
+  };
+}
+export {
+  useCardContent as u
+};

package/components/DataGrid/subcomponents/Cards/index.d.ts

@@ -0,0 +1,5 @@
+import { GridProps, RowKey } from '../../types';
+/**
+ * Componente que muestra las filas del DataGrid en formato de tarjetas.
+ */
+export declare function Cards<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/subcomponents/Cards/index.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { e as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { C as CardRow } from "./subcomponents/CardRow/index.js";
+import { u as useProcessedColumns } from "../../hooks/useProcessedColumns.js";
+import { C as ContainerFlow } from "../../../ContainerFlow/ContainerFlow.js";
+function Cards(props) {
+  const {
+    rows,
+    columns,
+    rowKeyGetter,
+    selectedRows,
+    onSelectedRowsChange,
+    onRowsChange,
+    cardsViewConfig
+  } = props;
+  const processedColumns = useProcessedColumns(columns);
+  const allProcessedColumns = useProcessedColumns(columns, {
+    applyVisibilityFilter: false
+  });
+  if (processedColumns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row) => /* @__PURE__ */ jsx(
+    CardRow,
+    {
+      row,
+      columns: processedColumns,
+      originalColumns: allProcessedColumns,
+      rowKeyGetter,
+      selectedRows,
+      onSelectedRowsChange,
+      onRowsChange,
+      customRender: cardsViewConfig?.customRender
+    },
+    rowKeyGetter(row)
+  )) }) });
+}
+export {
+  Cards as C
+};