@m4l/components 9.2.56 → 9.2.58

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

@@ -5,12 +5,13 @@ import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-const MobileMenuActions = () => {
+const MobileMenuActions = (props) => {
+  const { columns } = props;
   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, columns);
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
@@ -52,6 +53,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/HeaderActions/subcomponents/Settings/index.d.ts

@@ -0,0 +1,5 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración en el DataGrid
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,9 +3,12 @@ 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";
-function Settings() {
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+function Settings(props) {
+  const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const modalSettings = useModalSettings();
+  const { size } = useDataGrid();
+  const modalSettings = useModalSettings(size, columns);
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -13,7 +16,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,28 +4,35 @@ 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 { d as dictionary } from "../../../../../../dictionary.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) {
-  return columnsConfig.filter((column) => !column.hidden).map(
-    (column) => ({
-      key: column.key,
-      name: column.name,
-      visible: column.visible === void 0 ? true : column.visible,
-      frozen: column.frozen === void 0 ? false : column.frozen,
-      originalIndex: column.orginalIndex,
-      originalFrozen: column.originalFrozen,
-      originalVisible: column.originalVisible
+function getRowsFromColumnsConfig(columnsConfig, columns) {
+  return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
+    (cConfig) => ({
+      key: cConfig.key,
+      name: columns?.find((c) => c.key === cConfig.key)?.name ?? "",
+      visible: cConfig.visible === void 0 ? true : cConfig.visible,
+      frozen: cConfig.frozen === void 0 ? false : cConfig.frozen,
+      originalIndex: cConfig.originalIndex,
+      originalFrozen: cConfig.originalFrozen,
+      originalVisible: cConfig.originalVisible
     })
   );
 }
+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, columns } = props;
   const { getLabel } = useModuleDictionary();
   const [isInit, setIsInit] = useState(true);
-  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
+  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig, columns));
   const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
   const divRef = useRef(null);
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -37,33 +44,34 @@ const ColumnsConfig = forwardRef((props, ref) => {
     () => [
       {
         key: "name",
-        name: getLabel(dictionary.SETTINGS_COLUMN_NAME),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_NAME),
         width: 220,
         resizable: true,
-        type: "string"
+        type: "string",
+        ...getAlignClass("left")
       },
       {
         key: "originalIndex",
-        name: getLabel(dictionary.SETTINGS_COLUMN_POSITION),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_POSITION),
         width: 50,
         type: "number",
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       },
       {
         key: "visible",
-        name: getLabel(dictionary.SETTINGS_COLUMN_VISIBLE),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       },
       {
         key: "frozen",
-        name: getLabel(dictionary.SETTINGS_COLUMNS_FROZEN),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
+        ...getAlignClass("center")
       }
     ],
     [getLabel]
@@ -86,7 +94,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   };
   useEffect(() => {
     if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
+      setRows(getRowsFromColumnsConfig(columnsConfig, columns));
     }
     setIsInit(false);
   }, [columnsConfig]);
@@ -176,28 +184,30 @@ 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,
         {
-          tooltip: getLabel(dictionary.SETTINGS_MOVE_FIRST),
+          tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_FIRST),
           onClick: handleMoveFirst,
           "aria-label": "move first place",
           disabled: rowSelectedIndex < 1,
@@ -207,7 +217,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_MOVE_UP),
+          tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_UP),
           onClick: () => handleMoveUpDownd(-1),
           "aria-label": "move up place",
           disabled: rowSelectedIndex < 1,
@@ -217,7 +227,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_MOVE_LAST),
+          tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_LAST),
           onClick: handleMoveLast,
           "aria-label": "move last place",
           disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
@@ -227,7 +237,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_MOVE_DOWN),
+          tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_DOWN),
           onClick: () => handleMoveUpDownd(1),
           "aria-label": "move down place",
           disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
@@ -237,7 +247,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_VISIBLE_ALL),
+          tooltip: getLabel(DICTIONARY.SETTINGS_VISIBLE_ALL),
           onClick: checkAll,
           "aria-label": "check visible all",
           icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
