@m4l/components 9.2.54 → 9.2.56-beta.2

package/components/DataGrid/constants.js

@@ -1,6 +1,7 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+const TEST_SKELETON = "data-skeleton";
 var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
@@ -25,6 +26,7 @@ var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
 })(DATAGRID_SEMANTIC_WIDTHS || {});
 export {
   DATAGRID_PREFIX_NAME as D,
+  TEST_SKELETON as T,
   DATAGRID_SELECT_COLUMN_KEY as a,
   DATAGRID_SEMANTIC_WIDTHS as b,
   DATAGRID_ACTIONS_COLUMN_KEY as c

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -2,6 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback, createContext } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
 import { useFirstRender } from "@m4l/graphics";
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -107,15 +110,28 @@ function DataGridProvider(props) {
     rows,
     rowsCount,
     rowActionsGetter,
-    rowHeights = [28, 32, 40],
-    rowHeaderHeights = [28, 32, 40],
-    initialRowHeightVariant = "compact",
+    rowHeights = [32, 40, 48],
+    rowHeaderHeights = [32, 40, 48],
+    initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
     rowKeyGetter,
-    onChangeUserColumns
+    onChangeUserColumns,
+    size
   } = props;
   const isFirstRender = useFirstRender();
+  const classes = getComponentClasses(
+    DATAGRID_PREFIX_NAME,
+    {
+      ...DataGridSlots,
+      ...ActionsSlots,
+      ...RowsCountSlots,
+      ...TableSlots,
+      ...TextEditorSlots,
+      ...ColumnsConfigSlots,
+      ...ControlNavigateSlots
+    }
+  );
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -234,7 +250,9 @@ function DataGridProvider(props) {
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
         rowKeyGetter,
-        onChangeUserColumns
+        onChangeUserColumns,
+        classes,
+        size
       },
       children
     }

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { RowKey, RowHeightVariants, GridProps } from '../../types';
 import { Maybe } from '@m4l/core';
+import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
 export interface BaseConfigColumn {
     key: string;
     visible: boolean;
@@ -22,6 +23,7 @@ export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey =
     id: number | string;
     children: ReactNode;
     rowsCount: number;
+    size: GridProps<any, any, any>['size'];
 }
 export type RowHeightState = {
     rowHVariant: RowHeightVariants;
@@ -39,4 +41,6 @@ export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = R
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
     onChangeColumnsOrder: (sourceKey: string, targetKey: string) => void;
     onChangeColumnWidth: (columnKey: string, width: number) => void;
+    classes?: Record<DataGridSlots | ActionsSlots | RowsCountSlots | TableSlots | TextEditorSlots | ColumnsConfigSlots | ControlNavigateSlots, string>;
+    size: GridProps<any, any, any>['size'];
 }

package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js

