@m4l/components 9.2.55 → 9.2.56-beta.3

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

@@ -2,6 +2,10 @@ 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";
+import { deepEqual } from "fast-equals";
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -39,7 +43,7 @@ function getColumnsConfig(id, columns, defaultUserColumns = void 0) {
       index: columnConfigIndex > -1 ? columnConfigIndex : index,
       visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
       frozen: columnConfig.frozen ?? false,
-      orginalIndex: index,
+      originalIndex: index,
       originalVisible: column.visible === void 0 ? true : column.visible,
       originalFrozen: column.frozen ?? false
     };
@@ -107,15 +111,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 isFirstRender = useFirstRender([columns, id]);
+  const classes = getComponentClasses(
+    DATAGRID_PREFIX_NAME,
+    {
+      ...DataGridSlots,
+      ...ActionsSlots,
+      ...RowsCountSlots,
+      ...TableSlots,
+      ...TextEditorSlots,
+      ...ColumnsConfigSlots,
+      ...ControlNavigateSlots
+    }
+  );
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -154,13 +171,43 @@ function DataGridProvider(props) {
   }, [defaultUserColumns]);
   useEffect(() => {
     if (!isFirstRender) {
+      const finalColumnsConfig = [];
+      for (let i = 0; i < columnsConfig.length; i++) {
+        const columnIndex = columns.findIndex((c) => c.key === columnsConfig[i]?.key);
+        if (columnIndex !== -1) {
+          const column = columns[columnIndex];
+          finalColumnsConfig.push({
+            ...columnsConfig[i],
+            // name: column.name as string,
+            originalIndex: columnIndex,
+            originalFrozen: column.frozen ?? false,
+            originalVisible: column.visible ?? true
+          });
+        }
+      }
       const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
-      const newColConfig = getColumnsConfig(id, newColumns).map((column, index) => {
-        const indexNewCol = index + columnsConfig.length;
-        return { ...column, index: indexNewCol, orginalIndex: indexNewCol };
-      });
-      columnsConfig.push(...newColConfig);
-      setColumnsWidths((prevColumnsWidth) => new Map([...prevColumnsWidth, ...getColumnsWidth(id, newColumns, defaultUserColumns)]));
+      if (newColumns.length > 0) {
+        const colLength = finalColumnsConfig.length;
+        const newColConfig = getColumnsConfig(id, newColumns).map((columnConfig, index) => {
+          const columnIndex = columns.findIndex((c) => c.key === newColumns[index].key);
+          const column = newColumns[index];
+          const indexNewCol = index + colLength;
+          return {
+            ...columnConfig,
+            index: indexNewCol,
+            name: column.name,
+            originalIndex: columnIndex,
+            originalFrozen: column.frozen ?? false,
+            originalVisible: column.visible ?? true
+          };
+        });
+        finalColumnsConfig.push(...newColConfig);
+      }
+      if (deepEqual(columnsConfig, finalColumnsConfig)) {
+        return;
+      }
+      console.log("useEffect columnsConfig changed", columnsConfig, finalColumnsConfig);
+      setColumnsConfigOptions(finalColumnsConfig);
     }
   }, [columns, id]);
   const onChangeColumnsConfig = useCallback(
@@ -234,7 +281,9 @@ function DataGridProvider(props) {
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
         rowKeyGetter,
-        onChangeUserColumns
+        onChangeUserColumns,
+        classes,
+        size
       },
       children
     }

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

@@ -1,16 +1,16 @@
 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;
     index: number;
     frozen: boolean;
-    name: string;
 }
 export interface IConfigColumn extends BaseConfigColumn {
     hidden: boolean;
-    orginalIndex: number;
+    originalIndex: number;
     originalVisible: boolean;
     originalFrozen: boolean;
 }
@@ -22,6 +22,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 +40,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/dictionary.d.ts

