@m4l/components 9.3.25-beta.0 → 9.3.26

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

@@ -2,32 +2,25 @@ 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";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-function CardHeader({ row, onOpenDetail }) {
-  const {
-    rowKeyGetter,
-    checkedRows,
-    onCheckedRowsChange,
-    rowActionsGetter,
-    size
-  } = useDataGrid();
+function CardHeader({
+  row,
+  onOpenDetail,
+  isChecked,
+  showCheckbox,
+  checkedRows,
+  onCheckedRowsChange
+}) {
+  const { rowKeyGetter, 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) {
+      if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
       const newCheckedRows = new Set(checkedRows);
@@ -58,7 +51,7 @@ function CardHeader({ row, onOpenDetail }) {
     showCheckbox && /* @__PURE__ */ jsx(CardHeaderLeftStyled, { children: /* @__PURE__ */ jsx(
       CheckboxCellAdapter,
       {
-        value: isChecked,
+        value: isChecked ?? false,
         tabIndex: -1,
         onChange,
         "aria-label": "Select"
@@ -74,7 +67,7 @@ function CardHeader({ row, onOpenDetail }) {
           "data-testid": `card-details-button-${rowKey}`,
           onClick: (e) => {
             e.stopPropagation();
-            onOpenDetail();
+            onOpenDetail(row);
           }
         }
       ),

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

@@ -3,4 +3,9 @@ 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;
+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;
+/**
+ *
+ */
+export declare const CardRow: typeof CardRowComponent;
+export {};

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

@@ -1,11 +1,11 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { j as CardStyled } from "../../../../slots/DataGridSlot.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+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 { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-function CardRow({
+import { deepEqual } from "fast-equals";
+function CardRowComponent({
   row,
   columns,
   originalColumns,
@@ -13,30 +13,56 @@ function CardRow({
   selectedRows,
   onSelectedRowsChange,
   onRowsChange,
-  customRender
+  customRender,
+  minHeight,
+  isChecked,
+  checkedRows,
+  showCheckbox,
+  onCheckedRowsChange,
+  onOpenDetail
 }) {
-  const { checkedRows } = useDataGrid();
   const hasCustomRender = customRender !== void 0;
-  const { cardContent, columnsCount, onOpenDetail } = useCardContent({
+  const { cardContent } = 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
+    return /* @__PURE__ */ jsxs(CardContentWrapperStyled, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          row,
+          onOpenDetail,
+          isChecked,
+          showCheckbox,
+          checkedRows,
+          onCheckedRowsChange
+        }
+      ),
+      /* @__PURE__ */ jsx(CardContentStyled, { children: cardContent })
     ] });
-  }, [hasCustomRender, customRender, row, cardContent, onOpenDetail]);
-  const onCardClick = () => {
+  }, [
+    hasCustomRender,
+    customRender,
+    row,
+    cardContent,
+    isChecked,
+    showCheckbox,
+    checkedRows,
+    onCheckedRowsChange
+  ]);
+  const onCardClick = (e) => {
+    const target = e.target;
+    const isInteractiveElement = target.closest(
+      'input, button, a, [role="button"], .MuiCheckbox-root, .MuiIconButton-root'
+    );
+    if (isInteractiveElement) {
+      return;
+    }
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.has(rowKeyGetter(row))) {
         return;
@@ -45,27 +71,32 @@ function CardRow({
       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,
+  return /* @__PURE__ */ jsx(
+    LazyLoadCard,
     {
-      variant: "outlined",
-      selected: selectedRows?.has(rowKeyGetter(row)),
-      ownerState: {
-        checked: isChecked,
-        selected: selectedRows?.has(rowKeyGetter(row))
-      },
-      onClick: onCardClick,
-      "data-testid": "data-grid-card",
-      children: content
+      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",
+          children: content
+        }
+      )
     }
-  ) });
+  );
 }
+const CardRow = React.memo(CardRowComponent, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});
 export {
   CardRow as C
 };

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

@@ -22,7 +22,7 @@ const IntersectCardStyled = styled("div")(
   })
 );
 function IntersectCard(props) {
-  const { setIsVisible, threshold, minHeight = 120 } = props;
+  const { setIsVisible, threshold, minHeight = 120, rowKey } = props;
   const [observer] = useState(
     getObserver(threshold)
   );
@@ -39,7 +39,14 @@ function IntersectCard(props) {
       }
     };
   }, [observer, setIsVisible]);