@@ -24,7 +24,6 @@ function ColumnIconFormatter(props) {
           children: /* @__PURE__ */ jsx(
             IconStyled,
             {
-              ownerState: {},
               src: iconUrl,
               onClick,
               tooltipContent: tooltip,
@@ -38,7 +37,6 @@ function ColumnIconFormatter(props) {
     return /* @__PURE__ */ jsx(
       IconStyled,
       {
-        ownerState: {},
         src: iconUrl,
         onClick,
         tooltipContent: tooltip,

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Checkbox } from "@mui/material";
+import { C as CheckBox } from "../../../mui_extended/CheckBox/CheckBox.js";
 function ColumnInteractiveCheckFormatter(props) {
   const { row, onRowChange, column } = props;
   const handleChange = () => {
@@ -8,7 +8,7 @@ function ColumnInteractiveCheckFormatter(props) {
     onRowChange(newRow);
   };
   return /* @__PURE__ */ jsx(
-    Checkbox,
+    CheckBox,
     {
       size: "small",
       checked: row[column.key] || false,

package/components/DataGrid/icons.d.ts

@@ -12,4 +12,5 @@ export declare const pathIcons: {
     checkAll: string;
     uncheckAll: string;
     restoreColumns: string;
+    search: string;
 };

package/components/DataGrid/icons.js

@@ -2,8 +2,8 @@ const pathIcons = {
   compact: "frontend/components/data_grid/assets/icons/compact.svg",
   standard: "frontend/components/data_grid/assets/icons/standard.svg",
   confortable: "frontend/components/data_grid/assets/icons/confortable.svg",
-  filter: "frontend/components/data_grid/assets/icons/filter.svg",
-  configuration: "frontend/components/data_grid/assets/icons/configuration.svg",
+  filter: "frontend/components/data_grid/assets/icons/list-filter.svg",
+  configuration: "frontend/components/data_grid/assets/icons/settings.svg",
   menu: "frontend/components/data_grid/assets/icons/menu.svg",
   moveFirstPlace: "frontend/components/data_grid/assets/icons/move_first_place.svg",
   moveUpPlace: "frontend/components/data_grid/assets/icons/move_up_place.svg",
@@ -11,7 +11,8 @@ const pathIcons = {
   moveDownPlace: "frontend/components/data_grid/assets/icons/move_down_place.svg",
   checkAll: "frontend/components/data_grid/assets/icons/check_all.svg",
   uncheckAll: "frontend/components/data_grid/assets/icons/uncheck_all.svg",
-  restoreColumns: "frontend/components/data_grid/assets/icons/restore_columns.svg"
+  restoreColumns: "frontend/components/data_grid/assets/icons/restore_columns.svg",
+  search: "frontend/components/data_grid/assets/icons/search.svg"
 };
 export {
   pathIcons as p

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -4,6 +4,8 @@ export declare enum DataGridSlots {
 }
 export declare enum ActionsSlots {
     actionsRoot = "actionsRoot",
+    containerLeftActions = "containerLeftActions",
+    containerRightActions = "containerRightActions",
     actionsConfigContainer = "actionsConfigContainer"
 }
 export declare enum RowsCountSlots {
@@ -15,6 +17,7 @@ export declare enum TableSlots {
     tableContaniner = "tableContaniner",
     tableWrapperDataGrid = "tableWrapperDataGrid",
     draggableHeaderRoot = "draggableHeaderRoot",
+    iconSearch = "iconSearch",
     draggableWrapperInputBase = "draggableWrapperInputBase",
     headerInputBase = "headerInputBase",
     wrapperSkeleton = "wrapperSkeleton",
@@ -29,3 +32,6 @@ export declare enum ColumnsConfigSlots {
     columnsConfigDataGrid = "columnsConfigDataGrid",
     columnsConfigActios = "columnsConfigActios"
 }
+export declare enum ControlNavigateSlots {
+    controlNavigate = "controlNavigate"
+}

package/components/DataGrid/slots/DataGridEnum.js

@@ -5,6 +5,8 @@ var DataGridSlots = /* @__PURE__ */ ((DataGridSlots2) => {
 })(DataGridSlots || {});
 var ActionsSlots = /* @__PURE__ */ ((ActionsSlots2) => {
   ActionsSlots2["actionsRoot"] = "actionsRoot";
+  ActionsSlots2["containerLeftActions"] = "containerLeftActions";
+  ActionsSlots2["containerRightActions"] = "containerRightActions";
   ActionsSlots2["actionsConfigContainer"] = "actionsConfigContainer";
   return ActionsSlots2;
 })(ActionsSlots || {});
@@ -18,6 +20,7 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["tableContaniner"] = "tableContaniner";
   TableSlots2["tableWrapperDataGrid"] = "tableWrapperDataGrid";
   TableSlots2["draggableHeaderRoot"] = "draggableHeaderRoot";
+  TableSlots2["iconSearch"] = "iconSearch";
   TableSlots2["draggableWrapperInputBase"] = "draggableWrapperInputBase";
   TableSlots2["headerInputBase"] = "headerInputBase";
   TableSlots2["wrapperSkeleton"] = "wrapperSkeleton";
@@ -35,11 +38,16 @@ var ColumnsConfigSlots = /* @__PURE__ */ ((ColumnsConfigSlots2) => {
   ColumnsConfigSlots2["columnsConfigActios"] = "columnsConfigActios";
   return ColumnsConfigSlots2;
 })(ColumnsConfigSlots || {});
+var ControlNavigateSlots = /* @__PURE__ */ ((ControlNavigateSlots2) => {
+  ControlNavigateSlots2["controlNavigate"] = "controlNavigate";
+  return ControlNavigateSlots2;
+})(ControlNavigateSlots || {});
 export {
   ActionsSlots as A,
-  ColumnsConfigSlots as C,
+  ControlNavigateSlots as C,
   DataGridSlots as D,
   RowsCountSlots as R,
   TextEditorSlots as T,
-  TableSlots as a
+  ColumnsConfigSlots as a,
+  TableSlots as b
 };

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -11,6 +11,8 @@ export declare const CustomHeaderStyled: import('@emotion/styled').StyledCompone
  * ****************
  */
 export declare const ActionsRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerLeftActionsStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerRightActionsStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ActionsConfigContainerStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * ****************
@@ -37,6 +39,7 @@ export declare const ColumnsConfigActiosStyled: import('@emotion/styled').Styled
 export declare const TableContainerStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TableWrapperDataGridStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const DraggableHeaderRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconSearchStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 export declare const DraggableWrapperInputBaseStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const HeaderInputBaseStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 export declare const WrapperSkeletonStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -47,3 +50,9 @@ export declare const ContentModalSettingStyled: import('@emotion/styled').Styled
  * ****************
  */
 export declare const InputTextEditorStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').ClassAttributes<HTMLInputElement> | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, {}>;
+/**
+ * ****************
+ * Slots ControlNavigate
+ * ****************
+ */
+export declare const ControlNavigateStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,8 +1,9 @@
 import { styled } from "@mui/material/styles";
 import { InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, a as TableSlots, R as RowsCountSlots, C as ColumnsConfigSlots } from "./DataGridEnum.js";
-import { d as dataGridStyles } from "../styles.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
+import { d as dataGridStyles } from "../Datagrid.styles.js";
+import { I as Icon } from "../../Icon/Icon.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -15,6 +16,14 @@ const ActionsRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ActionsSlots.actionsRoot
 })(dataGridStyles.actionsRoot);
+const ContainerLeftActionsStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: ActionsSlots.containerLeftActions
+})(dataGridStyles.containerLeftActions);
+const ContainerRightActionsStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: ActionsSlots.containerRightActions
+})(dataGridStyles.containerRightActions);
 const ActionsConfigContainerStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ActionsSlots.actionsConfigContainer
@@ -59,6 +68,10 @@ const DraggableHeaderRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.draggableHeaderRoot
 })(dataGridStyles.draggableHeaderRoot);
+const IconSearchStyled = styled(Icon, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.iconSearch
+})(dataGridStyles.iconSearch);
 const DraggableWrapperInputBaseStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.draggableWrapperInputBase
@@ -79,24 +92,32 @@ const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
 })(dataGridStyles.inputTexEditor);
+const ControlNavigateStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: ControlNavigateSlots.controlNavigate
+})(dataGridStyles.controlNavigate);
 export {
   ActionsRootStyled as A,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   HeaderInputBaseStyled as H,
-  InputTextEditorStyled as I,
+  IconSearchStyled as I,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
-  ActionsConfigContainerStyled as a,
-  RowsCountLabelStyled as b,
-  RowsCountValueStyled as c,
-  ColumnsConfigWrapperStyled as d,
-  ColumnsConfigSelColumnsStyled as e,
-  ColumnsConfigDataGridStyled as f,
-  ColumnsConfigActiosStyled as g,
-  ContentModalSettingStyled as h,
-  TableContainerStyled as i,
-  DraggableHeaderRootStyled as j,
-  DraggableWrapperInputBaseStyled as k
+  ControlNavigateStyled as a,
+  ActionsConfigContainerStyled as b,
+  ContainerLeftActionsStyled as c,
+  ContainerRightActionsStyled as d,
+  RowsCountLabelStyled as e,
+  RowsCountValueStyled as f,
+  ColumnsConfigWrapperStyled as g,
+  ColumnsConfigDataGridStyled as h,
+  ColumnsConfigSelColumnsStyled as i,
+  ColumnsConfigActiosStyled as j,
+  ContentModalSettingStyled as k,
+  TableContainerStyled as l,
+  DraggableHeaderRootStyled as m,
+  DraggableWrapperInputBaseStyled as n,
+  InputTextEditorStyled as o
 };

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.d.ts

