@m4l/components 9.3.21 → 9.3.22-JT22102025.beta.1

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

@@ -0,0 +1,8 @@
+import { CardDetailsProps } from '../../types';
+/**
+ * Componente genérico que renderiza TODAS las columnas de una fila
+ * en formato detalle dentro del modal.
+ *
+ * A diferencia del componente Cards, este muestra TODAS las columnas
+ */
+export declare function CardDetails<TRow>({ row, columns, viewColumnsConfig, onRowsChange, size, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { f as CardDetailContainerStyled, c as ContainerLabelValueColumnStyled, d as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../../slots/DataGridSlot.js";
+function CardDetails({
+  row,
+  columns,
+  viewColumnsConfig,
+  onRowsChange,
+  size = "medium"
+}) {
+  const [editingColumnKey, setEditingColumnKey] = useState(null);
+  return /* @__PURE__ */ jsx(CardDetailContainerStyled, { children: columns.map((column, index) => {
+    const configColumn = viewColumnsConfig.find(
+      (config) => config.key === column.key
+    );
+    const shouldShowTitle = configColumn?.showTitle !== false;
+    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
+      ContentWrapperColumnStyled,
+      {
+        "data-testid": `card-detail-column-${column.key}`,
+        onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
+          setEditingColumnKey(column.key);
+        } : void 0,
+        children: [
+          shouldShowTitle && /* @__PURE__ */ jsxs(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);
+  }) });
+}
+export {
+  CardDetails as C
+};

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

@@ -0,0 +1,7 @@
+import { CardHeaderProps } from '../../types';
+/**
+ * Componente CardHeader que renderiza el header de cada card con:
+ * - Checkbox en el lado izquierdo (solo si existen checkedRows/onCheckedRowsChange)
+ * - Botones de acción en el lado derecho (IconButton + MenuActions)
+ */
+export declare function CardHeader<TRow>({ row, onOpenDetail }: CardHeaderProps<TRow>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,98 @@
+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";
+function CardHeader({ row, onOpenDetail }) {
+  const {
+    rowKeyGetter,
+    checkedRows,
+    onCheckedRowsChange,
+    rowActionsGetter,
+    size
+  } = useDataGrid();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
+  const showCheckbox = useMemo(
+    () => checkedRows !== void 0 && onCheckedRowsChange !== void 0,
+    [checkedRows, onCheckedRowsChange]
+  );
+  const isChecked = useMemo(
+    () => checkedRows?.has(rowKey) || false,
+    [checkedRows, rowKey]
+  );
+  const onChange = useCallback(
+    (checked, _isShiftClick) => {
+      if (!onCheckedRowsChange) {
+        return;
+      }
+      const newCheckedRows = new Set(checkedRows);
+      if (checked) {
+        newCheckedRows.add(rowKey);
+      } else {
+        newCheckedRows.delete(rowKey);
+      }
+      onCheckedRowsChange(newCheckedRows);
+    },
+    [checkedRows, onCheckedRowsChange, rowKey]
+  );
+  const anchorOrigin = useMemo(
+    () => ({
+      vertical: "bottom",
+      horizontal: "right"
+    }),
+    []
+  );
+  const transformOrigin = useMemo(
+    () => ({
+      vertical: "top",
+      horizontal: "right"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxs(CardHeaderStyled, { ownerState: { hasCheckedRows: showCheckbox }, children: [
+    showCheckbox && /* @__PURE__ */ jsx(CardHeaderLeftStyled, { children: /* @__PURE__ */ jsx(
+      CheckboxCellAdapter,
+      {
+        value: isChecked,
+        tabIndex: -1,
+        onChange,
+        "aria-label": "Select"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(CardHeaderRightStyled, { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.expanded}`,
+          size,
+          variant: "text",
+          "data-testid": `card-details-button-${rowKey}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            onOpenDetail();
+          }
+        }
+      ),
+      rowActionsGetter && /* @__PURE__ */ jsx(
+        MenuActions,
+        {
+          arrowType: "top-left",
+          objItem: row,
+          menuActions: rowActionsGetter,
+          anchorOrigin,
+          transformOrigin,
+          onClick: (e) => e.stopPropagation(),
+          variant: "text"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CardHeader as C
+};

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

@@ -0,0 +1,6 @@
+import { RowKey } from '../../../../types';
+import { CardRowProps } from '../../types';
+/**
+ * Componente que muestra una fila de tarjetas.
+ */
+export declare function CardRow<TRow, TKey extends RowKey = RowKey>({ row, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { j 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 { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+function CardRow({
+  row,
+  columns,
+  originalColumns,
+  rowKeyGetter,
+  selectedRows,
+  onSelectedRowsChange,
+  onRowsChange,
+  customRender
+}) {
+  const { checkedRows } = useDataGrid();
+  const hasCustomRender = customRender !== void 0;
+  const { cardContent, columnsCount, onOpenDetail } = useCardContent({
+    row,
+    columns,
+    originalColumns,
+    onRowsChange
+  });
+  const isChecked = useMemo(
+    () => checkedRows?.has(rowKeyGetter(row)) || false,
+    [checkedRows, rowKeyGetter, row]
+  );
+  const content = useMemo(() => {
+    if (hasCustomRender) {
+      return customRender.renderContent(row);
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { row, onOpenDetail }),
+      cardContent
+    ] });
+  }, [hasCustomRender, customRender, row, cardContent, onOpenDetail]);
+  const onCardClick = () => {
+    if (selectedRows && onSelectedRowsChange) {
+      if (selectedRows.has(rowKeyGetter(row))) {
+        return;
+      }
+      const mySet = /* @__PURE__ */ new Set([rowKeyGetter(row)]);
+      onSelectedRowsChange(mySet);
+    }
+  };
+  const dynamicMinHeight = useMemo(() => {
+    if (hasCustomRender) {
+      return customRender.minHeight;
+    }
+    return Math.max(120, columnsCount * 32 + 40);
+  }, [hasCustomRender, customRender, columnsCount]);
+  return /* @__PURE__ */ jsx(LazyLoadCard, { threshold: 200, minHeight: dynamicMinHeight, 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",
+      children: content
+    }
+  ) });
+}
+export {
+  CardRow as C
+};

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

@@ -0,0 +1,20 @@
+import { IntersectCardProps } from '../../types';
+/**
+ * Componente centinela que detecta cuando una card debe ser renderizada.
+ *
+ * Utiliza la API IntersectionObserver para detectar cuándo este componente
+ * entra en el viewport del usuario, momento en el cual notifica al componente
+ * padre para que renderice la card real en lugar del placeholder.
+ * @param props - Props del componente IntersectCard
+ * @returns Elemento span invisible que actúa como centinela
+ *
+ * Flujo de funcionamiento:
+ * 1. Se renderiza un span invisible en la posición de la card
+ * 2. El IntersectionObserver vigila este span
+ * 3. Cuando el span entra en el viewport (+ threshold):
+ *    - Se ejecuta checkIntersections
+ *    - Se llama a setIsVisible(true)
+ *    - El componente padre reemplaza este placeholder con la card real
+ * 4. El observer deja de observar automáticamente el elemento
+ */
+export declare function IntersectCard(props: IntersectCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { styled } from "@mui/material/styles";
+const checkIntersections = (entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target?.setIsVisible(true);
+    }
+  });
+};
+const LAZY_LOAD_OBSERVERS = {};
+const getObserver = (threshold) => {
+  LAZY_LOAD_OBSERVERS[threshold] = LAZY_LOAD_OBSERVERS[threshold] || new IntersectionObserver(checkIntersections, {
+    rootMargin: threshold + "px"
+  });
+  return LAZY_LOAD_OBSERVERS[threshold];
+};
+const IntersectCardStyled = styled("div")(
+  ({ minHeight }) => ({
+    minHeight: `${minHeight}px`,
+    width: "100%"
+  })
+);
+function IntersectCard(props) {
+  const { setIsVisible, threshold, minHeight = 120 } = props;
+  const [observer] = useState(
+    getObserver(threshold)
+  );
+  const intersectCardRef = useRef(null);
+  useEffect(() => {
+    const element = intersectCardRef.current;
+    if (observer && element) {
+      element.setIsVisible = setIsVisible;
+      observer.observe(element);
+    }
+    return () => {
+      if (observer && element) {
+        observer.unobserve(element);
+      }
+    };
+  }, [observer, setIsVisible]);
+  return /* @__PURE__ */ jsx(IntersectCardStyled, { ref: intersectCardRef, minHeight });
+}
+export {
+  IntersectCard as I
+};

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

@@ -0,0 +1,17 @@
+import { LazyLoadCardProps } from '../../types';
+/**
+ * Componente wrapper que implementa lazy loading para cards del DataGrid.
+ *
+ * Controla cuándo renderizar el contenido real de una card basándose en
+ * su visibilidad en el viewport.
+ * @returns Contenido de la card o placeholder según su visibilidad
+ *
+ * **Cuando IntersectionObserver NO está disponible:**
+ * - Se renderiza inmediatamente el contenido real
+ *
+ * **Cuando IntersectionObserver SÍ está disponible:**
+ * - Fase 1: Renderiza IntersectCard
+ * - Fase 2: Cuando entra en viewport → isVisible = true
+ * - Fase 3: Renderiza el contenido real (children)
+ */
+export declare function LazyLoadCard(props: LazyLoadCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { I as IntersectCard } from "../IntersectCard/index.js";
+const isIntersectionObserverAvailable = () => {
+  return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
+};
+function LazyLoadCard(props) {
+  const {
+    children,
+    enableIntersectionObserver = true,
+    threshold = 100,
+    minHeight = 120
+  } = props;
+  const [isVisible, setIsVisible] = useState(
+    !(enableIntersectionObserver && isIntersectionObserverAvailable())
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? (
+    // Contenido real: se renderiza cuando es visible o cuando no se usa observer
+    children
+  ) : (
+    // Placeholder: elemento centinela que detecta cuándo debe cargar el contenido
+    /* @__PURE__ */ jsx(
+      IntersectCard,
+      {
+        setIsVisible,
+        threshold,
+        minHeight
+      }
+    )
+  ) });
+}
+export {
+  LazyLoadCard as L
+};

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

@@ -0,0 +1,118 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { CardsViewConfig, RowKey } from '../../types';
+import { Maybe } from '@m4l/core';
+import { IViewConfig } from '../../contexts/DataGridContext/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * 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;
+}
+/**
+ * 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;
+};
+/**
+ * Props para el componente LazyLoadCard
+ */
+export interface LazyLoadCardProps {
+    /**
+     * Contenido de la card que se renderizará una vez que sea visible.
+     * Típicamente será un componente Card con los datos de la fila.
+     */
+    children: React.ReactNode;
+    /**
+     * Habilita o deshabilita el lazy loading con IntersectionObserver.
+     * Si se deshabilita, la card se renderiza inmediatamente.
+     * @default true
+     */
+    enableIntersectionObserver?: boolean;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la carga.
+     * Un valor más alto carga las cards antes de que sean visibles,
+     * mejorando la experiencia del usuario.
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default 120
+     */
+    minHeight?: number;
+}
+/**
+ * Props para el componente CardRow
+ */
+export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
+    /**
+     * Fila que se mostrará en la tarjeta
+     */
+    row: TRow;
+    /**
+     * 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'];
+}
+/**
+ * Props para el componente CardDetails
+ */
+export interface CardDetailsProps<TRow> {
+    row: TRow;
+    columns: readonly Column<TRow, any>[];
+    viewColumnsConfig: IViewConfig<any, any>[];
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props para el componente CardHeader
+ */
+export interface CardHeaderProps<TRow> {
+    row: TRow;
+    onOpenDetail: () => void;
+}

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

@@ -0,0 +1,7 @@
+import { CheckboxCellAdapterProps } from './types';
+/**
+ * Adaptador que renderiza el checkbox apropidado según el viewMode
+ * - En viewMode 'cards': usa CheckboxFormatter (MUI)
+ * - En viewMode 'table': usa SelectCellFormatter (react-data-grid)
+ */
+export declare const CheckboxCellAdapter: import('react').ForwardRefExoticComponent<CheckboxCellAdapterProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { SelectCellFormatter } from "react-data-grid";
+import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
+import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
+import { k as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
+const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
+  const {
+    value,
+    disabled,
+    tabIndex,
+    onChange,
+    "aria-label": ariaLabel
+  } = props;
+  const context = useContext(DataGridContext);
+  const viewMode = context?.viewMode ?? "cards";
+  if (viewMode !== "table") {
+    return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { children: /* @__PURE__ */ jsx(
+      CheckboxFormatter,
+      {
+        ref,
+        checked: value,
+        disabled,
+        tabIndex,
+        onChange,
+        "aria-label": ariaLabel
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    SelectCellFormatter,
+    {
+      value,
+      disabled,
+      tabIndex,
+      onChange,
+      "aria-label": ariaLabel || "Select"
+    }
+  );
+});
+export {
+  CheckboxCellAdapter as C
+};

package/components/DataGrid/subcomponents/CheckboxCellAdapter/types.d.ts

@@ -0,0 +1,7 @@
+export interface CheckboxCellAdapterProps {
+    value: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
+    onChange: (checked: boolean, isShiftClick: boolean) => void;
+    'aria-label'?: string;
+}

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { b as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { l as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as Pager } from "../../../Pager/Pager.js";

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

@@ -2,10 +2,11 @@ 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, c as ActionsConfigContainerStyled, d as ContainerLeftActionsStyled, e as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, m as ActionsConfigContainerStyled, n as ContainerLeftActionsStyled, o as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {
@@ -19,7 +20,7 @@ function HeaderActions(props) {
     columns
   } = props;
   const isMobile = useIsMobile();
-  const { rowHeights } = useDataGrid();
+  const { rowHeights, viewMode, cardsViewConfig } = useDataGrid();
   const { currentSize } = useComponentSize(size);
   return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
     leftActions,
@@ -30,7 +31,8 @@ function HeaderActions(props) {
       leftActions,
       typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns })
+      withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
+      cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})
     ] }),
     rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: rightActions })
   ] }) });

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, f as RowsCountLabelStyled, g as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, p as RowsCountLabelStyled, q as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/index.js

@@ -4,17 +4,26 @@ 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";
 function Settings(props) {
   const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { size } = useDataGrid();
+  const { size, viewMode } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
+  const modalSettingsCards = useModalSettingsCards(size, columns);
   const { getLabel } = useModuleDictionary();
+  const handleClick = () => {
+    if (viewMode === "table") {
+      modalSettings();
+    } else {
+      modalSettingsCards();
+    }
+  };
   return /* @__PURE__ */ jsx(
     IconButton,
     {
       tooltip: getLabel("data_grid.tooltip_settings"),
-      onClick: modalSettings,
+      onClick: handleClick,
       "aria-label": "settings",
       icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
       "data-testid": "settings-button"

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { h as ColumnsConfigWrapperStyled, i as ColumnsConfigDataGridStyled, j as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, k as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { r as ColumnsConfigWrapperStyled, s as ColumnsConfigDataGridStyled, t as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, u as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {