@m4l/components 9.2.56-beta.2 → 9.2.56-beta.3

package/.storybook/decorators/WithWindowsToolsContext/WithContextWindowTools.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+/**
+ * Decorador para proveer los contextos de WindowTools y DynamicMFParms.
+ */
+export declare const WithContextWindowTools: (Story: StoryFn<any>, context: any) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/DataGrid.js

@@ -87,7 +87,14 @@ function DataGrid(props) {
             withActions && actionsProps && /* @__PURE__ */ jsx(
               HeaderActions,
               {
-                ...{ withSettings, settingsProps, withRowsCount, withLocalFilters, leftActions, rightActions, withPager, pagerOptions },
+                withSettings,
+                settingsProps,
+                withRowsCount,
+                withLocalFilters,
+                leftActions,
+                rightActions,
+                withPager,
+                columns,
                 size: currentSize
               }
             ),

package/components/DataGrid/Datagrid.styles.js

@@ -21,6 +21,8 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings.sp3,
     height: "100%",
     width: "100%",
+    flex: 1,
+    overflow: "auto",
     "& .rdg .MuiCheckbox-root": {
       "& > svg": {
         color: theme.vars.palette.text.secondary

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

@@ -5,6 +5,7 @@ import { useFirstRender } from "@m4l/graphics";
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DATAGRID_PREFIX_NAME } from "../../constants.js";
 import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
+import { deepEqual } from "fast-equals";
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -42,7 +43,7 @@ function getColumnsConfig(id, columns, defaultUserColumns = void 0) {
       index: columnConfigIndex > -1 ? columnConfigIndex : index,
       visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
       frozen: columnConfig.frozen ?? false,
-      orginalIndex: index,
+      originalIndex: index,
       originalVisible: column.visible === void 0 ? true : column.visible,
       originalFrozen: column.frozen ?? false
     };
@@ -119,7 +120,7 @@ function DataGridProvider(props) {
     onChangeUserColumns,
     size
   } = props;
-  const isFirstRender = useFirstRender();
+  const isFirstRender = useFirstRender([columns, id]);
   const classes = getComponentClasses(
     DATAGRID_PREFIX_NAME,
     {
@@ -170,13 +171,43 @@ function DataGridProvider(props) {
   }, [defaultUserColumns]);
   useEffect(() => {
     if (!isFirstRender) {
+      const finalColumnsConfig = [];
+      for (let i = 0; i < columnsConfig.length; i++) {
+        const columnIndex = columns.findIndex((c) => c.key === columnsConfig[i]?.key);
+        if (columnIndex !== -1) {
+          const column = columns[columnIndex];
+          finalColumnsConfig.push({
+            ...columnsConfig[i],
+            // name: column.name as string,
+            originalIndex: columnIndex,
+            originalFrozen: column.frozen ?? false,
+            originalVisible: column.visible ?? true
+          });
+        }
+      }
       const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
-      const newColConfig = getColumnsConfig(id, newColumns).map((column, index) => {
-        const indexNewCol = index + columnsConfig.length;
-        return { ...column, index: indexNewCol, orginalIndex: indexNewCol };
-      });
-      columnsConfig.push(...newColConfig);
-      setColumnsWidths((prevColumnsWidth) => new Map([...prevColumnsWidth, ...getColumnsWidth(id, newColumns, defaultUserColumns)]));
+      if (newColumns.length > 0) {
+        const colLength = finalColumnsConfig.length;
+        const newColConfig = getColumnsConfig(id, newColumns).map((columnConfig, index) => {
+          const columnIndex = columns.findIndex((c) => c.key === newColumns[index].key);
+          const column = newColumns[index];
+          const indexNewCol = index + colLength;
+          return {
+            ...columnConfig,
+            index: indexNewCol,
+            name: column.name,
+            originalIndex: columnIndex,
+            originalFrozen: column.frozen ?? false,
+            originalVisible: column.visible ?? true
+          };
+        });
+        finalColumnsConfig.push(...newColConfig);
+      }
+      if (deepEqual(columnsConfig, finalColumnsConfig)) {
+        return;
+      }
+      console.log("useEffect columnsConfig changed", columnsConfig, finalColumnsConfig);
+      setColumnsConfigOptions(finalColumnsConfig);
     }
   }, [columns, id]);
   const onChangeColumnsConfig = useCallback(

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

@@ -7,11 +7,10 @@ export interface BaseConfigColumn {
     visible: boolean;
     index: number;
     frozen: boolean;
-    name: string;
 }
 export interface IConfigColumn extends BaseConfigColumn {
     hidden: boolean;
-    orginalIndex: number;
+    originalIndex: number;
     originalVisible: boolean;
     originalFrozen: boolean;
 }

package/components/DataGrid/dictionary.d.ts

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

package/components/DataGrid/dictionary.js

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

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

@@ -15,21 +15,22 @@ function HeaderActions(props) {
     leftActions: LeftActions,
     rightActions: RightActions,
     withPager,
-    size
+    size,
+    columns
   } = props;
   const isMobile = useIsMobile();
   const { rowHeights } = useDataGrid();
   const { currentSize } = useComponentSize(size);
   return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
     LeftActions,
-    /* @__PURE__ */ jsx(MobileMenuActions, {}),
+    /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
     RightActions
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
     /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
       LeftActions,
       typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps })
+      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns })
     ] }),
     RightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: RightActions })
   ] }) });

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