@@ -0,0 +1,5 @@
+import { ControlNavigateProps } from './types';
+/**
+ * Componente que renderiza el control de navegacion del DataGrid
+ */
+export declare const ControlNavigate: (props: ControlNavigateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useIsMobile } from "@m4l/graphics";
+import { a 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";
+const ControlNavigate = (props) => {
+  const {
+    withRowsCount = true,
+    withPager = true,
+    pagerOptions,
+    size
+  } = props;
+  const isMobile = useIsMobile();
+  const { currentSize } = useComponentSize(size);
+  return /* @__PURE__ */ jsxs(ControlNavigateStyled, { ownerState: { size: currentSize }, children: [
+    withRowsCount && !withPager && !isMobile && /* @__PURE__ */ jsx(RowsCount, {}),
+    withPager && pagerOptions && /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...pagerOptions,
+        size,
+        totalRecords: pagerOptions.totalRecords
+      }
+    )
+  ] });
+};
+export {
+  ControlNavigate as C
+};

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

@@ -0,0 +1,2 @@
+export { ControlNavigate } from './ControlNavigate';
+export type { ControlNavigateProps } from './types';

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

@@ -0,0 +1,7 @@
+import { ActionsProps, DataGridProps } from '../../types';
+/**
+ * Props del componente ControlNavigate
+ */
+export interface ControlNavigateProps extends Pick<ActionsProps, 'withRowsCount' | 'withPager' | 'pagerOptions'> {
+    size?: DataGridProps<unknown, unknown>['size'];
+}

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