@@ -1,8 +1,9 @@
+export declare const DATAGRID_DICTIONARY_ID = "data_grid";
 /**
  * TODO: Documentar
  */
 export declare function getDataGridComponentsDictionary(): string[];
-export declare const dictionary: {
+export declare const DICTIONARY: {
     LABEL_ACTIONS: string;
     LABEL_ROWS_PER_PAGE: string;
     LABEL_OF: string;

package/components/DataGrid/dictionary.js

@@ -1,30 +1,31 @@
 import { g as getMenuActionsComponentsDictionary } from "../MenuActions/dictionary.js";
 import { g as getModalDictionary } from "../ModalDialog/dictionary.js";
 import { g as getPagerComponentsDictionary } from "../Pager/dicctionary.js";
+const DATAGRID_DICTIONARY_ID = "data_grid";
 function getDataGridComponentsDictionary() {
-  return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getMenuActionsComponentsDictionary()).concat(getModalDictionary());
+  return [DATAGRID_DICTIONARY_ID].concat(getPagerComponentsDictionary()).concat(getMenuActionsComponentsDictionary()).concat(getModalDictionary());
 }
-const dictionary = {
-  DENSITY_COMPACT: `${getDataGridComponentsDictionary()[0]}.density_compact`,
-  DENSITY_STANDARD: `${getDataGridComponentsDictionary()[0]}.density_standard`,
-  DENSITY_CONFORTABLE: `${getDataGridComponentsDictionary()[0]}.density_confortable`,
-  DENSITY_TOOLTIP: `${getDataGridComponentsDictionary()[0]}.tooltip_density`,
-  TOOLTIP_FILTER_HIDE: `${getDataGridComponentsDictionary()[0]}.tooltip_filter_hide`,
-  TOOLTIP_FILTER_SHOW: `${getDataGridComponentsDictionary()[0]}.tooltip_filter_show`,
-  SETTINGS_COLUMN_NAME: `${getDataGridComponentsDictionary()[0]}.settings_column_name`,
-  SETTINGS_COLUMN_POSITION: `${getDataGridComponentsDictionary()[0]}.settings_column_position`,
-  SETTINGS_COLUMN_VISIBLE: `${getDataGridComponentsDictionary()[0]}.settings_column_visible`,
-  SETTINGS_COLUMNS_FROZEN: `${getDataGridComponentsDictionary()[0]}.settings_column_frozen`,
-  SETTINGS_SEL_COLUMNS: `${getDataGridComponentsDictionary()[0]}.settings_sel_columns`,
-  SETTINGS_MOVE_FIRST: `${getDataGridComponentsDictionary()[0]}.settings_move_first`,
-  SETTINGS_MOVE_UP: `${getDataGridComponentsDictionary()[0]}.settings_move_up`,
-  SETTINGS_MOVE_LAST: `${getDataGridComponentsDictionary()[0]}.settings_move_last`,
-  SETTINGS_MOVE_DOWN: `${getDataGridComponentsDictionary()[0]}.settings_move_down`,
-  SETTINGS_VISIBLE_ALL: `${getDataGridComponentsDictionary()[0]}.settings_visible_all`,
-  SETTINGS_NO_VISIBLE_ALL: `${getDataGridComponentsDictionary()[0]}.settings_no_visible_all`,
-  SETTINGS_RESTORE: `${getDataGridComponentsDictionary()[0]}.settings_restore`
+const DICTIONARY = {
+  DENSITY_COMPACT: `${DATAGRID_DICTIONARY_ID}.density_compact`,
+  DENSITY_STANDARD: `${DATAGRID_DICTIONARY_ID}.density_standard`,
+  DENSITY_CONFORTABLE: `${DATAGRID_DICTIONARY_ID}.density_confortable`,
+  DENSITY_TOOLTIP: `${DATAGRID_DICTIONARY_ID}.tooltip_density`,
+  TOOLTIP_FILTER_HIDE: `${DATAGRID_DICTIONARY_ID}.tooltip_filter_hide`,
+  TOOLTIP_FILTER_SHOW: `${DATAGRID_DICTIONARY_ID}.tooltip_filter_show`,
+  SETTINGS_COLUMN_NAME: `${DATAGRID_DICTIONARY_ID}.settings_column_name`,
+  SETTINGS_COLUMN_POSITION: `${DATAGRID_DICTIONARY_ID}.settings_column_position`,
+  SETTINGS_COLUMN_VISIBLE: `${DATAGRID_DICTIONARY_ID}.settings_column_visible`,
+  SETTINGS_COLUMNS_FROZEN: `${DATAGRID_DICTIONARY_ID}.settings_column_frozen`,
+  SETTINGS_SEL_COLUMNS: `${DATAGRID_DICTIONARY_ID}.settings_sel_columns`,
+  SETTINGS_MOVE_FIRST: `${DATAGRID_DICTIONARY_ID}.settings_move_first`,
+  SETTINGS_MOVE_UP: `${DATAGRID_DICTIONARY_ID}.settings_move_up`,
+  SETTINGS_MOVE_LAST: `${DATAGRID_DICTIONARY_ID}.settings_move_last`,
+  SETTINGS_MOVE_DOWN: `${DATAGRID_DICTIONARY_ID}.settings_move_down`,
+  SETTINGS_VISIBLE_ALL: `${DATAGRID_DICTIONARY_ID}.settings_visible_all`,
+  SETTINGS_NO_VISIBLE_ALL: `${DATAGRID_DICTIONARY_ID}.settings_no_visible_all`,
+  SETTINGS_RESTORE: `${DATAGRID_DICTIONARY_ID}.settings_restore`
 };
 export {
-  dictionary as d,
+  DICTIONARY as D,
   getDataGridComponentsDictionary as g
 };

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,40 @@
+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,
+    columns
+  } = 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, { columns }),
+    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, columns })
+    ] }),
+    RightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: RightActions })
+  ] }) });
+}
+export {
+  HeaderActions as H
+};

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