@@ -246,7 +256,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_NO_VISIBLE_ALL),
+          tooltip: getLabel(DICTIONARY.SETTINGS_NO_VISIBLE_ALL),
           onClick: unCheckAll,
           "aria-label": "un check all",
           icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
@@ -255,7 +265,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel(dictionary.SETTINGS_RESTORE),
+          tooltip: getLabel(DICTIONARY.SETTINGS_RESTORE),
           onClick: restoreAll,
           "aria-label": "Restore columns",
           icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`

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

@@ -1,4 +1,6 @@
-import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
+import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
+import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
 export interface Row {
     key: string;
     name: string;
@@ -16,9 +18,12 @@ export type ColumnsConfigRef = {
 };
 export interface ConfigProps {
     onCloseSettings: () => void;
+    columns: readonly Column<any, any>[];
     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/Settings/types.d.ts

@@ -0,0 +1,4 @@
+import { Column } from 'react-data-grid';
+export interface SettingsProps {
+    columns: readonly Column<any, any>[];
+}

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

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

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

@@ -5,15 +5,15 @@ 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 { h as ContentModalSettingStyled, D as DataGridRootStyled, i as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../../../../slots/DataGridSlot.js";
+import { k 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";
 import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
-const useModalSettings = () => {
+const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
-  const { columnsConfig, onChangeColumnsConfig, currentRowHeight } = useDataGrid();
+  const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
@@ -40,17 +40,23 @@ const useModalSettings = () => {
           title: getLabel("data_grid.settings_title"),
           iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
           onClose: closeModal,
-          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
-            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(TableContainerStyled, { children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(
+          className: "settings-modal",
+          variant: "outlined",
+          type: "modal",
+          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
+            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
               ColumnsConfig,
               {
                 ref,
                 rowHeight: currentRowHeight,
                 columnsConfig,
                 onChangeColumnsConfig: handleColumnsSetting,
-                onCloseSettings
+                onCloseSettings,
+                classes,
+                size,
+                columns
               }
-            ) }) }) }),
+            ) }),
             /* @__PURE__ */ jsxs(ActionsContainer, { children: [
               /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
               /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })

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

@@ -0,0 +1,5 @@
+import { ActionsProps, DataGridProps } from '../../types';
+export interface HeaderActionsProps extends Omit<ActionsProps, 'pagerOptions'> {
+    size: DataGridProps<unknown, unknown>['size'];
+    columns: DataGridProps<unknown, unknown>['columns'];
+}

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -1,12 +1,12 @@
 import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
-import { a as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
+import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index.js";
-import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
   let typeOrder = "string";
@@ -119,9 +119,11 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
     return columns.map((c) => {
+      const cellClass = c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`;
       const newColumn = {
         ...c,
-        cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
+        cellClass,
+        headerCellClass: cellClass
       };
       if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
@@ -134,7 +136,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
         newColumn.withinHeaderRenderer = newColumn.headerRenderer;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
-        newColumn.headerCellClass = filterColumnClassName;
+        newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
       newColumn.headerRenderer = DragAndDropHeaderRenderer;
       return newColumn;

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

@@ -4,11 +4,11 @@ import DataGrid from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";
-import { f as filterHeight } from "./subcomponents/SelectColumn.js";
+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 { i as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 function Table(props) {
   const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
   const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
@@ -16,7 +16,7 @@ function Table(props) {
     rows
   );
   const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } = useDataGrid();
+  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, size } = useDataGrid();
   const ref_data_grid = useRef(null);
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
@@ -50,7 +50,7 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
     DataGrid,
     {
       className: "rdg-light",

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { b as DATAGRID_SEMANTIC_WIDTHS, c as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();

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

@@ -1,10 +1,19 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { SvgIcon } from "@mui/material";
 function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-unChecked", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_13395_49048)", children: /* @__PURE__ */ jsx("path", { d: "M13.0156 2.5H3.01562C2.75041 2.5 2.49605 2.60536 2.30852 2.79289C2.12098 2.98043 2.01563 3.23478 2.01562 3.5V13.5C2.01563 13.7652 2.12098 14.0196 2.30852 14.2071C2.49605 14.3946 2.75041 14.5 3.01562 14.5H13.0156C13.2808 14.5 13.5352 14.3946 13.7227 14.2071C13.9103 14.0196 14.0156 13.7652 14.0156 13.5V3.5C14.0156 3.23478 13.9103 2.98043 13.7227 2.79289C13.5352 2.60536 13.2808 2.5 13.0156 2.5ZM3.01562 13.5V3.5H13.0156V13.5H3.01562Z", fill: "#323B3B" }) }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49048", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] }) });
 }
 function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-checked", children: [