@@ -5,7 +5,7 @@ import { useTheme } from "@mui/material";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { d as dictionary } from "../../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 function Density() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
@@ -20,21 +20,21 @@ function Density() {
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
         onClick: () => setRowHeightVariant("compact"),
         disabled: currentRowHeightVariant === "compact",
-        label: getLabel(dictionary.DENSITY_COMPACT)
+        label: getLabel(DICTIONARY.DENSITY_COMPACT)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
         onClick: () => setRowHeightVariant("standard"),
         disabled: currentRowHeightVariant === "standard",
-        label: getLabel(dictionary.DENSITY_STANDARD)
+        label: getLabel(DICTIONARY.DENSITY_STANDARD)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
         onClick: () => setRowHeightVariant("confortable"),
         disabled: currentRowHeightVariant === "confortable",
-        label: getLabel(dictionary.DENSITY_CONFORTABLE)
+        label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
       }
     ];
   }, [
@@ -66,7 +66,7 @@ function Density() {
       transformOrigin: { vertical: "top", horizontal: "left" },
       menuActions,
       icon: currenViewIcon,
-      toolTip: getLabel(dictionary.DENSITY_TOOLTIP),
+      toolTip: getLabel(DICTIONARY.DENSITY_TOOLTIP),
       paperProps: { style: { marginTop: "5px" } }
     }
   );

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

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

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

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

package/components/DataGrid/subcomponents/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, size } = useDataGrid();
   const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings(size);
+  const modalSettings = useModalSettings(size, columns);
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };

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

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

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

@@ -4,10 +4,11 @@ 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(size, columns);
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     IconButton,

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

@@ -5,18 +5,18 @@ 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 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
     })
   );
 }
