@m4l/components 9.3.34-JT25112025.beta.2 → 9.3.34-JT26112025.beta.1

package/components/DataGrid/slots/DataGridSlot.js

@@ -6,7 +6,6 @@ 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 { T as Typography } from "../../mui_extended/Typography/Typography.js";
-import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -207,18 +206,6 @@ const NameColumnStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.nameColumn
 })(dataGridStyles.nameColumn);
-const EditablePlaceholderStyled = styled("div", {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.editablePlaceholder
-})(dataGridStyles.editablePlaceholder);
-styled(Typography, {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.editLabel
-})(dataGridStyles.editLabel);
-const IconButtonEditStyled = styled(IconButton, {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.iconButtonEdit
-})(dataGridStyles.iconButtonEdit);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -233,51 +220,49 @@ styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  TableContainerStyled as B,
+  NameColumnStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  NameColumnStyled as F,
-  IconColumnStyled as G,
-  DraggableHeaderRootStyled as H,
-  IconButtonEditStyled as I,
-  ButtonHeaderActionsStyled as J,
-  DraggableWrapperInputBaseStyled as K,
+  DraggableHeaderRootStyled as F,
+  ButtonHeaderActionsStyled as G,
+  DraggableWrapperInputBaseStyled as H,
+  IconColumnStyled as I,
+  IconSearchStyled as J,
+  HeaderInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
-  IconSearchStyled as M,
+  MenuListStyled as M,
   NameColumnIconStyled as N,
-  HeaderInputBaseStyled as O,
-  MenuListStyled as P,
-  HeaderRenderClickStyled as Q,
+  HeaderRenderClickStyled as O,
+  InputTextEditorStyled as P,
   RowsCountRootStyled as R,
-  InputTextEditorStyled as S,
   TableWrapperDataGridStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
   ContentModalSettingStyled as a,
   ContainerLabelValueColumnStyled as b,
   ContentWrapperColumnStyled as c,
-  EditablePlaceholderStyled as d,
-  CardsContainerStyled as e,
-  CardDetailContainerStyled as f,
-  CardHeaderStyled as g,
-  CardHeaderLeftStyled as h,
-  CardHeaderRightStyled as i,
-  CardContentWrapperStyled as j,
-  CardContentStyled as k,
-  CardStyled as l,
-  CheckboxCellWrapperStyled as m,
-  ControlNavigateStyled as n,
-  ActionsConfigContainerStyled as o,
-  ContainerLeftActionsStyled as p,
-  ContainerRightActionsStyled as q,
-  RowsCountLabelStyled as r,
-  RowsCountValueStyled as s,
-  ColumnsConfigWrapperStyled as t,
-  ColumnsConfigDataGridStyled as u,
-  ColumnsConfigSelColumnsStyled as v,
-  ColumnsConfigActiosStyled as w,
-  ContainerToggleCardsStyled as x,
-  CardToggleButtonStyled as y,
-  TextToggleCardButtonStyled as z
+  CardsContainerStyled as d,
+  CardDetailContainerStyled as e,
+  CardHeaderStyled as f,
+  CardHeaderLeftStyled as g,
+  CardHeaderRightStyled as h,
+  CardContentWrapperStyled as i,
+  CardContentStyled as j,
+  CardStyled as k,
+  CheckboxCellWrapperStyled as l,
+  ControlNavigateStyled as m,
+  ActionsConfigContainerStyled as n,
+  ContainerLeftActionsStyled as o,
+  ContainerRightActionsStyled as p,
+  RowsCountLabelStyled as q,
+  RowsCountValueStyled as r,
+  ColumnsConfigWrapperStyled as s,
+  ColumnsConfigDataGridStyled as t,
+  ColumnsConfigSelColumnsStyled as u,
+  ColumnsConfigActiosStyled as v,
+  ContainerToggleCardsStyled as w,
+  CardToggleButtonStyled as x,
+  TextToggleCardButtonStyled as y,
+  TableContainerStyled as z
 };

package/components/DataGrid/subcomponents/Cards/helpers/scrollToCardElement.js

@@ -13,8 +13,8 @@ function scrollToCardElement(containerElement, rowKey, selectorType = "data-attr
       return;
     }
     foundElement.scrollIntoView({
-      behavior: "auto",
-      block: "center"
+      behavior: "smooth",
+      block: "end"
     });
   } catch (error) {
     console.error("scrollToCardElement: Error al hacer scroll", error);

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

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

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

@@ -1,22 +1,13 @@
 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 { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../icons.js";
-import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../slots/DataGridSlot.js";
 function useCardContent({
   row,
-  rows,
-  rowIndex,
   columns,
   onRowsChange
 }) {
   const { getConfigColumns, size } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentSize } = useComponentSize(size);
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
   const cardContent = columns.map((column, index) => {
@@ -43,11 +34,8 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column
                     });
                   }
@@ -67,11 +55,8 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column
                     });
                   }
