@m4l/components 9.4.5 → 9.4.6-BE20260105-beta.1

package/components/datagrids/subcomponents/HeaderActions/HeaderActions.d.ts

@@ -0,0 +1,13 @@
+import { HeaderActionsProps } from './types';
+/**
+ * Componente que renderiza las acciones del DataGrid.
+ *
+ * Incluye controles para:
+ * - Densidad de filas (compact, standard, confortable)
+ * - Filtros locales
+ * - Configuración de columnas (específica por vista)
+ * - Toggle de modo de vista (table/cards)
+ *
+ * En móviles, todas las acciones se consolidan en un menú desplegable.
+ */
+export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/index.js → datagrids/subcomponents/HeaderActions/HeaderActions.js}

@@ -1,13 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { F as Filter } from "./subcomponents/Filter/index.js";
-import { S as Settings } from "./subcomponents/Settings/index.js";
-import { D as Density } from "./subcomponents/Density/index.js";
-import { V as ViewMode } from "./subcomponents/ViewMode/index.js";
-import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useIsMobile } from "@m4l/graphics";
-import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, n as ActionsConfigContainerStyled, o as ContainerLeftActionsStyled, p as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, d as ActionsConfigContainerStyled, e as ContainerLeftActionsStyled, f as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/MobileMenuActions.js";
+import { D as Density } from "./subcomponents/Density/Density.js";
+import { F as Filter } from "./subcomponents/Filter/Filter.js";
+import { V as ViewMode } from "./subcomponents/ViewMode/ViewMode.js";
+import { S as Settings } from "../../views/CardsView/subcomponents/Settings/Settings.js";
+import { S as Settings$1 } from "../../views/TableView/subcomponents/Settings/Settings.js";
+import { u as useDataGrid } from "../../hooks/shared/useDataGrid/useDataGrid.js";
 function HeaderActions(props) {
   const {
     withSettings = true,
@@ -22,6 +23,18 @@ function HeaderActions(props) {
   const isMobile = useIsMobile();
   const { rowHeights, viewMode, cardsViewConfig } = useDataGrid();
   const { currentSize } = useComponentSize(size);
+  const renderSettings = () => {
+    if (!withSettings) {
+      return null;
+    }
+    if (viewMode === "cards" && cardsViewConfig?.customRender) {
+      return null;
+    }
+    if (viewMode === "cards") {
+      return /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns });
+    }
+    return /* @__PURE__ */ jsx(Settings$1, { ...settingsProps, columns });
+  };
   return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
     leftActions,
     /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
@@ -29,9 +42,9 @@ function HeaderActions(props) {
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
     /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
       leftActions,
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
+      renderSettings(),
       cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})
     ] }),
     rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: rightActions })

package/components/datagrids/subcomponents/HeaderActions/HeaderActions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/HeaderActions/index.d.ts

@@ -0,0 +1,2 @@
+export { HeaderActions } from './HeaderActions';
+export * from './types';

package/components/datagrids/subcomponents/HeaderActions/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Density/Density.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Componente que permite cambiar la densidad (altura) de las filas del DataGrid.
+ *
+ * Muestra un menú desplegable con tres opciones de densidad:
+ * - **compact**: Filas compactas con menor altura
+ * - **standard**: Filas con altura estándar (default)
+ * - **confortable**: Filas con mayor altura para mejor legibilidad
+ *
+ * El componente solo se renderiza si `rowHeights` no es un número fijo,
+ * permitiendo al usuario personalizar la visualización de los datos.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions
+ * <HeaderActions>
+ *   <Density />
+ * </HeaderActions>
+ * ```
+ */
+export declare function Density(): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js → datagrids/subcomponents/HeaderActions/subcomponents/Density/Density.js}

@@ -2,9 +2,9 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function Density() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Density/Density.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Density/index.d.ts

@@ -0,0 +1 @@
+export { Density } from './Density';

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Density/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Filter/Filter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Componente que renderiza el botón de filtro en el DataGrid.
+ *
+ * Permite activar/desactivar los filtros locales de las columnas o,
+ * si existe `externalFilterSettings`, abre el popover de filtros externos.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando withLocalFilters es true
+ * {withLocalFilters && <Filter />}
+ * ```
+ */
+export declare function Filter(): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/Filter/index.js → datagrids/subcomponents/HeaderActions/subcomponents/Filter/Filter.js}

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Filter/Filter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Filter/index.d.ts

@@ -0,0 +1 @@
+export { Filter } from './Filter';

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Filter/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/MobileMenuActions.d.ts

@@ -0,0 +1,19 @@
+import { Column } from 'react-data-grid';
+/**
+ * Componente que renderiza el menú de acciones en dispositivos móviles.
+ *
+ * Consolida todas las acciones del DataGrid en un único menú desplegable
+ * para optimizar el espacio en pantallas pequeñas:
+ * - Opciones de densidad (compact, standard, confortable)
+ * - Toggle de filtros
+ * - Configuración de columnas (específica según viewMode)
+ * @param props.columns - Columnas del DataGrid para la configuración
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando isMobile es true
+ * {isMobile && <MobileMenuActions columns={columns} />}
+ * ```
+ */
+export declare const MobileMenuActions: (props: {
+    columns: readonly Column<any, any>[];
+}) => import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/MobileMenuActions/index.js → datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/MobileMenuActions.js}