@@ -29,10 +29,10 @@ const getAlignClass = (align) => {
 };
 const ColumnsConfig = forwardRef((props, ref) => {
   const refdata_grid = useRef(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, rowHeight, classes, size } = 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();
@@ -44,7 +44,7 @@ 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",
@@ -52,14 +52,14 @@ const ColumnsConfig = forwardRef((props, ref) => {
       },
       {
         key: "originalIndex",
-        name: getLabel(dictionary.SETTINGS_COLUMN_POSITION),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_POSITION),
         width: 50,
         type: "number",
         ...getAlignClass("center")
       },
       {
         key: "visible",
-        name: getLabel(dictionary.SETTINGS_COLUMN_VISIBLE),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
@@ -67,7 +67,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       },
       {
         key: "frozen",
-        name: getLabel(dictionary.SETTINGS_COLUMNS_FROZEN),
+        name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
         formatter: ColumnInteractiveCheckFormatter,
@@ -94,7 +94,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   };
   useEffect(() => {
     if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
+      setRows(getRowsFromColumnsConfig(columnsConfig, columns));
     }
     setIsInit(false);
   }, [columnsConfig]);
@@ -185,7 +185,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ref: divRef, children: [
     /* @__PURE__ */ jsxs(ColumnsConfigDataGridStyled, { children: [
-      /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { ownerState: { size }, children: getLabel(dictionary.SETTINGS_SEL_COLUMNS) }),
+      /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { ownerState: { size }, children: getLabel(DICTIONARY.SETTINGS_SEL_COLUMNS) }),
       /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { className: classes?.tableWrapperDataGrid, ownerState: { size }, children: /* @__PURE__ */ jsx(
         DataGrid,
         {
@@ -207,7 +207,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
       /* @__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 +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,
@@ -227,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),
@@ -237,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),
@@ -247,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}`
@@ -256,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}`
@@ -265,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/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -1,5 +1,6 @@
 import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
 import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
 export interface Row {
     key: string;
     name: string;
@@ -17,6 +18,7 @@ export type ColumnsConfigRef = {
 };
 export interface ConfigProps {
     onCloseSettings: () => void;
+    columns: readonly Column<any, any>[];
     columnsConfig: IConfigColumn[];
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
     rowHeight: number;

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

@@ -1,7 +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"]) => () => void;
+declare const useModalSettings: (size: GridProps<unknown, unknown>["size"], columns: readonly Column<any, any>[]) => () => void;
 export default useModalSettings;

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

@@ -11,7 +11,7 @@ import { A as ActionsContainer } from "../../../../../../CommonActions/component
 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 = (size, columns) => {
   const { openModal, closeModal } = useModal();
   const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
@@ -53,7 +53,8 @@ const useModalSettings = (size) => {
                 onChangeColumnsConfig: handleColumnsSetting,
                 onCloseSettings,
                 classes,
-                size
+                size,
+                columns
               }
             ) }),
             /* @__PURE__ */ jsxs(ActionsContainer, { children: [

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

@@ -1,4 +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/types.d.ts

@@ -7,8 +7,8 @@ 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';
+import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
 export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';

package/components/DynamicFilter/dictionary.d.ts

@@ -45,5 +45,6 @@ export declare const DICCTIONARY: {
     readonly error_invalid_date: "dynamic_filter.error_invalid_date";
     readonly error_less_than_start: "dynamic_filter.error_less_than_start";
     readonly error_operand_mustbe_number: "dynamic_filter.error_operand_mustbe_number";
+    readonly error_invalid_filters_before: "dynamic_filter.error_invalid_filters_before";
 };
 export type TypeDictionary = typeof DICCTIONARY;

package/components/DynamicFilter/dictionary.js

@@ -36,7 +36,8 @@ const DICCTIONARY = {
   error_operator_required: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operator_required`,
   error_invalid_date: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_invalid_date`,
   error_less_than_start: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_less_than_start`,
-  error_operand_mustbe_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operand_mustbe_number`
+  error_operand_mustbe_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operand_mustbe_number`,
+  error_invalid_filters_before: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_invalid_filters_before`
 };
 export {
   DYNAMIC_FILTER_DICTIONARY_ID as D,

package/components/DynamicFilter/types.d.ts

@@ -27,7 +27,7 @@ export type OperandsSelectArray = Array<OperandSelect>;
 export type FieldTypeOperator<T extends FieldType> = T extends 'boolean' ? BooleanOperator : T extends 'datetime' ? DateTimeOperator : T extends 'number' ? NumberOperator : T extends 'select' ? SelectOperator : T extends 'selectAsync' ? SelectOperatorAsync : T extends 'string' ? StringOperator : T;
 export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandSelect : T extends 'selectAsync' ? OperandSelectAsync : FieldType;
 export type FieldTypeOperandsArray<T extends FieldType> = T extends 'boolean' ? never : T extends 'datetime' ? never : T extends 'number' ? never : T extends 'string' ? never : T extends 'select' ? OperandsSelectArray : T extends 'selectAsync' ? OperandsArraySelectAsync : never;
-type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
+type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout' | 'onChangeFilterParms'> & {
     getOptionLabel: (option: TOption) => string;
     isOptionEqualToValue: (options: TOption | TOption[], value: TOption) => boolean;
     getOptionId: (option: TOption) => string | number;

package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.d.ts

@@ -11,7 +11,8 @@ import { RHFAutocompleteAsyncProps } from './types';
  * - Si al componente se le define onChangeFilterParms
  *   - (Test OK) Solo cuando se abre el combo se debe hacer el request .
  *   - (Test OK) Si se abre el combo varias veces, solo se hace el request la primera vez si no han cambiado los parms.
- *   - (Test OK) Si cambian los parms (Normalmente cuando el componente depende de otro componente), al volver a abrir el combo se debe volver a hacer el request.
+ *   - (Test OK in reducer) Si cambian los parms (Normalmente cuando el componente depende de otro componente), las opciones de deben limpiar
+ *   - (Test OK) Si cambian los parms (Normalmente cuando el componente depende de otro componente) cuando se vuelve a abrir el combo se debe volver a hacer el request .
  *   - (Test OK) Si el request esta en curso y se cierra el combo, se debe dejar terminar el request para no perder la respuesta.
  *   - (Test OK) Si el request genera un error, debe dejar las mismas opciones y en el proximo open se debe volver a hacer el request.
  *   - Si es multiple = false

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -30,7 +30,8 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         parms: action.payload,
         fireFetchCount: 0,
-        firstOpen: true
+        firstOpen: true,
+        options: []
       };
     case actionsType.SET_QUERY_PARAMS:
       if (deepEqual(state.queryParams, action.payload)) {

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -16,5 +16,7 @@ type OptionType<T> = T & {
 /**
  * Render option for Autocomplete.
  */
-export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement>, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement> & {
+    key: string;
+}, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const MemoizedMenuItem = memo(MenuItem);
 const renderOption = (optionProps, option) => {
-  const { className, ...otherOptionProps } = optionProps;
+  const { className, key, ...otherOptionProps } = optionProps;
   return /* @__PURE__ */ jsx(
     MemoizedMenuItem,
     {
@@ -15,7 +15,8 @@ const renderOption = (optionProps, option) => {
       startIcon: option.startAdornment,
       endIcon: option.endAdornment,
       size: option.size
-    }
+    },
+    option.label
   );
 };
 export {

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo, useCallback } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
@@ -12,6 +12,8 @@ import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum
 import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
 import { deepEqual } from "fast-equals";
 import { g as getPurgedCookie } from "./helpers.js";
+import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { a as DICCTIONARY } from "../../components/DynamicFilter/dictionary.js";
 const useDynamicFilterAndSort = (props) => {
   const { fields, sorts, onChangeFilterSort, dataTestId, withAllField, rightActions, initialFilterToggleed = true, initialSortToggleed = true, prefixCookie, setCookie, getCookie, filterSortAutomatic = true, visibleRefresh = false, withExternalRefresh } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -25,6 +27,8 @@ const useDynamicFilterAndSort = (props) => {
   const refOnChangeFilterSort = useRef(0);
   const fireOnChangeFilterRef = useRef(null);
   const fireOnChangeSortRef = useRef(null);
+  const { toast } = useWindowToolsMF();
+  const { getLabel } = useModuleDictionary();
   const [invisibleBadge, setInvisibleBadge] = useState(() => ({
     filter: initialAppliedFilters?.length === 0,
     sort: initialAppliedSorts?.length === 0
@@ -59,14 +63,14 @@ const useDynamicFilterAndSort = (props) => {
     }
     refOnChangeFilterSort.current++;
   }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]);
-  const handleChangeSorts = useCallback((Sorts, rawSorts) => {
-    setInvisibleBadge((prev) => ({ ...prev, sort: Sorts.length === 0 }));
-    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, Sorts)) {
-      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", Sorts);
+  const handleChangeSorts = useCallback((newSorts, rawSorts) => {
+    setInvisibleBadge((prev) => ({ ...prev, sort: newSorts.length === 0 }));
+    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, newSorts)) {
+      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", newSorts);
     }
     eventRefs.current = {
       ...eventRefs.current,
-      eventSorts: { sorts: Sorts, rawSorts }
+      eventSorts: { sorts: newSorts, rawSorts }
     };
     if (isValidFilters()) {
       onChangeFilterSort(eventRefs.current);
@@ -85,9 +89,11 @@ const useDynamicFilterAndSort = (props) => {
     } else {
       if (isValidFilters()) {
         onChangeFilterSort(eventRefs.current);
+      } else {
+        toast({ title: getLabel(DICCTIONARY.error_invalid_filters_before) }, { type: "error" });
       }
     }
-  }, [filterSortAutomatic, isValidFilters, onChangeFilterSort]);
+  }, [filterSortAutomatic, getLabel, isValidFilters, onChangeFilterSort, toast]);
   const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
     /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.filter, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }),
     /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.sort, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.56-beta.2",
+  "version": "9.2.56-beta.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.1-beta.2",
-    "@m4l/styles": "7.1.28-beta.2",
+    "@m4l/graphics": "7.1.1-beta.3",
+    "@m4l/styles": "7.1.28-beta.3",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

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

@@ -1,2 +0,0 @@
-export interface SettingsProps {
-}