-  return /* @__PURE__ */ jsx(IntersectCardStyled, { ref: intersectCardRef, minHeight });
+  return /* @__PURE__ */ jsx(
+    IntersectCardStyled,
+    {
+      ref: intersectCardRef,
+      minHeight,
+      "data-row-key": rowKey
+    }
+  );
 }
 export {
   IntersectCard as I

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

@@ -9,7 +9,8 @@ function LazyLoadCard(props) {
     children,
     enableIntersectionObserver = true,
     threshold = 100,
-    minHeight = 120
+    minHeight = 120,
+    rowKey
   } = props;
   const [isVisible, setIsVisible] = useState(
     !(enableIntersectionObserver && isIntersectionObserverAvailable())
@@ -24,7 +25,8 @@ function LazyLoadCard(props) {
       {
         setIsVisible,
         threshold,
-        minHeight
+        minHeight,
+        rowKey
       }
     )
   ) });

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

@@ -25,6 +25,10 @@ export interface IntersectCardProps {
      * @default '120px'
      */
     minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
 }
 /**
  * Tipo extendido para el elemento div que incluye el método setIsVisible.
@@ -61,6 +65,10 @@ export interface LazyLoadCardProps {
      * @default 120
      */
     minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
 }
 /**
  * Props para el componente CardRow
@@ -98,6 +106,30 @@ export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
      * 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;
 }
 /**
  * Props para el componente CardDetails
@@ -114,5 +146,22 @@ export interface CardDetailsProps<TRow> {
  */
 export interface CardHeaderProps<TRow> {
     row: TRow;
-    onOpenDetail: () => void;
+    onOpenDetail: (row: TRow) => void;
+    isChecked?: boolean;
+    showCheckbox?: boolean;
+    checkedRows?: ReadonlySet<any>;
+    onCheckedRowsChange?: (rows: ReadonlySet<any>) => void;
+}
+/**
+ * Props para el helper calculateCardHeight
+ */
+export interface CalculateCardHeightProps {
+    /**
+     * Número de columnas visibles en la card
+     */
+    visibleColumnsCount: number;
+    /**
+     * Altura mínima personalizada (opcional, para customRender)
+     */
+    customMinHeight?: number;
 }

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 { k as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
+import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
   const {
     value,
@@ -15,7 +15,10 @@ const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref)
   const context = useContext(DataGridContext);
   const viewMode = context?.viewMode ?? "cards";
   if (viewMode !== "table") {
-    return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { children: /* @__PURE__ */ jsx(
+    const handleClick = (e) => {
+      e.stopPropagation();
+    };
+    return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
       CheckboxFormatter,
       {
         ref,

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { l 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, m as ActionsConfigContainerStyled, n as ContainerLeftActionsStyled, o 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 {

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, p as RowsCountLabelStyled, q 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 { r as ColumnsConfigWrapperStyled, s as ColumnsConfigDataGridStyled, t as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, u 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 { r as ColumnsConfigWrapperStyled, s as ColumnsConfigDataGridStyled, t as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, u 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 { v as ContainerToggleCardsStyled, w as CardToggleButtonStyled, x 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/HeaderActions/subcomponents/hooks/useModalSettings/index.js

@@ -5,7 +5,7 @@ import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { b as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
+import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";

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

@@ -4,7 +4,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
-import { b as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
+import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { C as ColumnsConfigCards } from "../../Settings/subcomponents/ColumnsConfigCards/index.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";

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 { y 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) {
@@ -20,6 +20,7 @@ function Table(props) {
     selectedRows,
     onSelectedRowsChange,
     defaultColumnOptions: defaultColumnOptionsProp,
+    focusOnRowKey,
     ...restProps
   } = props;
   const renderCheckbox = (formatterProps) => {
@@ -57,6 +58,7 @@ function Table(props) {
     setRowsCount,
     currentRowHeight,
     currentRowHeaderHeight,
+    currentRowHeightVariant,
     size,
     sortColumns,
     setSortColumns
@@ -109,6 +111,17 @@ function Table(props) {
   useEffect(() => {
     setRowsCount(finalRows.length);
   }, [finalRows]);
+  useEffect(() => {
+    if (!focusOnRowKey) {
+      return;
+    }
+    const rowIndex = finalRows.findIndex(
+      (row) => rowKeyGetter(row) === focusOnRowKey
+    );
+    if (rowIndex !== -1) {
+      ref_data_grid.current?.scrollToCell({ rowIdx: rowIndex });
+    }
+  }, [focusOnRowKey, finalRows, rowKeyGetter]);
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
@@ -123,47 +136,53 @@ function Table(props) {
     Boolean(defaultColumnOptions.sortable),
     handleSortFromPopover
   );
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
-    /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-      DataGrid,
-      {
-        className: "rdg-light",
-        ref: ref_data_grid,
-        headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-        columns: finalColumns,
-        sortColumns,
-        onSortColumnsChange: handleSortColumnsChange,
-        onColumnResize,
-        rows: finalRows,
-        onRowsChange,
-        selectedRows,
-        onSelectedRowsChange,
-        onCellClick,
-        rowHeight: currentRowHeight,
-        rowKeyGetter,
-        renderers: {
-          renderCheckbox
-        },
-        defaultColumnOptions,
-        ...restProps
-      }
-    ) }),
-    popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
-      HeaderRenderClick,
-      {
-        externalOpen: popoverState.anchorEl,
-        onOpen: (open) => {
-          if (!open) {
-            setPopoverState({
-              anchorEl: null,
-              columnKey: null
-            });
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(
+    TableWrapperDataGridStyled,
+    {
+      ownerState: { size, currentRowHeightVariant, currentRowHeight },
+      children: [
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+          DataGrid,
+          {
+            className: "rdg-light",
+            ref: ref_data_grid,
+            headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+            columns: finalColumns,
+            sortColumns,
+            onSortColumnsChange: handleSortColumnsChange,
+            onColumnResize,
+            rows: finalRows,
+            onRowsChange,
+            selectedRows,
+            onSelectedRowsChange,
+            onCellClick,
+            rowHeight: currentRowHeight,
+            rowKeyGetter,
+            renderers: {
+              renderCheckbox
+            },
+            defaultColumnOptions,
+            ...restProps
           }
-        },
-        menuActions
-      }
-    )
-  ] }) });
+        ) }),
+        popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
+          HeaderRenderClick,
+          {
+            externalOpen: popoverState.anchorEl,
+            onOpen: (open) => {
+              if (!open) {
+                setPopoverState({
+                  anchorEl: null,
+                  columnKey: null
+                });
+              }
+            },
+            menuActions
+          }
+        )
+      ]
+    }
+  ) });
 }
 export {
   Table as T

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

@@ -2,25 +2,23 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { C as CheckboxIndeterminateIcon, a as CheckboxCheckedIcon, b as CheckboxIcon } from "./CustomIcons.js";
 import { Checkbox } from "@mui/material";
-const CheckboxFormatter = forwardRef(
-  function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
-    function handleChange(e) {
-      onChange(e.target.checked, e.nativeEvent.shiftKey);
-    }
-    return /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked,
-        size: "small",
-        icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-        checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-        indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-        onChange: handleChange,
-        ...props
-      }
-    );
+const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
   }
-);
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      size: "small",
+      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
+      onChange: handleChange,
+      ...props
+    }
+  );
+});
 export {
   CheckboxFormatter as C
 };

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

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, z as NameColumnStyled, I as IconColumnStyled, B as DraggableHeaderRootStyled, F as ButtonHeaderActionsStyled, G as DraggableWrapperInputBaseStyled, H as IconSearchStyled, J as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
@@ -21,7 +21,7 @@ function DraggableHeaderRenderer(props) {
     headerTabIndex !== void 0 && headerTabIndex >= 0
   );
   const { getLabel } = useModuleDictionary();
-  const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
+  const { size, classes, externalSortSettings, externalFilterSettings, currentRowHeightVariant } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
@@ -117,7 +117,7 @@ function DraggableHeaderRenderer(props) {
         }
       };
       newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { style: { justifyContent: getJustifyContent() }, children: [
-        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(NameColumnStyled, { ownerState: { size, currentRowHeightVariant }, children: newColumn.name }),
         /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });
     }

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, K as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";