@@ -1,17 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
-import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
+import { u as useModalSettings } from "../../../../views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
+import { u as useModalSettings$1 } from "../../../../views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 const MobileMenuActions = (props) => {
   const { columns } = props;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant, size } = useDataGrid();
+  const { currentRowHeightVariant, setRowHeightVariant, size, viewMode } = useDataGrid();
   const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings(size, columns);
+  const tableModalSettings = useModalSettings(size, columns);
+  const cardsModalSettings = useModalSettings$1(size, columns);
+  const modalSettings = viewMode === "cards" ? cardsModalSettings : tableModalSettings;
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/MobileMenuActions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/index.d.ts

@@ -0,0 +1 @@
+export { MobileMenuActions } from './MobileMenuActions';

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Componente que permite cambiar entre los modos de vista del DataGrid.
+ *
+ * Muestra un popover con las opciones disponibles:
+ * - **table**: Vista de tabla tradicional con filas y columnas
+ * - **cards**: Vista de tarjetas para visualización más compacta
+ *
+ * El componente solo se renderiza cuando `cardsViewConfig` está definido,
+ * indicando que la vista de cards está habilitada.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando cardsViewConfig existe
+ * {cardsViewConfig !== undefined && <ViewMode />}
+ * ```
+ */
+export declare function ViewMode(): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.js → datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.js}

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { w as ContainerToggleCardsStyled, x as CardToggleButtonStyled, y as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/index.d.ts

@@ -0,0 +1 @@
+export { ViewMode } from './ViewMode';

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/HeaderActions/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/editors/EditLabelEditor/formatter.d.ts

@@ -0,0 +1,22 @@
+import { ColumnEditLabelFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar una etiqueta editable en una columna del DataGrid.
+ *
+ * Renderiza un campo de texto editable que permite modificar el valor
+ * directamente en la celda de la tabla.
+ * @param props.fieldLabel - Campo del objeto row a mostrar/editar
+ * @param props.fieldWidth - Ancho del campo de edición
+ * @returns Función render para react-data-grid
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'label',
+ *     name: 'Etiqueta',
+ *     renderCell: ColumnEditLabelFormatter({ fieldLabel: 'label' })
+ *   }
+ * ];
+ * ```
+ */
+export declare const ColumnEditLabelFormatter: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/subcomponents/editors/EditLabelEditor/formatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/editors/EditLabelEditor/useColumnEditLabel.d.ts