@@ -79,33 +64,6 @@ function useCardContent({
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            const rawValue = row[column.key];
-            const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
-            const isEditable = !!column.renderEditCell;
-            if (isEditable) {
-              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
-                /* @__PURE__ */ jsx(
-                  ValueColumnStyled,
-                  {
-                    variant: "body",
-                    color: isEmpty ? "text.secondary" : "text.primary",
-                    children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  IconButtonEditStyled,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
-                    onClick: () => {
-                      setEditingColumnKey(column.key);
-                    },
-                    size: currentSize,
-                    role: "button",
-                    "aria-label": "Editar texto"
-                  }
-                )
-              ] });
-            }
             return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
           })()
         ]

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { e as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+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";
@@ -21,6 +21,7 @@ function Cards(props) {
     onCheckedRowsChange
   } = props;
   const containerRef = useRef(null);
+  const hasScrolledToFocusRow = useRef(false);
   const processedColumns = useProcessedColumns(columns);
   const allProcessedColumns = useProcessedColumns(columns, {
     applyVisibilityFilter: false
@@ -28,17 +29,24 @@ function Cards(props) {
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
     viewMode: "cards",
-    onRowsChange,
-    rows
+    onRowsChange
   });
   const cardHeight = useMemo(() => {
+    const imageHeight = processedColumns.reduce((totalHeight, col) => {
+      const formatterHeight = col.renderCell?.__imageFormatterHeight;
+      return formatterHeight ? totalHeight + formatterHeight : totalHeight;
+    }, 0);
     return calculateCardHeight({
       visibleColumnsCount: processedColumns.length,
       customMinHeight: cardsViewConfig?.customRender?.minHeight
-    });
-  }, [processedColumns.length, cardsViewConfig]);
+    }) + imageHeight;
+  }, [processedColumns, cardsViewConfig]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = rows.findIndex(
@@ -59,13 +67,17 @@ function Cards(props) {
         "data-attribute",
         "data-row-key"
       );
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }, 300);
     return () => clearTimeout(timer);