@@ -5,7 +5,7 @@ import { useTheme } from "@mui/material";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { d as dictionary } from "../../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 function Density() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
@@ -20,21 +20,21 @@ function Density() {
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
         onClick: () => setRowHeightVariant("compact"),
         disabled: currentRowHeightVariant === "compact",
-        label: getLabel(dictionary.DENSITY_COMPACT)
+        label: getLabel(DICTIONARY.DENSITY_COMPACT)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
         onClick: () => setRowHeightVariant("standard"),
         disabled: currentRowHeightVariant === "standard",
-        label: getLabel(dictionary.DENSITY_STANDARD)
+        label: getLabel(DICTIONARY.DENSITY_STANDARD)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
         onClick: () => setRowHeightVariant("confortable"),
         disabled: currentRowHeightVariant === "confortable",
-        label: getLabel(dictionary.DENSITY_CONFORTABLE)
+        label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
       }
     ];
   }, [
@@ -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/Filter/index.js

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { d as dictionary } from "../../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -14,7 +14,7 @@ function Filter() {
   return /* @__PURE__ */ jsx(
     IconButton,
     {
-      tooltip: activeFilters ? getLabel(dictionary.TOOLTIP_FILTER_HIDE) : getLabel(dictionary.TOOLTIP_FILTER_SHOW),
+      tooltip: activeFilters ? getLabel(DICTIONARY.TOOLTIP_FILTER_HIDE) : getLabel(DICTIONARY.TOOLTIP_FILTER_SHOW),
       onClick: toggleIcon,
       "aria-label": "filter",
       icon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`

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

@@ -0,0 +1,7 @@
+import { Column } from 'react-data-grid';
+/**
+ * Renderiza las acciones cuando el dispositivo es un móvil
+ */
+export declare const MobileMenuActions: (props: {
+    columns: readonly Column<any, any>[];
+}) => import("react/jsx-runtime").JSX.Element;