@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J24062025.beta.1

package/components/DataGrid/dictionary.js

@@ -1,29 +1,38 @@
 import { g as getMenuActionsComponentsDictionary } from "../MenuActions/dictionary.js";
 import { g as getModalDictionary } from "../ModalDialog/dictionary.js";
 import { g as getPagerComponentsDictionary } from "../Pager/dicctionary.js";
+import { c as DATAGRID_ID_DICTIONARY } from "./constants.js";
 const DATAGRID_DICTIONARY_ID = "data_grid";
 function getDataGridComponentsDictionary() {
   return [DATAGRID_DICTIONARY_ID].concat(getPagerComponentsDictionary()).concat(getMenuActionsComponentsDictionary()).concat(getModalDictionary());
 }
 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`
+  DENSITY_STANDARD: `${DATAGRID_ID_DICTIONARY}.density_standard`,
+  DENSITY_CONFORTABLE: `${DATAGRID_ID_DICTIONARY}.density_confortable`,
+  DENSITY_TOOLTIP: `${DATAGRID_ID_DICTIONARY}.tooltip_density`,
+  TOOLTIP_FILTER_HIDE: `${DATAGRID_ID_DICTIONARY}.tooltip_filter_hide`,
+  TOOLTIP_FILTER_SHOW: `${DATAGRID_ID_DICTIONARY}.tooltip_filter_show`,
+  SETTINGS_COLUMN_NAME: `${DATAGRID_ID_DICTIONARY}.settings_column_name`,
+  SETTINGS_COLUMN_POSITION: `${DATAGRID_ID_DICTIONARY}.settings_column_position`,
+  SETTINGS_COLUMN_VISIBLE: `${DATAGRID_ID_DICTIONARY}.settings_column_visible`,
+  SETTINGS_COLUMNS_FROZEN: `${DATAGRID_ID_DICTIONARY}.settings_column_frozen`,
+  SETTINGS_SEL_COLUMNS: `${DATAGRID_ID_DICTIONARY}.settings_sel_columns`,
+  SETTINGS_MOVE_FIRST: `${DATAGRID_ID_DICTIONARY}.settings_move_first`,
+  SETTINGS_MOVE_UP: `${DATAGRID_ID_DICTIONARY}.settings_move_up`,
+  SETTINGS_MOVE_LAST: `${DATAGRID_ID_DICTIONARY}.settings_move_last`,
+  SETTINGS_MOVE_DOWN: `${DATAGRID_ID_DICTIONARY}.settings_move_down`,
+  SETTINGS_VISIBLE_ALL: `${DATAGRID_ID_DICTIONARY}.settings_visible_all`,
+  SETTINGS_NO_VISIBLE_ALL: `${DATAGRID_ID_DICTIONARY}.settings_no_visible_all`,
+  SETTINGS_RESTORE: `${DATAGRID_ID_DICTIONARY}.settings_restore`,
+  NO_ACTIONS_LABEL: `${DATAGRID_ID_DICTIONARY}.no_actions_label`,
+  ORDER_ASC_COLUMN: `${DATAGRID_ID_DICTIONARY}.order_asc_column`,
+  ORDER_DESC_COLUMN: `${DATAGRID_ID_DICTIONARY}.order_desc_column`,
+  REMOVE_ORDER_COLUMN: `${DATAGRID_ID_DICTIONARY}.remove_order_column`,
+  FREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.freeze_column`,
+  UNFREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.unfreeze_column`,
+  HIDE_COLUMN: `${DATAGRID_ID_DICTIONARY}.hide_column`,
+  ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`
 };
 export {
   DICTIONARY as D,

package/components/DataGrid/icons.d.ts

@@ -13,4 +13,11 @@ export declare const pathIcons: {
     uncheckAll: string;
     restoreColumns: string;
     search: string;
+    sortAsc: string;
+    sortDesc: string;
+    filter2: string;
+    removeSort: string;
+    freezeColumn: string;
+    unfreezeColumn: string;
+    hideColumn: string;
 };

package/components/DataGrid/icons.js

@@ -12,7 +12,14 @@ const pathIcons = {
   checkAll: "frontend/components/data_grid/assets/icons/check_all.svg",
   uncheckAll: "frontend/components/data_grid/assets/icons/uncheck_all.svg",
   restoreColumns: "frontend/components/data_grid/assets/icons/restore_columns.svg",
-  search: "frontend/components/data_grid/assets/icons/search.svg"
+  search: "frontend/components/data_grid/assets/icons/search.svg",
+  sortAsc: "frontend/components/data_grid/assets/icons/sort_asc.svg",
+  sortDesc: "frontend/components/data_grid/assets/icons/sort_desc.svg",
+  filter2: "frontend/components/data_grid/assets/icons/filter.svg",
+  removeSort: "frontend/components/data_grid/assets/icons/eraser.svg",
+  freezeColumn: "frontend/components/data_grid/assets/icons/pin.svg",
+  unfreezeColumn: "frontend/components/data_grid/assets/icons/pin-off.svg",
+  hideColumn: "frontend/components/data_grid/assets/icons/eye-off.svg"
 };
 export {
   pathIcons as p

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -21,7 +21,11 @@ export declare enum TableSlots {
     draggableWrapperInputBase = "draggableWrapperInputBase",
     headerInputBase = "headerInputBase",
     wrapperSkeleton = "wrapperSkeleton",
-    contentModalSetting = "contentModalSetting"
+    contentModalSetting = "contentModalSetting",
+    headerRenderClick = "headerRenderClick",
+    menuList = "menuList",
+    buttonHeaderActions = "buttonHeaderActions",
+    nameColumnIcon = "nameColumnIcon"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -25,6 +25,10 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["headerInputBase"] = "headerInputBase";
   TableSlots2["wrapperSkeleton"] = "wrapperSkeleton";
   TableSlots2["contentModalSetting"] = "contentModalSetting";
+  TableSlots2["headerRenderClick"] = "headerRenderClick";
+  TableSlots2["menuList"] = "menuList";
+  TableSlots2["buttonHeaderActions"] = "buttonHeaderActions";
+  TableSlots2["nameColumnIcon"] = "nameColumnIcon";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -44,6 +44,10 @@ export declare const DraggableWrapperInputBaseStyled: import('@emotion/styled').
 export declare const HeaderInputBaseStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 export declare const WrapperSkeletonStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContentModalSettingStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const HeaderRenderClickStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MenuListStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const ButtonHeaderActionsStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const NameColumnIconStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * ****************
  * Slots TextEditor

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { InputBase } from "@mui/material";
+import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
 import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
@@ -88,6 +88,22 @@ const ContentModalSettingStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.contentModalSetting
 })(dataGridStyles.contentModalSetting);
+const HeaderRenderClickStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.headerRenderClick
+})(dataGridStyles.headerRenderClick);
+const MenuListStyled = styled(MenuList, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.menuList
+})(dataGridStyles.menuList);
+const ButtonHeaderActionsStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.buttonHeaderActions
+})(dataGridStyles.buttonHeaderActions);
+const NameColumnIconStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.nameColumnIcon
+})(dataGridStyles.nameColumnIcon);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -98,10 +114,13 @@ const ControlNavigateStyled = styled("div", {
 })(dataGridStyles.controlNavigate);
 export {
   ActionsRootStyled as A,
+  ButtonHeaderActionsStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   HeaderInputBaseStyled as H,
   IconSearchStyled as I,
+  MenuListStyled as M,
+  NameColumnIconStyled as N,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
@@ -119,5 +138,6 @@ export {
   TableContainerStyled as l,
   DraggableHeaderRootStyled as m,
   DraggableWrapperInputBaseStyled as n,
-  InputTextEditorStyled as o
+  HeaderRenderClickStyled as o,
+  InputTextEditorStyled as p
 };

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

@@ -4,12 +4,20 @@ 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 { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
+  const { externalFilterSettings } = useDataGrid();
   const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
+    if (externalFilterSettings) {
+      externalFilterSettings.onChange?.({
+        action: "openPopoverMenuFields"
+      });
+    } else {
+      setActiveFilters(!activeFilters);
+    }
   };
   return /* @__PURE__ */ jsx(
     IconButton,

package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts

@@ -4,4 +4,6 @@ import { HeaderRendererProps } from 'react-data-grid';
  * Función encargada de retornar el componente de renderizado de cabecera con la capacidad de arrastrar columnas
  * @param handleColumnsReorder - Función que se ejecuta al reordenar columnas
  */
-export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void, options?: {
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;

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

@@ -1,8 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { D as DraggableHeaderRenderer } from "../subcomponents/DraggableHeaderRenderer.js";
-const getDragHeaderRenderer = (handleColumnsReorder) => {
+const getDragHeaderRenderer = (handleColumnsReorder, options) => {
   function HeaderRenderer(props) {
-    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
+    return /* @__PURE__ */ jsx(
+      DraggableHeaderRenderer,
+      {
+        ...props,
+        onColumnsReorder: handleColumnsReorder,
+        openPopover: options?.openPopover
+      }
+    );
   }
   return HeaderRenderer;
 };

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts

@@ -0,0 +1,6 @@
+import { Column } from 'react-data-grid';
+import { MenuAction } from '../subcomponents/HeaderRenderClick/types';
+/**
+ * Función que retorna las acciones del menu del header de la columna
+ */
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean): MenuAction[];

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

@@ -0,0 +1,262 @@
+import { useMemo, useCallback } from "react";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { p as pathIcons } from "../../../icons.js";
+function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
+  const {
+    columnsConfig,
+    onChangeColumnsConfig,
+    setSortColumns,
+    sortColumns,
+    externalSortSettings,
+    externalFilterSettings
+  } = useDataGrid();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const column = useMemo(() => {
+    return finalColumns.find((c) => c.key === columnKey);
+  }, [columnKey, finalColumns]);
+  const canSort = useMemo(() => {
+    if (!columnKey) {
+      return false;
+    }
+    if (typeof column?.sortable === "boolean") {
+      return column.sortable;
+    }
+    return defaultSortable;
+  }, [columnKey, column, defaultSortable]);
+  const canSortExternally = useMemo(() => {
+    if (!columnKey || !externalSortSettings) {
+      return false;
+    }
+    return externalSortSettings.sortsColumns.includes(columnKey);
+  }, [columnKey, externalSortSettings]);
+  const currentSort = useMemo(() => {
+    if (!columnKey || !externalSortSettings?.sortsApplied) {
+      return;
+    }
+    return externalSortSettings.sortsApplied.find(
+      (s) => s.columnKey === columnKey
+    );
+  }, [columnKey, externalSortSettings?.sortsApplied]);
+  const hasExternalSortAsc = useMemo(() => {
+    return currentSort?.direction === "asc";
+  }, [currentSort]);
+  const hasExternalSortDesc = useMemo(() => {
+    return currentSort?.direction === "desc";
+  }, [currentSort]);
+  const isAsc = useMemo(
+    () => Boolean(
+      columnKey && sortColumns.some(
+        (s) => s.columnKey === columnKey && s.direction === "ASC"
+      )
+    ),
+    [columnKey, sortColumns]
+  );
+  const isDesc = useMemo(
+    () => Boolean(
+      columnKey && sortColumns.some(
+        (s) => s.columnKey === columnKey && s.direction === "DESC"
+      )
+    ),
+    [columnKey, sortColumns]
+  );
+  const clearLocalSort = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
+  }, [columnKey, setSortColumns]);
+  const hasAnySortApplied = useMemo(() => {
+    return Boolean(currentSort);
+  }, [currentSort]);
+  const toggleFrozen = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    const next = columnsConfig.map(
+      (c) => c.key === columnKey ? { ...c, frozen: !c.frozen } : c
+    );
+    onChangeColumnsConfig(next);
+  }, [columnKey, columnsConfig, onChangeColumnsConfig]);
+  const toggleVisible = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    const next = columnsConfig.map(
+      (c) => c.key === columnKey ? { ...c, visible: !c.visible } : c
+    );
+    onChangeColumnsConfig(next);
+  }, [columnKey, columnsConfig, onChangeColumnsConfig]);
+  const addExternalSort = useCallback(
+    (direction) => {
+      if (!columnKey || !column || column?.type === "custom") {
+        return null;
+      }
+      externalSortSettings?.onChange({
+        action: "add",
+        columnKey,
+        direction
+      });
+    },
+    [columnKey, column, externalSortSettings]
+  );
+  const isRemovable = useMemo(() => {
+    return currentSort?.removable;
+  }, [currentSort]);
+  const addExternalFilter = useCallback(() => {
+    if (!columnKey || !column) {
+      return null;
+    }
+    externalFilterSettings?.onChange({
+      action: "add",
+      columnKey
+    });
+  }, [columnKey, column, externalFilterSettings]);
+  const isAddFilterDisabled = useMemo(() => {
+    if (!columnKey || !column) {
+      return true;
+    }
+    if (column.type === "custom") {
+      return true;
+    }
+    const isInFilterColumns = externalFilterSettings?.filterColumns.some(
+      (filter) => filter.name === columnKey
+    );
+    if (!isInFilterColumns) {
+      return true;
+    }
+    const isFilterApplied = externalFilterSettings?.filtersApplied.some(
+      (filter) => filter.columnKey === columnKey && filter.isValid
+    );
+    const isFilterMultiple = externalFilterSettings?.filterColumns.find(
+      (filter) => filter.name === columnKey
+    )?.multiple;
+    return isFilterApplied && !isFilterMultiple;
+  }, [columnKey, column, externalFilterSettings]);
+  return useMemo(() => {
+    if (!columnKey) {
+      return [];
+    }
+    const sortActions = [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}`,
+        label: getLabel(DICTIONARY.ORDER_ASC_COLUMN),
+        dataTestId: "sort-ascending",
+        /**
+         * Función que agrega un sort externo en modo ascendente
+         */
+        onClick: () => {
+          if (externalSortSettings) {
+            addExternalSort("asc");
+          } else {
+            setSortColumns([
+              {
+                columnKey,
+                direction: "ASC"
+              }
+            ]);
+          }
+        },
+        disabled: !canSort || (externalSortSettings ? !canSortExternally || hasExternalSortAsc : isAsc)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`,
+        label: getLabel(DICTIONARY.ORDER_DESC_COLUMN),
+        dataTestId: "sort-descending",
+        /**
+         * Función que agrega un sort externo en modo descendente
+         */
+        onClick: () => {
+          if (externalSortSettings) {
+            addExternalSort("desc");
+          } else {
+            setSortColumns([
+              {
+                columnKey,
+                direction: "DESC"
+              }
+            ]);
+          }
+        },
+        disabled: !canSort || (externalSortSettings ? !canSortExternally || hasExternalSortDesc : isDesc)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeSort}`,
+        label: getLabel(DICTIONARY.REMOVE_ORDER_COLUMN),
+        dataTestId: "sort-remove",
+        /**
+         * Función que elimina el sort externo
+         */
+        onClick: () => {
+          if (columnKey) {
+            if (externalSortSettings && isRemovable) {
+              externalSortSettings.onChange({
+                action: "remove",
+                columnKey
+              });
+              return;
+            } else {
+              clearLocalSort();
+            }
+          }
+        },
+        disabled: externalSortSettings ? !hasAnySortApplied || !isRemovable : !(isAsc || isDesc)
+      }
+    ];
+    const filterAction = externalFilterSettings ? [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`,
+        label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
+        dataTestId: "filter-add",
+        onClick: () => {
+          addExternalFilter();
+        },
+        disabled: isAddFilterDisabled
+      }
+    ] : [];
+    const baseActions = [
+      {
+        type: "menuItem",
+        startIcon: columnsConfig.find((c) => c.key === columnKey)?.frozen ? `${host_static_assets}/${environment_assets}/${pathIcons.unfreezeColumn}` : `${host_static_assets}/${environment_assets}/${pathIcons.freezeColumn}`,
+        label: columnsConfig.find((c) => c.key === columnKey)?.frozen ? getLabel(DICTIONARY.UNFREEZE_COLUMN) : getLabel(DICTIONARY.FREEZE_COLUMN),
+        onClick: toggleFrozen,
+        disabled: !columnsConfig.find((c) => c.key === columnKey)?.visible,
+        dataTestId: "toggle-freeze"
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.hideColumn}`,
+        label: getLabel(DICTIONARY.HIDE_COLUMN),
+        onClick: toggleVisible,
+        dataTestId: "hide-column"
+      }
+    ];
+    return [...sortActions, ...filterAction, ...baseActions];
+  }, [
+    columnKey,
+    canSort,
+    canSortExternally,
+    hasExternalSortAsc,
+    hasExternalSortDesc,
+    hasAnySortApplied,
+    addExternalSort,
+    toggleFrozen,
+    toggleVisible,
+    columnsConfig,
+    externalSortSettings,
+    externalFilterSettings,
+    host_static_assets,
+    environment_assets,
+    getLabel,
+    isAddFilterDisabled
+  ]);
+}
+export {
+  useHeaderMenuActions as u
+};

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.d.ts

@@ -1,11 +1,13 @@
-import { Column, SortColumn } from 'react-data-grid';
+import { Column } from 'react-data-grid';
 /**
  * Hook encargado de ordenar datos de las columnas y las filas.
  * Se utiliza para ordenar las columnas y las filas de un DataGrid.
  */
-export declare const useSortColumnsRows: <TRow, TSummaryRow>(sourceColumns: readonly Column<TRow, TSummaryRow>[], sourceRows: readonly TRow[]) => {
+export declare const useSortColumnsRows: <TRow, TSummaryRow>(sourceColumns: readonly Column<TRow, TSummaryRow>[], sourceRows: readonly TRow[], popoverHandlers?: {
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+}) => {
     finalColumns: readonly Column<TRow, TSummaryRow>[];
-    sortColumns: readonly SortColumn[];
-    setSortColumns: import('react').Dispatch<import('react').SetStateAction<readonly SortColumn[]>>;
+    sortColumns: import('react-data-grid').SortColumn[];
+    setSortColumns: import('react').Dispatch<import('react').SetStateAction<import('react-data-grid').SortColumn[]>>;
     finalRows: readonly TRow[];
 };

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

@@ -6,7 +6,7 @@ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index.js";
-import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
   let typeOrder = "string";
@@ -43,15 +43,13 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
-  }).sort(
-    (a, b) => {
-      let indexA = getColumIndex(a.key, columnsConfig);
-      indexA = indexA === -1 ? columnsConfig.length : indexA;
-      let indexB = getColumIndex(b.key, columnsConfig);
-      indexB = indexB === -1 ? columnsConfig.length : indexB;
-      return indexA - indexB;
-    }
-  ).map((columnSorted) => {
+  }).sort((a, b) => {
+    let indexA = getColumIndex(a.key, columnsConfig);
+    indexA = indexA === -1 ? columnsConfig.length : indexA;
+    let indexB = getColumIndex(b.key, columnsConfig);
+    indexB = indexB === -1 ? columnsConfig.length : indexB;
+    return indexA - indexB;
+  }).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
@@ -83,21 +81,26 @@ const getAligByType = (columnType) => {
   }
   return "left";
 };
-const useSortColumnsRows = (sourceColumns, sourceRows) => {
+const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
   const {
     columnsConfig,
     columnsWidths,
     onChangeColumnsOrder,
     rowActionsGetter,
     checkedRows,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    sortColumns,
+    setSortColumns
   } = useDataGrid();
-  const [columns, setColumns] = useState(() => []);
-  const [sortColumns, setSortColumns] = useState([]);
+  const [columns, setColumns] = useState(
+    () => []
+  );
   const isSkeleton = useModuleSkeleton();
   const { activeFilters, filters } = useFilters();
   const findKeyInColumns = (key, cols) => {
-    const index = cols.findIndex((column) => key === column.key && column.hidden === false);
+    const index = cols.findIndex(
+      (column) => key === column.key && column.hidden === false
+    );
     return index !== -1;
   };
   useEffect(() => {
@@ -119,7 +122,12 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
     }
   }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
-    const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
+    const DragAndDropHeaderRenderer = getDragHeaderRenderer(
+      onChangeColumnsOrder,
+      {
+        openPopover: popoverHandlers?.openPopover
+      }
+    );
     return columns.map((c) => {
       const cellClass = c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`;
       const newColumn = {
@@ -143,7 +151,13 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
       newColumn.headerRenderer = DragAndDropHeaderRenderer;
       return newColumn;
     });
-  }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
+  }, [
+    isSkeleton,
+    columns,
+    activeFilters,
+    onChangeColumnsOrder,
+    popoverHandlers
+  ]);
   const finalRows = useMemo(() => {
     const nextRows = sourceRows.filter((r) => {
       if (!filters || filters.size === 0) {
@@ -154,7 +168,10 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
       for (let i = 0; i < filters.size; i++) {
         const entry = iterator.next().value;
         const columnKey = entry?.[0] ?? "";
-        const columnFilter = entry?.[1] ?? { value: "", customFilter: void 0 };
+        const columnFilter = entry?.[1] ?? {
+          value: "",
+          customFilter: void 0
+        };
         let valCell;
         const valueMaybeString = getPropertyByString(r, columnKey);
         let fixedValue;