@@ -0,0 +1,31 @@
+import { ColumnEditLabelFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter, filter y customSort para columnas con etiquetas editables.
+ *
+ * Proporciona una configuración completa para columnas que necesitan:
+ * - Renderizado con EditLabelFormatter
+ * - Filtrado personalizado por el campo de etiqueta
+ * - Ordenamiento personalizado por el campo de etiqueta
+ * @param props.fieldLabel - Campo del objeto row a usar
+ * @param props.fieldWidth - Ancho del campo de edición
+ * @returns Objeto con formatter, customFilter y customSort
+ * @example
+ * ```tsx
+ * const { formatter, customFilter, customSort } = useColumnEditLabel({
+ *   fieldLabel: 'name',
+ *   fieldWidth: 200
+ * });
+ *
+ * const columns = [{
+ *   key: 'name',
+ *   renderCell: formatter,
+ *   customFilter,
+ *   customSort
+ * }];
+ * ```
+ */
+export declare const useColumnEditLabel: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => {
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    customFilter: (row: TRow, value: string | number) => boolean;
+    customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
+};

package/components/datagrids/subcomponents/editors/EditLabelEditor/useColumnEditLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/editors/TextEditor/TextEditor.d.ts

@@ -0,0 +1,50 @@
+import { RenderEditCellProps } from 'react-data-grid';
+/**
+ * Editor para campos de texto en el DataGrid.
+ *
+ * Permite editar valores de texto inline con las siguientes características:
+ * - Auto-enfoque al abrir
+ * - Selección automática del texto existente
+ * - Cierra al perder el foco (onBlur)
+ * @param props.row - Fila actual del DataGrid
+ * @param props.column - Columna actual del DataGrid
+ * @param props.onRowChange - Función para actualizar la fila
+ * @param props.onClose - Función para cerrar el editor
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'name',
+ *     name: 'Nombre',
+ *     renderEditCell: TextEditor
+ *   }
+ * ];
+ * ```
+ */
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor para campos numéricos en el DataGrid.
+ *
+ * Permite editar valores numéricos inline con las siguientes características:
+ * - Auto-enfoque al abrir
+ * - Selección automática del texto existente
+ * - Navegación con flechas arriba/abajo cierra el editor
+ * - Enter cierra el editor guardando cambios
+ * - Convierte valores vacíos a string vacío
+ * @param props.row - Fila actual del DataGrid
+ * @param props.column - Columna actual del DataGrid
+ * @param props.onRowChange - Función para actualizar la fila
+ * @param props.onClose - Función para cerrar el editor
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'quantity',
+ *     name: 'Cantidad',
+ *     renderEditCell: NumberEditor
+ *   }
+ * ];
+ * ```
+ */
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export default TextEditor;

package/components/{DataGrid/subcomponents/editors/TextEditor/index.js → datagrids/subcomponents/editors/TextEditor/TextEditor.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/datagrids/subcomponents/editors/TextEditor/TextEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/subcomponents/editors/TextEditor/index.d.ts

@@ -0,0 +1 @@
+export { TextEditor, NumberEditor } from './TextEditor';

package/components/datagrids/subcomponents/editors/TextEditor/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/editors/index.d.ts

@@ -0,0 +1,2 @@
+export { TextEditor, NumberEditor } from './TextEditor';
+export { ColumnEditLabelFormatter, useColumnEditLabel, type ColumnEditLabelFormatterProps, } from './EditLabelEditor';

package/components/datagrids/subcomponents/index.d.ts

@@ -0,0 +1,3 @@
+export { HeaderActions } from './HeaderActions';
+export { ControlNavigate } from './ControlNavigate';
+export * from './editors';

package/components/{DataGrid → datagrids}/types.d.ts

@@ -8,7 +8,7 @@ import { DATAGRID_PREFIX_NAME } from './constants';
 import { IGridConfigExtended, ViewMode } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
-import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
+import { SettingsProps } from './views/TableView/subcomponents/Settings/types';
 import { ReactNode } from 'react';
 export type GridFormatterPropss<T, SR> = RenderCellProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
@@ -228,6 +228,10 @@ export interface UseModalDetailProps<TRow> {
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     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[];
 }
 /**
  * Configuración de una columna específica en vista "cards"
@@ -287,6 +291,14 @@ export interface CardContentProps<TRow> {
     columns: readonly Column<TRow, any>[];
     originalColumns: readonly Column<TRow, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * 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;
 }
 /**
  * Configuración de densidad para el DataGrid.

package/components/datagrids/views/CardsView/CardsView.d.ts

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

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

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { d 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 calculateCardHeight } from "./helpers/calculateCardHeight.js";
-import { u as useModalDetail } from "../../hooks/useModalCardDetail.js";
-import { s as scrollToCardElement } from "./helpers/scrollToCardElement.js";
+import { i as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { u as useProcessedColumns } from "./hooks/useProcessedColumns/useProcessedColumns.js";
+import { u as useModalDetail } from "./hooks/useModalDetail/useModalDetail.js";
+import { c as calculateCardHeight } from "./helpers/calculateCardHeight/calculateCardHeight.js";
+import { s as scrollToCardElement } from "./helpers/scrollToCardElement/scrollToCardElement.js";
 import { C as ContainerFlow } from "../../../ContainerFlow/ContainerFlow.js";
-function Cards(props) {
+import { C as CardRow } from "./subcomponents/CardRow/CardRow.js";
+function CardsView(props) {
   const {
     rows,
     columns,
@@ -28,8 +28,8 @@ function Cards(props) {
   });
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
-    viewMode: "cards",
-    onRowsChange
+    onRowsChange,
+    rows
   });
   const cardHeight = useMemo(() => {
     const imageHeight = processedColumns.reduce((totalHeight, col) => {
@@ -77,7 +77,7 @@ function Cards(props) {
   if (processedColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row) => {
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row, rowIndex) => {
     const rowKey = rowKeyGetter(row);
     const isChecked = checkedRows?.has(rowKey) || false;
     const showCheckbox = checkedRows !== void 0 && onCheckedRowsChange !== void 0;
@@ -85,6 +85,8 @@ function Cards(props) {
       CardRow,
       {
         row,
+        rows,
+        rowIndex,
         columns: processedColumns,
         originalColumns: allProcessedColumns,
         rowKeyGetter,
@@ -104,5 +106,5 @@ function Cards(props) {
   }) }) });
 }
 export {
-  Cards as C
+  CardsView as C
 };

package/components/datagrids/views/CardsView/CardsView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{DataGrid/subcomponents/Cards/helpers → datagrids/views/CardsView/helpers/calculateCardHeight}/calculateCardHeight.d.ts

@@ -1,4 +1,4 @@
-import { CalculateCardHeightProps } from '../types';
+import { CalculateCardHeightProps } from '../../types';
 /**
  * Calcula la altura estimada de una card basándose en el número de columnas visibles.
  * @param visibleColumnsCount - Número de columnas visibles en la card

package/components/{DataGrid/subcomponents/Cards/helpers → datagrids/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/datagrids/views/CardsView/helpers/calculateCardHeight/calculateCardHeight.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/helpers/scrollToCardElement/scrollToCardElement.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

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

@@ -1,8 +1,8 @@
-import { CardContentProps } from '../../../types';
+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, onRowsChange, }: CardContentProps<TRow>): {
+export declare function useCardContent<TRow>({ row, rows, rowIndex, columns, onRowsChange, }: CardContentProps<TRow>): {
     cardContent: import("react/jsx-runtime").JSX.Element[];
     columnsCount: number;
 };