@@ -0,0 +1,5 @@
+import { HeaderActionsProps } from './types';
+/**
+ * Componente que renderiza las acciones del DataGrid
+ */
+export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+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 { 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, b as ActionsConfigContainerStyled, c as ContainerLeftActionsStyled, d as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+function HeaderActions(props) {
+  const {
+    withSettings = true,
+    settingsProps,
+    withLocalFilters,
+    leftActions: LeftActions,
+    rightActions: RightActions,
+    withPager,
+    size
+  } = props;
+  const isMobile = useIsMobile();
+  const { rowHeights } = useDataGrid();
+  const { currentSize } = useComponentSize(size);
+  return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    LeftActions,
+    /* @__PURE__ */ jsx(MobileMenuActions, {}),
+    RightActions
+  ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
+    /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
+      LeftActions,
+      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
+      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps })
+    ] }),
+    RightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: RightActions })
+  ] }) });
+}
+export {
+  HeaderActions as H
+};

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

@@ -62,11 +62,12 @@ function Density() {
     {
       arrowType: "right-top",
       menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
-      anchorOrigin: { vertical: "top", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
       menuActions,
       icon: currenViewIcon,
-      toolTip: getLabel(dictionary.DENSITY_TOOLTIP)
+      toolTip: getLabel(dictionary.DENSITY_TOOLTIP),
+      paperProps: { style: { marginTop: "5px" } }
     }
   );
 }

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

