@m4l/components 9.1.119 → 9.1.121

package/components/DataGrid/subcomponents/Actions/subcomponents/MobileMenuActions/index.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 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 { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
   const { activeFilters, setActiveFilters } = useFilters();
@@ -15,44 +17,43 @@ const MobileMenuActions = () => {
   const menuActions = [
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
       onClick: () => setRowHeightVariant("compact"),
       disabled: currentRowHeightVariant === "compact",
-      label: "data_grid.density_compact"
+      label: getLabel("data_grid.density_compact")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
       onClick: () => setRowHeightVariant("standard"),
       disabled: currentRowHeightVariant === "standard",
-      label: "data_grid.density_standard"
+      label: getLabel("data_grid.density_standard")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
       onClick: () => setRowHeightVariant("confortable"),
       disabled: currentRowHeightVariant === "confortable",
-      label: "data_grid.density_confortable"
+      label: getLabel("data_grid.density_confortable")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
       onClick: () => toggleIcon(),
-      label: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show"
+      label: activeFilters ? getLabel("data_grid.tooltip_filter_hide") : getLabel("data_grid.tooltip_filter_show")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
       onClick: () => modalSettings(),
-      label: "data_grid.tooltip_settings"
+      label: getLabel("data_grid.tooltip_settings")
     }
   ];
   return /* @__PURE__ */ jsx(
     MenuActions,
     {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/menu.svg`,
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
       arrowType: "no-arrow",
-      marginTop: "12px",
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       menuActions

package/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/index.js

@@ -2,16 +2,17 @@ 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";
 function RowsCount() {
-  const { rowsCount, classes } = useDataGrid();
+  const { rowsCount } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx("div", { className: classes.rowsCount, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountLabel, children: getLabel("data_grid.rows") }),
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountValue, children: rowsCount })
+  return /* @__PURE__ */ jsx(RowsCountRootStyled, { children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: getLabel("data_grid.rows") }),
+    /* @__PURE__ */ jsx(RowsCountValueStyled, { children: rowsCount })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountLabel, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountValue, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })
+    /* @__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" }) })
   ] }) });
 }
 export {

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * Componente que renderiza el icono de configuración en el DataGrid
  */
 export declare function Settings(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/index.js

@@ -1,20 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { useEnvironment } from "@m4l/core";
 import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
+import { p as pathIcons } from "../../../../icons.js";
 function Settings() {
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useDataGrid();
   const modalSettings = useModalSettings();
   return /* @__PURE__ */ jsx(
     IconButton,
     {
-      className: classes.actionSettings,
       dictionaryTooltipId: "data_grid.tooltip_settings",
       onClick: modalSettings,
       "aria-label": "settings",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`
     }
   );
 }

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -3,7 +3,9 @@ import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect }
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { W as WrapperColumnsConfig, D as DivSelColumns, a as WrapperDataGrid, C as ColumnActions } from "./styles.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as ColumnsConfigWrapperStyled, d as ColumnsConfigSelColumnsStyled, e as ColumnsConfigDataGridStyled, T as TableWrapperDataGridStyled, f as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { d as dictionary } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/index.js";
 function getRowsFromColumnsConfig(columnsConfig) {
   return columnsConfig.filter((column) => !column.hidden).map(
@@ -20,7 +22,7 @@ function getRowsFromColumnsConfig(columnsConfig) {
 }
 const ColumnsConfig = forwardRef((props, ref) => {
   const refdata_grid = useRef(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes } = props;
+  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, rowHeight } = props;
   const { getLabel } = useModuleDictionary();
   const [isInit, setIsInit] = useState(true);
   const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
@@ -35,21 +37,21 @@ const ColumnsConfig = forwardRef((props, ref) => {
     () => [
       {
         key: "name",
-        name: getLabel("data_grid.settings_column_name"),
-        width: 200,
+        name: getLabel(dictionary.SETTINGS_COLUMN_NAME),
+        width: 220,
         resizable: true,
         type: "string"
       },
       {
         key: "originalIndex",
-        name: getLabel("data_grid.settings_column_position"),
+        name: getLabel(dictionary.SETTINGS_COLUMN_POSITION),
         width: 50,
         type: "number",
         cellClass: "rdg-cell-align-center"
       },
       {
         key: "visible",
-        name: getLabel("data_grid.settings_column_visible"),
+        name: getLabel(dictionary.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
@@ -57,7 +59,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       },
       {
         key: "frozen",
-        name: getLabel("data_grid.settings_column_frozen"),
+        name: getLabel(dictionary.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
@@ -135,7 +137,6 @@ const ColumnsConfig = forwardRef((props, ref) => {
       return {
         visible: rows[rowIndexFinded].visible,
         frozen: rows[rowIndexFinded].frozen
-        // index: rowIndexFinded,
       };
     }
     return void 0;
@@ -174,13 +175,13 @@ const ColumnsConfig = forwardRef((props, ref) => {
     const mySet = /* @__PURE__ */ new Set([row.key]);
     setSelRows(mySet);
   };
-  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, { ref: divRef, className: classes.columnsConfigContainer, children: [
-    /* @__PURE__ */ jsx(DivSelColumns, { className: classes.columnsLabelSetColumns, children: getLabel("data_grid.settings_sel_columns") }),
-    /* @__PURE__ */ jsx(WrapperDataGrid, { className: classes.columnsConfigContent, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+  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,
       {
-        className: classes.columnsConfigGrid,
         ref: refdata_grid,
+        rowHeight,
         columns: columnsdata_grid,
         rows,
         onRowsChange: onInternalRowsChange,
@@ -192,73 +193,73 @@ const ColumnsConfig = forwardRef((props, ref) => {
         defaultColumnOptions: { resizable: true, sortable: true }
       }
     ) }) }),
-    /* @__PURE__ */ jsxs(ColumnActions, { className: classes.columnsConfigActions, children: [
+    /* @__PURE__ */ jsxs(ColumnsConfigActiosStyled, { children: [
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_move_first"),
+          tooltip: getLabel(dictionary.SETTINGS_MOVE_FIRST),
           onClick: handleMoveFirst,
           "aria-label": "move first place",
           disabled: rowSelectedIndex < 1,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveFirstPlace}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_move_up"),
+          tooltip: getLabel(dictionary.SETTINGS_MOVE_UP),
           dictionaryTooltipId: "data_grid.settings_move_up",
           onClick: () => handleMoveUpDownd(-1),
           "aria-label": "move up place",
           disabled: rowSelectedIndex < 1,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveUpPlace}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_move_last"),
+          tooltip: getLabel(dictionary.SETTINGS_MOVE_LAST),
           onClick: handleMoveLast,
           "aria-label": "move last place",
           disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveLastPlace}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_move_down"),
+          tooltip: getLabel(dictionary.SETTINGS_MOVE_DOWN),
           onClick: () => handleMoveUpDownd(1),
           "aria-label": "move down place",
           disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveDownPlace}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_visible_all"),
+          tooltip: getLabel(dictionary.SETTINGS_VISIBLE_ALL),
           onClick: checkAll,
           "aria-label": "check visible all",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_no_visible_all"),
+          tooltip: getLabel(dictionary.SETTINGS_NO_VISIBLE_ALL),
           onClick: unCheckAll,
           "aria-label": "un check all",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          tooltip: getLabel("data_grid.settings_restore"),
+          tooltip: getLabel(dictionary.SETTINGS_RESTORE),
           onClick: restoreAll,
           "aria-label": "Restore columns",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
+          icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`
         }
       )
     ] })

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -1,4 +1,3 @@
-import { Classes } from '../../../../../../classes/types';
 import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
 export interface Row {
     key: string;
@@ -19,7 +18,7 @@ export interface ConfigProps {
     onCloseSettings: () => void;
     columnsConfig: IConfigColumn[];
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
-    classes: Classes;
+    rowHeight: number;
 }
 export interface CheckFormatterProps {
     key: string;

package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index.js

@@ -1,22 +1,22 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
-import { D as DataGridRoot } from "../../../../../styles.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
+import { g as ContentModalSettingStyled, D as DataGridRootStyled, h as TableContainerStyled, T as TableWrapperDataGridStyled } 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 { openModal, closeModal } = useModal();
-  const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
+  const { columnsConfig, onChangeColumnsConfig, currentRowHeight } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
-  const { classes } = useDataGrid();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
     closeModal();
@@ -31,27 +31,27 @@ const useModalSettings = () => {
       initialWidth: 500,
       initialHeight: 680,
       fullScreen: isMobile,
-      window: /* @__PURE__ */ jsxs(
+      window: /* @__PURE__ */ jsx(
         WindowBase,
         {
           title: getLabel("data_grid.settings_title"),
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
-          children: [
-            /* @__PURE__ */ jsx(DataGridRoot, { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, style: { inset: "0" }, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
+            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(TableContainerStyled, { children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(
               ColumnsConfig,
               {
                 ref,
+                rowHeight: currentRowHeight,
                 columnsConfig,
                 onChangeColumnsConfig,
-                onCloseSettings,
-                classes
+                onCloseSettings
               }
             ) }) }) }),
             /* @__PURE__ */ jsxs(ActionsContainer, { children: [
               /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
               /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })
             ] })
-          ]
+          ] })
         }
       )
     });

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

@@ -1,5 +1,5 @@
 import { PagerProps } from '../../../Pager/types';
-import { SettingsProps } from './subcomponents/Settings/types';
+import { SettingsProps } from './subcomponents/types';
 export interface ActionsProps {
     withSettings?: boolean;
     settingsProps?: SettingsProps;

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

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
-import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
+import { a 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";

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

@@ -1,5 +1,5 @@
 import { GridProps, RowKey } from '../../types';
 /**
- * TODO: Documentar
+ * Componente que renderiza la tabla con las filas y columnas
  */
 export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

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

@@ -4,10 +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 { a as filterHeight } from "./subcomponents/SelectColumn.js";
+import { f 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 { h 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(
@@ -15,7 +16,7 @@ function Table(props) {
     rows
   );
   const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, classes } = useDataGrid();
+  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } = useDataGrid();
   const ref_data_grid = useRef(null);
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
@@ -49,10 +50,10 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  return /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, id: "WrapperTable", children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
     DataGrid,
     {
-      className: "fill-grid rdg-light",
+      className: "rdg-light",
       ref: ref_data_grid,
       headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
       columns: finalColumns,

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

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material";
 import { b as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
-  const { rowActionsGetter, classes } = useDataGrid();
+  const { rowActionsGetter } = useDataGrid();
   const theme = useTheme();
   if (rowActionsGetter === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -15,7 +15,6 @@ function ActionsFormatter(props) {
       arrowType: "top-left",
       objItem: props.row,
       menuActions: rowActionsGetter,
-      className: classes.actionsFormatter,
       menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
       marginTop: 1,
       marginLeft: "-11px",

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

@@ -1,12 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useModuleDictionary } from "@m4l/core";
-import { InputBase } from "@mui/material";
 import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
-import { a as filterHeight } from "./SelectColumn.js";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
+import { i as DraggableHeaderRootStyled, j as DraggableWrapperInputBaseStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 function DraggableHeaderRenderer(props) {
   const { onColumnsReorder, column, isCellSelected, ...others } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
@@ -51,7 +50,7 @@ function DraggableHeaderRenderer(props) {
     newColumn.name = newColumn.withinHeaderRenderer(props);
   }
   return /* @__PURE__ */ jsxs(
-    "div",
+    DraggableHeaderRootStyled,
     {
       ref: (newRef) => {
         drag(newRef);
@@ -59,51 +58,21 @@ function DraggableHeaderRenderer(props) {
       },
       style: {
         opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? "#ececec" : void 0,
-        cursor: "move",
-        display: "flex",
-        flexDirection: "column",
-        lineHeight: "1",
-        // activeFilters && column.withFilter ? '30px' : '60px',
-        height: "100%",
-        justifyContent: "center",
-        textAlign: "center"
-        // alignItems: 'center',
-        // justifyContent: 'space-evenly'
+        backgroundColor: isOver ? "#ececec" : void 0
       },
       children: [
         /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(
-          "div",
+        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(DraggableWrapperInputBaseStyled, { children: /* @__PURE__ */ jsx(
+          HeaderInputBaseStyled,
           {
-            className: "filter_cell_div",
-            style: {
-              borderTop: "1px solid var(--rdg-border-color)",
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              // flexGrow: 1,
-              height: `${filterHeight}px`
-              // paddingLeft: '2px', paddingRight: '2px'
-            },
-            children: /* @__PURE__ */ jsx(
-              InputBase,
-              {
-                inputRef: ref,
-                placeholder: getLabel("data_grid.filter_holder"),
-                style: {
-                  width: "100%",
-                  paddingBottom: "2px",
-                  border: "1px solid var(--rdg-border-color)"
-                },
-                tabIndex,
-                type: "text",
-                onChange: handleChange,
-                value: filter
-              }
-            )
+            inputRef: ref,
+            placeholder: getLabel("data_grid.filter_holder"),
+            tabIndex,
+            type: "text",
+            onChange: handleChange,
+            value: filter
           }
-        )
+        ) })
       ]
     }
   );

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

@@ -74,6 +74,6 @@ const SelectColumn = {
 };
 export {
   SelectColumn as S,
-  filterHeight as a,
-  filterColumnClassName as f
+  filterColumnClassName as a,
+  filterHeight as f
 };

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * Componente que renderiza el skeleton de los formatters
  */
 export declare function SkeletonFormatter(): import("react/jsx-runtime").JSX.Element;

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

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

package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts

@@ -1,5 +1,4 @@
 import { EditorProps } from 'react-data-grid';
-export declare const Input: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 /**
  * TODO: Documentar
  */

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

@@ -1,28 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { styled } from "@mui/material";
-const Input = styled("input")(() => ({
-  appearance: "none",
-  boxSizing: "border-box",
-  inlineSize: "100%",
-  blockSize: "100%",
-  paddingBlock: "0",
-  /* padding-inline: 6px; */
-  /* border: 2px solid #ccc; */
-  verticalAlign: "top",
-  textAlign: "right",
-  color: "var(--rdg-color)",
-  backgroundColor: "var(--rdg-background-color)",
-  fontFamily: "inherit",
-  // fontSize: 'var(--rdg-font-size)',
-  "&:focus": {
-    // borderColor: 'var(--rdg-selection-color)',
-    outline: "none"
-  },
-  "&::placeholder": {
-    color: "#999",
-    opacity: "1"
-  }
-}));
+import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();
@@ -34,9 +11,8 @@ function TextEditor({
   onClose
 }) {
   return /* @__PURE__ */ jsx(
-    Input,
+    InputTextEditorStyled,
     {
-      className: "rdg-text-editor",
       ref: autoFocusAndSelect,
       value: row[column.key],
       onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
@@ -59,9 +35,8 @@ function NumberEditor({
     }
   };
   return /* @__PURE__ */ jsx(
-    Input,
+    InputTextEditorStyled,
     {
-      className: "rdg-text-editor",
       ref: autoFocusAndSelect,
       type: "number",
       value: row[column.key],