@m4l/components 9.4.6-JT16122025.beta.1 → 9.4.6-JT21122025.beta.1

package/components/DataGrid/{subcomponents/Cards/helpers → views/CardsView/helpers/calculateCardHeight}/calculateCardHeight.js

@@ -1,4 +1,4 @@
-import { C as CARD_HEIGHT } from "../../../constants.js";
+import { C as CARD_HEIGHT } from "../../../../constants.js";
 function calculateCardHeight(props) {
   const { visibleColumnsCount, customMinHeight } = props;
   if (customMinHeight !== void 0) {

package/components/DataGrid/views/CardsView/helpers/calculateCardHeight/index.d.ts

@@ -0,0 +1 @@
+export * from './calculateCardHeight';

package/components/DataGrid/views/CardsView/helpers/calculateCardHeight/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/helpers/scrollToCardElement/index.d.ts

@@ -0,0 +1 @@
+export * from './scrollToCardElement';

package/components/DataGrid/views/CardsView/helpers/scrollToCardElement/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useCardContent/index.d.ts

@@ -0,0 +1 @@
+export * from './useCardContent';

package/components/DataGrid/views/CardsView/hooks/useCardContent/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/hooks → views/CardsView/hooks/useCardContent}/useCardContent.d.ts

@@ -1,4 +1,4 @@
-import { CardContentProps } from '../../../types';
+import { CardContentProps } from '../../../../types';
 /**
  * Hook que encapsula toda la lógica de renderizado del contenido de una Card
  */

package/components/DataGrid/{subcomponents/Cards/hooks → views/CardsView/hooks/useCardContent}/useCardContent.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, d as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../slots/DataGridSlot.js";
-import { D as DICTIONARY } from "../../../dictionary.js";
+import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../icons.js";
-import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useCardContent({
   row,
   rows,

package/components/DataGrid/views/CardsView/hooks/useModalDetail/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useModalDetail';
+export * from './types';

package/components/DataGrid/views/CardsView/hooks/useModalDetail/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useModalDetail/types.d.ts

@@ -0,0 +1,19 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el hook useModalDetail
+ */
+export interface UseModalDetailProps<TRow> {
+    /**
+     * Columnas a mostrar en el modal de detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
+     */
+    rows: readonly TRow[];
+}

package/components/DataGrid/views/CardsView/hooks/useModalDetail/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useModalDetail/useModalDetail.d.ts

@@ -0,0 +1,6 @@
+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, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;

package/components/DataGrid/{hooks/useModalCardDetail.js → views/CardsView/hooks/useModalDetail/useModalDetail.js}

@@ -2,18 +2,17 @@ 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 { 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";
-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";
+import { u as useModal } from "../../../../../../hooks/useModal/index.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { C as CardDetails } from "../../subcomponents/CardDetails/CardDetails.js";
+import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
 const useModalDetail = ({
   columns,
-  viewMode,
   onRowsChange,
   rows
 }) => {
@@ -24,7 +23,7 @@ const useModalDetail = ({
   const isMobile = useIsMobile();
   const handleOpenDetail = useCallback(
     (row) => {
-      const viewColumnsConfig = getConfigColumns(viewMode);
+      const viewColumnsConfig = getConfigColumns("cards");
       const rowIndex = rows.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
@@ -69,8 +68,7 @@ const useModalDetail = ({
       getLabel,
       host_static_assets,
       environment_assets,
-      isMobile,
-      viewMode
+      isMobile
     ]
   );
   return handleOpenDetail;

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useProcessedColumns';
+export * from './types';

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Opciones para el hook useProcessedColumns
+ */
+export interface ProcessedColumnsOptions {
+    /**
+     * Si es true, aplica el filtro de visibilidad según la configuración.
+     * Si es false, muestra todas las columnas (útil para el modal de detalle).
+     * @default true
+     */
+    applyVisibilityFilter?: boolean;
+}

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{hooks → views/CardsView/hooks/useProcessedColumns}/useProcessedColumns.d.ts

@@ -1,5 +1,5 @@
 import { Column } from 'react-data-grid';
-import { ProcessedColumnsOptions } from '../types';
+import { ProcessedColumnsOptions } from './types';
 /**
  * Hook que procesa columnas para cualquier vista que no sea Table.
  * - Aplica configuración de visibilidad y orden (opcional)
@@ -38,8 +38,8 @@ export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly
     visible?: boolean;
     hidden?: boolean;
     fixed?: boolean;
-    type: import('../types').ColumnType;
-    align?: import('../types').ColumnAlign;
+    type: import('../../../../types').ColumnType;
+    align?: import('../../../../types').ColumnAlign;
     isDraggable?: boolean;
     withFilter?: boolean;
     withinHeaderRenderer?: import('react').FunctionComponent<import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>> | undefined;

package/components/DataGrid/{hooks → views/CardsView/hooks/useProcessedColumns}/useProcessedColumns.js

@@ -1,6 +1,6 @@
 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";
+import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useProcessedColumns(columns, options = {}) {
   const { applyVisibilityFilter = true } = options;
   const { getConfigColumns, viewMode } = useDataGrid();

package/components/DataGrid/views/CardsView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardsView';
+export * from './types';

package/components/DataGrid/views/CardsView/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardDetails/index.d.ts → views/CardsView/subcomponents/CardDetails/CardDetails.d.ts}

@@ -1,4 +1,4 @@
-import { CardDetailsProps } from '../../types';
+import { CardDetailsProps } from './types';
 /**
  * Componente genérico que renderiza TODAS las columnas de una fila
  * en formato detalle dentro del modal.

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardDetails/index.js → views/CardsView/subcomponents/CardDetails/CardDetails.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { f as CardDetailContainerStyled, b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, d as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { p as pathIcons } from "../../../../icons.js";

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardDetails';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/types.d.ts

@@ -0,0 +1,38 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import { IViewConfig } from '../../../../contexts/DataGridContext/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * Props para el componente CardDetails
+ */
+export interface CardDetailsProps<TRow> {
+    /**
+     * Fila que se mostrará en el detalle
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en el detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Configuración de las columnas de la vista
+     */
+    viewColumnsConfig: IViewConfig<any, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Tamaño del componente
+     * @default 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardRow/index.d.ts → views/CardsView/subcomponents/CardRow/CardRow.d.ts}

@@ -1,5 +1,5 @@
 import { RowKey } from '../../../../types';
-import { CardRowProps } from '../../types';
+import { CardRowProps } from './types';
 /**
  * Componente que muestra una fila de tarjetas.
  */

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardRow/index.js → views/CardsView/subcomponents/CardRow/CardRow.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { j as CardContentWrapperStyled, k as CardContentStyled, l as CardStyled } from "../../../../slots/DataGridSlot.js";
-import { L as LazyLoadCard } from "../LazyLoadCard/index.js";
-import { u as useCardContent } from "../../hooks/useCardContent.js";
-import { C as CardHeader } from "../CardHeader/index.js";
+import { p as CardContentWrapperStyled, q as CardContentStyled, r as CardStyled } from "../../../../slots/DataGridSlot.js";
 import { deepEqual } from "fast-equals";
+import { u as useCardContent } from "../../hooks/useCardContent/useCardContent.js";
+import { C as CardHeader } from "./subcomponents/CardHeader/CardHeader.js";
+import { L as LazyLoadCard } from "./subcomponents/LazyLoadCard/LazyLoadCard.js";
 function CardRowComponent({
   row,
   rows,
@@ -75,29 +75,21 @@ function CardRowComponent({
       onSelectedRowsChange(mySet);
     }
   };
-  return /* @__PURE__ */ jsx(
-    LazyLoadCard,
+  return /* @__PURE__ */ jsx(LazyLoadCard, { threshold: 200, minHeight, rowKey: rowKeyGetter(row), children: /* @__PURE__ */ jsx(
+    CardStyled,
     {
-      threshold: 200,
-      minHeight,
-      rowKey: rowKeyGetter(row),
-      children: /* @__PURE__ */ jsx(
-        CardStyled,
-        {
-          variant: "outlined",
-          selected: selectedRows?.has(rowKeyGetter(row)),
-          ownerState: {
-            checked: isChecked,
-            selected: selectedRows?.has(rowKeyGetter(row))
-          },
-          onClick: onCardClick,
-          "data-testid": "data-grid-card",
-          "data-row-key": rowKeyGetter(row),
-          children: content
-        }
-      )
+      variant: "outlined",
+      selected: selectedRows?.has(rowKeyGetter(row)),
+      ownerState: {
+        checked: isChecked,
+        selected: selectedRows?.has(rowKeyGetter(row))
+      },
+      onClick: onCardClick,
+      "data-testid": "data-grid-card",
+      "data-row-key": rowKeyGetter(row),
+      children: content
     }
-  );
+  ) });
 }
 const CardRow = React.memo(CardRowComponent, (prevProps, nextProps) => {
   return deepEqual(prevProps, nextProps);

package/components/DataGrid/views/CardsView/subcomponents/CardRow/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardRow';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardHeader/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.d.ts}

@@ -1,4 +1,4 @@
-import { CardHeaderProps } from '../../types';
+import { CardHeaderProps } from './types';
 /**
  * Componente CardHeader que renderiza el header de cada card con:
  * - Checkbox en el lado izquierdo (solo si existen checkedRows/onCheckedRowsChange)

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardHeader/index.js → views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { useEnvironment } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { g as CardHeaderStyled, h as CardHeaderLeftStyled, i as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { C as CheckboxCellAdapter } from "../../../CheckboxCellAdapter/index.js";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
+import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
+import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 function CardHeader({
   row,
   onOpenDetail,

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardHeader';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Props para el componente CardHeader
+ */
+export interface CardHeaderProps<TRow> {
+    row: TRow;
+    onOpenDetail: (row: TRow) => void;
+    isChecked?: boolean;
+    showCheckbox?: boolean;
+    checkedRows?: ReadonlySet<any>;
+    onCheckedRowsChange?: (rows: ReadonlySet<any>) => void;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/LazyLoadCard/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.d.ts}

@@ -1,4 +1,4 @@
-import { LazyLoadCardProps } from '../../types';
+import { LazyLoadCardProps } from './types';
 /**
  * Componente wrapper que implementa lazy loading para cards del DataGrid.
  *

package/components/DataGrid/{subcomponents/Cards/subcomponents/LazyLoadCard/index.js → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.js}

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { I as IntersectCard } from "../IntersectCard/index.js";
+import { I as IntersectCard } from "./subcomponents/IntersectCard/IntersectCard.js";
 const isIntersectionObserverAvailable = () => {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
 };

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LazyLoadCard';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/IntersectCard/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/IntersectCard.d.ts}

@@ -1,4 +1,4 @@
-import { IntersectCardProps } from '../../types';
+import { IntersectCardProps } from './types';
 /**
  * Componente centinela que detecta cuando una card debe ser renderizada.
  *

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IntersectCard';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Props para el componente IntersectCard
+ */
+export interface IntersectCardProps {
+    /**
+     * Función callback que se ejecuta cuando el elemento entra en el viewport.
+     * Recibe true cuando el elemento es visible.
+     * @param visible - Estado de visibilidad del elemento
+     */
+    setIsVisible: (visible: boolean) => void;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * Un valor de 100 significa que el elemento se considerará visible cuando esté
+     * a 100px o menos del área visible de la pantalla.
+     * @default 100
+     */
+    threshold: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default '120px'
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}
+/**
+ * Tipo extendido para el elemento div que incluye el método setIsVisible.
+ * Este método se adjunta dinámicamente al elemento DOM para que el Observer
+ * pueda comunicarse con el componente React.
+ */
+export type IntersectCardRef = HTMLDivElement & {
+    setIsVisible?: (visible: boolean) => void;
+};

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/**
+ * Props para el componente LazyLoadCard
+ */
+export interface LazyLoadCardProps {
+    /**
+     * Contenido a renderizar cuando la card sea visible
+     */
+    children: ReactNode;
+    /**
+     * Habilita o deshabilita el IntersectionObserver.
+     * Si es false, el contenido se renderiza inmediatamente.
+     * @default true
+     */
+    enableIntersectionObserver?: boolean;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default 120
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/types.d.ts

@@ -0,0 +1,72 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { CardsViewConfig, RowKey } from '../../../../types';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el componente CardRow
+ */
+export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
+    /**
+     * Fila que se mostrará en la tarjeta
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en la tarjeta (procesadas, filtradas por visibilidad)
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Columnas originales sin filtrar (para el modal de detalle)
+     */
+    originalColumns: readonly Column<TRow, any>[];
+    /**
+     * Función que devuelve la clave de la fila
+     */
+    rowKeyGetter: (row: TRow) => TKey;
+    /**
+     * Filas seleccionadas actualmente
+     */
+    selectedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas seleccionadas
+     */
+    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Indica si se debe renderizar el contenido personalizado de la tarjeta
+     */
+    customRender?: CardsViewConfig<TRow>['customRender'];
+    /**
+     * Altura mínima de la tarjeta
+     */
+    minHeight: number;
+    /**
+     * Indica si la fila está chequeada
+     */
+    isChecked: boolean;
+    /**
+     * Indica si se debe mostrar el checkbox para checkedRows
+     */
+    showCheckbox: boolean;
+    /**
+     * Filas chequeadas actualmente
+     */
+    checkedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas chequeadas
+     */
+    onCheckedRowsChange?: (mapRowsChecked: ReadonlySet<TKey>) => void;
+    /**
+     * Función para abrir el modal de detalle de la fila
+     */
+    onOpenDetail: (row: TRow) => void;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/Settings.d.ts

@@ -0,0 +1,6 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración para CardsView.
+ * Abre el modal de configuración de columnas específico para la vista de cards.
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/Settings/index.js → views/CardsView/subcomponents/Settings/Settings.js}

@@ -1,23 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { u as useModalSettingsCards } from "../hooks/useModalSettingsCards/index.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { size, viewMode } = useDataGrid();
+  const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
-  const modalSettingsCards = useModalSettingsCards(size, columns);
   const { getLabel } = useModuleDictionary();
   const handleClick = () => {
-    if (viewMode === "table") {
-      modalSettings();
-    } else {
-      modalSettingsCards();
-    }
+    modalSettings();
   };
   return /* @__PURE__ */ jsx(
     IconButton,

package/components/DataGrid/views/CardsView/subcomponents/Settings/hooks/useModalSettings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useModalSettings';
+export * from './types';