@@ -8,9 +8,9 @@ import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 const MobileMenuActions = () => {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
+  const { currentRowHeightVariant, setRowHeightVariant, size } = useDataGrid();
   const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings();
+  const modalSettings = useModalSettings(size);
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
@@ -52,6 +52,7 @@ const MobileMenuActions = () => {
   return /* @__PURE__ */ jsx(
     MenuActions,
     {
+      className: "mobile-menu-actions",
       icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
       arrowType: "no-arrow",
       anchorOrigin: { vertical: "bottom", horizontal: "right" },

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

@@ -2,14 +2,14 @@ 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, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, e as RowsCountLabelStyled, f as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
-  const { rowsCount } = useDataGrid();
+  const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(RowsCountRootStyled, { children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: getLabel("data_grid.rows") }),
-    /* @__PURE__ */ jsx(RowsCountValueStyled, { children: rowsCount })
+    /* @__PURE__ */ jsx(RowsCountLabelStyled, { ownerState: { size }, children: getLabel("data_grid.rows") }),
+    /* @__PURE__ */ jsx(RowsCountValueStyled, { ownerState: { size }, children: rowsCount })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
     /* @__PURE__ */ jsx(RowsCountValueStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })

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

@@ -3,9 +3,11 @@ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButt
 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";
 function Settings() {
   const { host_static_assets, environment_assets } = useEnvironment();
-  const modalSettings = useModalSettings();
+  const { size } = useDataGrid();
+  const modalSettings = useModalSettings(size);
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -13,7 +15,8 @@ function Settings() {
       tooltip: getLabel("data_grid.tooltip_settings"),
       onClick: modalSettings,
       "aria-label": "settings",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      "data-testid": "settings-button"
     }
   );
 }

package/components/DataGrid/subcomponents/{Actions → 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 { d as ColumnsConfigWrapperStyled, e as ColumnsConfigSelColumnsStyled, f as ColumnsConfigDataGridStyled, T as TableWrapperDataGridStyled, g as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { g as ColumnsConfigWrapperStyled, h as ColumnsConfigDataGridStyled, i as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, j 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) {
@@ -20,9 +20,16 @@ function getRowsFromColumnsConfig(columnsConfig) {
     })
   );
 }
+const getAlignClass = (align) => {
+  const cellClass = align !== void 0 ? `rdg-cell-align-${align}` : "";
+  return {
+    cellClass,
+    headerCellClass: cellClass
+  };
+};
 const ColumnsConfig = forwardRef((props, ref) => {
   const refdata_grid = useRef(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, rowHeight } = props;
+  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, rowHeight, classes, size } = props;
   const { getLabel } = useModuleDictionary();
   const [isInit, setIsInit] = useState(true);
   const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
@@ -40,14 +47,15 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(dictionary.SETTINGS_COLUMN_NAME),
         width: 220,
         resizable: true,
-        type: "string"
+        type: "string",
+        ...getAlignClass("left")
       },
       {
         key: "originalIndex",
         name: getLabel(dictionary.SETTINGS_COLUMN_POSITION),
         width: 50,
         type: "number",
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       },
       {
         key: "visible",
@@ -55,7 +63,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       },
       {
         key: "frozen",
@@ -63,7 +71,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       }
     ],
     [getLabel]
@@ -176,23 +184,25 @@ const ColumnsConfig = forwardRef((props, ref) => {
     setSelRows(mySet);
   };
   return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ref: divRef, children: [
-    /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { children: getLabel(dictionary.SETTINGS_SEL_COLUMNS) }),
-    /* @__PURE__ */ jsx(ColumnsConfigDataGridStyled, { children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(
-      DataGrid,
-      {
-        ref: refdata_grid,
-        rowHeight,
-        columns: columnsdata_grid,
-        rows,
-        onRowsChange: onInternalRowsChange,
-        selectedRows: selRows,
-        onSelectedRowsChange: onInternalSelectedRowsChange,
-        onRowClick,
-        rowKeyGetter: (row) => row.key,
-        cellNavigationMode: "CHANGE_ROW",
-        defaultColumnOptions: { resizable: true, sortable: true }
-      }
-    ) }) }),
+    /* @__PURE__ */ jsxs(ColumnsConfigDataGridStyled, { children: [
+      /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { ownerState: { size }, children: getLabel(dictionary.SETTINGS_SEL_COLUMNS) }),
+      /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { className: classes?.tableWrapperDataGrid, ownerState: { size }, children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          ref: refdata_grid,
+          rowHeight,
+          columns: columnsdata_grid,
+          rows,
+          onRowsChange: onInternalRowsChange,
+          selectedRows: selRows,
+          onSelectedRowsChange: onInternalSelectedRowsChange,
+          onRowClick,
+          rowKeyGetter: (row) => row.key,
+          cellNavigationMode: "CHANGE_ROW",
+          defaultColumnOptions: { resizable: true, sortable: true }
+        }
+      ) })
+    ] }),
     /* @__PURE__ */ jsxs(ColumnsConfigActiosStyled, { children: [
       /* @__PURE__ */ jsx(
         IconButton,

package/components/DataGrid/subcomponents/{Actions → HeaderActions}/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -1,4 +1,5 @@
-import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
+import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
+import { GridProps } from '../../../../../../types';
 export interface Row {
     key: string;
     name: string;
@@ -19,6 +20,8 @@ export interface ConfigProps {
     columnsConfig: IConfigColumn[];
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
     rowHeight: number;
+    classes: DataGridContextProps<unknown, unknown>['classes'];
+    size: GridProps<unknown, unknown>['size'];
 }
 export interface CheckFormatterProps {
     key: string;

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.d.ts

@@ -0,0 +1,7 @@
+import { GridProps } from '../../../../../types';
+/**
+ * Hook que renderiza el modal de configuración de las columnas
+ * de la tabla
+ */
+declare const useModalSettings: (size: GridProps<unknown, unknown>["size"]) => () => void;
+export default useModalSettings;