+    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_13395_49057)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M13.4323 2H2.59896C2.31164 2 2.03609 2.11414 1.83293 2.3173C1.62976 2.52047 1.51563 2.79602 1.51562 3.08333V13.9167C1.51563 14.204 1.62976 14.4795 1.83293 14.6827C2.03609 14.8859 2.31164 15 2.59896 15H13.4323C13.7196 15 13.9952 14.8859 14.1983 14.6827C14.4015 14.4795 14.5156 14.204 14.5156 13.9167V3.08333C14.5156 2.79602 14.4015 2.52047 14.1983 2.3173C13.9952 2.11414 13.7196 2 13.4323 2Z", fill: "#323B3B" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.92119 11.6245L4.10001 8.8274L4.99759 7.95696L6.92119 9.84467L11.1014 5.70001L11.9996 6.58993L6.92119 11.6245Z", fill: "#F3F5F7" })
+    ] }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49057", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] });
 }
 function CheckboxIndeterminateIcon(props) {
   return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });

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

@@ -1,15 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { j as DraggableHeaderRootStyled, k as DraggableWrapperInputBaseStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { m as DraggableHeaderRootStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../icons.js";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 function DraggableHeaderRenderer(props) {
   const { onColumnsReorder, column, isCellSelected, ...others } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
+  const { size, classes } = useDataGrid();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
   const [{ isDragging }, drag] = useDrag({
@@ -52,6 +56,7 @@ function DraggableHeaderRenderer(props) {
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,
     {
+      className: classes?.draggableHeaderRoot,
       ref: (newRef) => {
         drag(newRef);
         drop(newRef);
@@ -62,17 +67,27 @@ function DraggableHeaderRenderer(props) {
       },
       children: [
         /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(DraggableWrapperInputBaseStyled, { children: /* @__PURE__ */ jsx(
-          HeaderInputBaseStyled,
-          {
-            inputRef: ref,
-            placeholder: getLabel("data_grid.filter_holder"),
-            tabIndex,
-            type: "text",
-            onChange: handleChange,
-            value: filter
-          }
-        ) })
+        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
+          /* @__PURE__ */ jsx(
+            IconSearchStyled,
+            {
+              src: `${host_static_assets}/${environment_assets}/${pathIcons.search}`,
+              color: "text.secondary",
+              size
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HeaderInputBaseStyled,
+            {
+              inputRef: ref,
+              placeholder: getLabel("data_grid.filter_holder"),
+              tabIndex,
+              type: "text",
+              onChange: handleChange,
+              value: filter
+            }
+          )
+        ] })
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRowSelection, SelectCellFormatter } from "react-data-grid";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
@@ -74,6 +74,6 @@ const SelectColumn = {
 };
 export {
   SelectColumn as S,
-  filterColumnClassName as a,
-  filterHeight as f
+  filterHeight as a,
+  filterColumnClassName as f
 };

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

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { S as Skeleton } from "../../../../../mui_extended/Skeleton/Skeleton.js";
 import { W as WrapperSkeletonStyled } from "../../../../slots/DataGridSlot.js";
 function SkeletonFormatter() {
-  return /* @__PURE__ */ jsx(WrapperSkeletonStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
+  const { size } = useDataGrid();
+  return /* @__PURE__ */ jsx(WrapperSkeletonStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }) });
 }
 export {
   SkeletonFormatter as S

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { o as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();