@m4l/components 9.2.56-beta.2 → 9.2.57

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

@@ -3,11 +3,10 @@ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButt
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-function Settings() {
+function Settings(props) {
+  const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { size } = useDataGrid();
-  const modalSettings = useModalSettings(size);
+  const modalSettings = useModalSettings(columns);
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -15,8 +14,7 @@ function Settings() {
       tooltip: getLabel("data_grid.tooltip_settings"),
       onClick: modalSettings,
       "aria-label": "settings",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
-      "data-testid": "settings-button"
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`
     }
   );
 }

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

@@ -4,35 +4,28 @@ 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 { 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 { 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 { 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, classes, size } = props;
+  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, rowHeight, 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();
@@ -44,34 +37,33 @@ 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",
-        ...getAlignClass("left")
+        type: "string"
       },
       {
         key: "originalIndex",
-        name: getLabel(dictionary.SETTINGS_COLUMN_POSITION),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_POSITION),
         width: 50,
         type: "number",
-        ...getAlignClass("center")
+        cellClass: "rdg-cell-align-center"
       },
       {
         key: "visible",
-        name: getLabel(dictionary.SETTINGS_COLUMN_VISIBLE),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        ...getAlignClass("center")
+        cellClass: "rdg-cell-align-center"
       },
       {
         key: "frozen",
-        name: getLabel(dictionary.SETTINGS_COLUMNS_FROZEN),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
-        ...getAlignClass("center")
+        cellClass: "rdg-cell-align-center"
       }
     ],
     [getLabel]
@@ -94,7 +86,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   };
   useEffect(() => {
     if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
+      setRows(getRowsFromColumnsConfig(columnsConfig, columns));
     }
     setIsInit(false);
   }, [columnsConfig]);
@@ -184,30 +176,28 @@ const ColumnsConfig = forwardRef((props, ref) => {
     setSelRows(mySet);
   };
   return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ref: divRef, children: [
-    /* @__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__ */ 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(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,
@@ -217,7 +207,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,
@@ -227,7 +217,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),
@@ -237,7 +227,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),
@@ -247,7 +237,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}`
@@ -256,7 +246,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}`
@@ -265,7 +255,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/{HeaderActions → Actions}/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -1,5 +1,5 @@
-import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
+import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
 export interface Row {
     key: string;
     name: string;
@@ -17,11 +17,10 @@ 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/Actions/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/Actions/subcomponents/hooks/useModalSettings/index.d.ts

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

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

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

@@ -0,0 +1,16 @@
+import { PagerProps } from '../../../Pager/types';
+import { SettingsProps } from './subcomponents/Settings/types';
+import { Column } from 'react-data-grid';
+export interface ActionsProps {
+    withSettings?: boolean;
+    settingsProps?: SettingsProps;
+    withRowsCount?: boolean;
+    withPager?: boolean;
+    pagerOptions?: PagerProps;
+    withLocalFilters?: boolean;
+    leftActions?: React.ReactNode;
+    rightActions?: React.ReactNode;
+}
+export type InternalActionsProps = ActionsProps & {
+    columns: readonly Column<any, any>[];
+};

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";
@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -119,11 +121,9 @@ 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,
-        headerCellClass: cellClass
+        cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
       };
       if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
@@ -136,7 +136,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
         newColumn.withinHeaderRenderer = newColumn.headerRenderer;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
-        newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
+        newColumn.headerCellClass = filterColumnClassName;
       }
       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 { 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 { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { i 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, size } = useDataGrid();
+  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } = 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, { ownerState: { size }, 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: "rdg-light",

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

@@ -1,19 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { SvgIcon } from "@mui/material";
 function CheckboxIcon(props) {
-  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)" }) }) })
-  ] }) });
+  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" }) });
 }
 function CheckboxCheckedIcon(props) {
-  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)" }) }) })
-  ] });
+  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" }) });
 }
 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,19 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } 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 { 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";
+import { j as DraggableHeaderRootStyled, k as DraggableWrapperInputBaseStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.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({
@@ -56,7 +52,6 @@ function DraggableHeaderRenderer(props) {
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,
     {
-      className: classes?.draggableHeaderRoot,
       ref: (newRef) => {
         drag(newRef);
         drop(newRef);
@@ -67,27 +62,17 @@ function DraggableHeaderRenderer(props) {
       },
       children: [
         /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        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
-            }
-          )
-        ] })
+        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
+          }
+        ) })
       ]
     }
   );

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.js

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

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

package/components/DataGrid/types.d.ts

@@ -2,13 +2,11 @@ import { Maybe } from '@m4l/core';
 import { Theme } from '@mui/material/styles';
 import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
 import { MenuAction } from '../MenuActions/types';
-import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
+import { ActionsProps } from './subcomponents/Actions/types';
+import { ActionsSlots, ColumnsConfigSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DATAGRID_PREFIX_NAME } from './constants';
 import { IGridConfig } from './contexts/DataGridContext/types';
-import { Sizes } from '@m4l/styles';
-import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/types';
-import { PagerProps } from '../Pager';
 export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
@@ -85,11 +83,6 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
      * las configuraciones de las columnas.
      */
     onChangeUserColumns?: OnChangeUserColumns;
-    /**
-     * Tamaño del componente
-     * @default 'medium'
-     */
-    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -100,16 +93,6 @@ export declare interface DataGridProps<TRow, TSummaryRow, TKey extends RowKey =
     customHeader?: React.ReactNode;
     visibleCustomHeader?: boolean;
 }
-export interface ActionsProps {
-    withSettings?: boolean;
-    settingsProps?: SettingsProps;
-    withRowsCount?: boolean;
-    withPager?: boolean;
-    pagerOptions?: PagerProps;
-    withLocalFilters?: boolean;
-    leftActions?: React.ReactNode;
-    rightActions?: React.ReactNode;
-}
 export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
-export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots;
+export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;

package/components/DragResizeWindowRND/DragResizeWindowRND.styles.js

@@ -5,7 +5,7 @@ const dragResizeWindowStyles = {
    * @param {Object} params - Object containing theme and ownerState properties.
    * @param {Object} params.theme - Theme object for accessing theme variables.
    * @param {Object} params.ownerState - Object holding the component's current state.
-   * @param {boolean} [params.ownerState?.hidden] - Controls visibility; if true, sets the component to be hidden and disables pointer events.
+   * @param {boolean} [params.ownerState.hidden] - Controls visibility; if true, sets the component to be hidden and disables pointer events.
    * @returns {Object} - Style object for the root container.
    */
   root: ({ theme, ownerState }) => ({

package/components/DragResizeWindowRND/slots/DragResizeWindowRNDSlots.d.ts

@@ -1,10 +1,12 @@
 import { Rnd } from 'react-rnd';
 export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: any;
+    ownerState: any;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IconResizeFormatterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: any;
+    ownerState: any;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const RndStyled: import('@emotion/styled').StyledComponent<Pick<import('react-rnd').Props, keyof import('react-rnd').Props> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {
+export declare const RndStyled: import('@emotion/styled').StyledComponent<Pick<import('react-rnd').Props, keyof import('react-rnd').Props> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: any;
+}, {}, {
     ref?: import('react').Ref<Rnd> | undefined;
 }>;