-  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight]);
+  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight, onSelectedRowsChange]);
   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, rowIndex) => {
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row) => {
     const rowKey = rowKeyGetter(row);
     const isChecked = checkedRows?.has(rowKey) || false;
     const showCheckbox = checkedRows !== void 0 && onCheckedRowsChange !== void 0;
@@ -73,8 +85,6 @@ function Cards(props) {
       CardRow,
       {
         row,
-        rows,
-        rowIndex,
         columns: processedColumns,
         originalColumns: allProcessedColumns,
         rowKeyGetter,

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

@@ -5,4 +5,4 @@ import { CardDetailsProps } from '../../types';
  *
  * A diferencia del componente Cards, este muestra TODAS las columnas
  */
-export declare function CardDetails<TRow>({ row, columns, viewColumnsConfig, onRowsChange, size, rows, rowIndex, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;
+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

@@ -1,25 +1,15 @@
 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 { 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 { e as CardDetailContainerStyled, b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../../slots/DataGridSlot.js";
 function CardDetails({
   row,
   columns,
   viewColumnsConfig,
   onRowsChange,
-  size = "medium",
-  rows,
-  rowIndex
+  size = "medium"
 }) {
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentSize } = useComponentSize(size);
-  const currentRow = rows[rowIndex] || row;
   const handleForceRefresh = useCallback(() => {
     setRefreshCounter((prev) => prev + 1);
   }, []);
@@ -27,8 +17,10 @@ function CardDetails({
     if (column.renderCell) {
       return {
         ...column,
-        // Agregar onAfterChange al objeto de la columna
-        onAfterChange: handleForceRefresh
+        // Agregar onAfterChange al objeto de la columna si no existe
+        ...!column.onAfterChange && {
+          onAfterChange: handleForceRefresh
+        }
       };
     }
     return column;
@@ -38,8 +30,7 @@ function CardDetails({
       (config) => config.key === modifiedColumn.key
     );
     const originalColumn = columns[index];
-    const hasInteractiveFormatter = !!modifiedColumn.onAfterChange;
-    const columnKey = hasInteractiveFormatter ? `${originalColumn.key}-${refreshCounter}` : `${originalColumn.key}`;
+    const columnKey = `${originalColumn.key}-${refreshCounter}`;
     const shouldShowTitle = configColumn?.showTitle !== false;
     return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
       ContentWrapperColumnStyled,
@@ -57,21 +48,17 @@ function CardDetails({
             if (modifiedColumn.renderEditCell && editingColumnKey === modifiedColumn.key) {
               return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: modifiedColumn.renderEditCell({
                 column: originalColumn,
-                row: currentRow,
+                row,
                 rowIdx: index,
                 /**
                  * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column: originalColumn
                     });
-                    handleForceRefresh();
                   }
                 },
                 onClose: () => setEditingColumnKey(null)
@@ -79,8 +66,8 @@ function CardDetails({
             }
             if (modifiedColumn.renderCell) {
               const cellContent = modifiedColumn.renderCell({
-                column: modifiedColumn,
-                row: currentRow,
+                column: originalColumn,
+                row,
                 rowIdx: index,
                 isCellSelected: false,
                 tabIndex: -1,
@@ -89,47 +76,16 @@ function CardDetails({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column: originalColumn
                     });
-                    handleForceRefresh();
                   }
                 }
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            const rawValue = currentRow[modifiedColumn.key];
-            const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
-            const isEditable = !!modifiedColumn.renderEditCell;
-            if (isEditable) {
-              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
-                /* @__PURE__ */ jsx(
-                  ValueColumnStyled,
-                  {
-                    variant: "body",
-                    color: isEmpty ? "text.secondary" : "text.primary",
-                    children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  IconButtonEditStyled,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
-                    onClick: () => {
-                      setEditingColumnKey(modifiedColumn.key);
-                    },
-                    size: currentSize,
-                    role: "button",
-                    "aria-label": "Editar texto"
-                  }
-                )
-              ] });
-            }
-            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: rawValue ?? "-" });
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[modifiedColumn.key] ?? "-" });
           })()
         ]
       }

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

@@ -2,7 +2,7 @@ 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 { f as CardHeaderStyled, g as CardHeaderLeftStyled, h 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";

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

@@ -3,9 +3,9 @@ import { CardRowProps } from '../../types';
 /**
  * Componente que muestra una fila de tarjetas.
  */
-declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, rows, rowIndex, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
+declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
 /**
- * Componente que muestra CardRow
+ *
  */
 export declare const CardRow: typeof CardRowComponent;
 export {};

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

@@ -1,14 +1,12 @@
 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 { i as CardContentWrapperStyled, j as CardContentStyled, k 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 { deepEqual } from "fast-equals";
 function CardRowComponent({
   row,
-  rows,
-  rowIndex,
   columns,
   originalColumns,
   rowKeyGetter,
@@ -26,8 +24,6 @@ function CardRowComponent({
   const hasCustomRender = customRender !== void 0;
   const { cardContent } = useCardContent({
     row,
-    rows,
-    rowIndex,
     columns,
     onRowsChange
   });
@@ -92,6 +88,7 @@ function CardRowComponent({
           },
           onClick: onCardClick,
           "data-testid": "data-grid-card",
+          "data-row-key": rowKeyGetter(row),
           children: content
         }
       )

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

@@ -78,14 +78,6 @@ 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)
      */
@@ -148,14 +140,6 @@ export interface CardDetailsProps<TRow> {
     viewColumnsConfig: IViewConfig<any, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
     size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * 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;
 }
 /**
  * Props para el componente CardHeader

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

@@ -3,7 +3,7 @@ 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 { m as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
+import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
   const {
     value,

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { n as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { m 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

@@ -6,7 +6,7 @@ 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, o as ActionsConfigContainerStyled, p as ContainerLeftActionsStyled, q as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, n as ActionsConfigContainerStyled, o as ContainerLeftActionsStyled, p as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {
@@ -29,7 +29,7 @@ function HeaderActions(props) {
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
     /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
       leftActions,
-      typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
+      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
       withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
       cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})

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, r as RowsCountLabelStyled, s as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, q as RowsCountLabelStyled, r as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

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 { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v 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) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/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 { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfigCards(columnsConfigCards, columns) {

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

@@ -6,7 +6,7 @@ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButt
 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 { x as ContainerToggleCardsStyled, y as CardToggleButtonStyled, z as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { w as ContainerToggleCardsStyled, x as CardToggleButtonStyled, y as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
   const { host_static_assets, environment_assets } = useEnvironment();

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

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { B as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { z as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {
@@ -68,6 +68,7 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
+  const hasScrolledToFocusRow = useRef(false);
   const [allowSortChange, setAllowSortChange] = useState(false);
   const handleSortColumnsChange = (newSortColumns) => {
     if (allowSortChange) {
@@ -113,6 +114,10 @@ function Table(props) {
   }, [finalRows]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = finalRows.findIndex(
@@ -120,8 +125,12 @@ function Table(props) {
     );
     if (rowIndex !== -1) {
       ref_data_grid.current?.scrollToCell({ rowIdx: rowIndex });
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }
-  }, [focusOnRowKey, finalRows, rowKeyGetter]);
+  }, [focusOnRowKey, finalRows, rowKeyGetter, onSelectedRowsChange]);
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };