@m4l/components 9.4.5 → 9.4.6-JT19122025.beta.1

package/components/DataGrid/views/CardsView/types.d.ts

@@ -0,0 +1,18 @@
+import { GridProps, RowKey } from '../../types';
+/**
+ * Props para el componente CardsView
+ */
+export type CardsViewProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> = GridProps<TRow, TSummaryRow, TKey>;
+/**
+ * Props para el helper calculateCardHeight
+ */
+export interface CalculateCardHeightProps {
+    /**
+     * Número de columnas visibles en la card
+     */
+    visibleColumnsCount: number;
+    /**
+     * Altura mínima personalizada (opcional, para customRender)
+     */
+    customMinHeight?: number;
+}

package/components/DataGrid/views/CardsView/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Table/index.d.ts → views/TableView/TableView.d.ts}

@@ -4,4 +4,4 @@ import { GridProps, RowKey } from '../../types';
  * Componente que renderiza la tabla con las filas y columnas
  * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
  */
-export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/{subcomponents/Table/index.js → views/TableView/TableView.js}

@@ -3,15 +3,15 @@ import { useMemo, useState, useRef, useEffect } from "react";
 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 { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
-import { u as useFilters } from "../../hooks/useFilters.js";
-import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { z as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
-import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
+import { B as TableContainerStyled, y as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
+import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
+import { f as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
-function Table(props) {
+import { u as useFilters } from "../../hooks/shared/useFilters/useFilters.js";
+import { u as useDataGrid } from "../../hooks/shared/useDataGrid/useDataGrid.js";
+import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter/CheckboxFormatter.js";
+function TableView(props) {
   const {
     columns,
     rows,
@@ -194,5 +194,5 @@ function Table(props) {
   ) });
 }
 export {
-  Table as T
+  TableView as T
 };

package/components/DataGrid/{subcomponents/Table/hooks → views/TableView/helpers/getDragHeaderRenderer}/getDragHeaderRenderer.js

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

package/components/DataGrid/views/TableView/helpers/getDragHeaderRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from './getDragHeaderRenderer';

package/components/DataGrid/views/TableView/helpers/getDragHeaderRenderer/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/helpers/index.d.ts

@@ -0,0 +1 @@
+export { getDragHeaderRenderer } from './getDragHeaderRenderer';

package/components/DataGrid/views/TableView/helpers/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/hooks/useFocusRef/index.d.ts

@@ -0,0 +1 @@
+export * from './useFocusRef';

package/components/DataGrid/views/TableView/hooks/useFocusRef/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/hooks/useFocusRef/useFocusRef.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hook para manejar el foco de elementos HTML/SVG en la vista de tabla.
+ *
+ * Este hook gestiona automáticamente el foco de un elemento cuando está seleccionado,
+ * útil para la navegación por teclado en celdas del DataGrid.
+ * @template T - Tipo del elemento HTML o SVG que recibirá el foco
+ * @param isSelected - Indica si el elemento está actualmente seleccionado
+ * @returns Objeto con:
+ *   - `ref`: Referencia React para asignar al elemento
+ *   - `tabIndex`: Valor de tabIndex (0 si seleccionado, -1 si no)
+ * @example
+ * ```tsx
+ * const { ref, tabIndex } = useFocusRef<HTMLDivElement>(isRowSelected);
+ * return <div ref={ref} tabIndex={tabIndex}>Contenido</div>;
+ * ```
+ */
+export declare function useFocusRef<T extends HTMLOrSVGElement>(isSelected: boolean): {
+    ref: import('react').RefObject<T>;
+    tabIndex: number;
+};

package/components/DataGrid/views/TableView/hooks/useHeaderMenuActions/index.d.ts

@@ -0,0 +1 @@
+export * from './useHeaderMenuActions';

package/components/DataGrid/views/TableView/hooks/useHeaderMenuActions/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.d.ts

@@ -0,0 +1,27 @@
+import { Column, SortColumn } from 'react-data-grid';
+import { MenuAction } from '../../subcomponents/HeaderRenderClick/types';
+/**
+ * Hook que genera las acciones del menú contextual del header de una columna en TableView.
+ *
+ * Proporciona acciones para:
+ * - Ordenamiento (ASC/DESC) tanto local como externo
+ * - Filtrado externo
+ * - Congelar/descongelar columnas
+ * - Ocultar columnas
+ * @template TRow - Tipo de datos de la fila
+ * @template TSummaryRow - Tipo de datos de la fila de resumen
+ * @param columnKey - Key de la columna actual (null si no hay columna seleccionada)
+ * @param finalColumns - Array de columnas del DataGrid
+ * @param defaultSortable - Indica si las columnas son ordenables por defecto
+ * @param handleSortFromPopover - Función opcional para manejar el sort desde un popover
+ * @returns Array de MenuAction con las acciones disponibles para el header
+ * @example
+ * ```tsx
+ * const actions = useHeaderMenuActions<MyRow, MySummary>(
+ *   'columnName',
+ *   columns,
+ *   true
+ * );
+ * ```
+ */
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];

package/components/DataGrid/{subcomponents/Table/hooks → views/TableView/hooks/useHeaderMenuActions}/useHeaderMenuActions.js

@@ -1,8 +1,8 @@
 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";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSortFromPopover) {
   const {
     columnsConfig,

package/components/DataGrid/views/TableView/hooks/useSortColumnsRows/index.d.ts

@@ -0,0 +1 @@
+export * from './useSortColumnsRows';

package/components/DataGrid/views/TableView/hooks/useSortColumnsRows/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Table/hooks → views/TableView/hooks/useSortColumnsRows}/useSortColumnsRows.js

@@ -1,13 +1,13 @@
 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 { R as RadioSelectColumn } from "../subcomponents/RadioSelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { u as useFilters } from "../../../hooks/useFilters.js";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index.js";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { g as getDragHeaderRenderer } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
+import { S as SkeletonFormatter } from "../../subcomponents/SkeletonFormatter/SkeletonFormatter.js";
+import { a as filterColumnClassName, S as SelectColumn } from "../../subcomponents/SelectColumn/SelectColumn.js";
+import { A as ActionsColumn } from "../../subcomponents/ActionsColumn/ActionsColumn.js";
+import { R as RadioSelectColumn } from "../../subcomponents/RadioSelectColumn/RadioSelectColumn.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
   let typeOrder = "string";
@@ -18,7 +18,6 @@ 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 {
@@ -27,7 +26,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/DataGrid/views/TableView/subcomponents/ActionsColumn/ActionsColumn.d.ts

@@ -0,0 +1,14 @@
+import { Column } from 'react-data-grid';
+/**
+ * Configuración de la columna de acciones para el DataGrid.
+ *
+ * Esta columna se muestra al inicio de cada fila y contiene
+ * el menú de acciones (editar, eliminar, etc.) disponibles para esa fila.
+ *
+ * Características:
+ * - Columna fija (frozen) al inicio
+ * - No es arrastrable ni ordenable
+ * - Sin filtro
+ * - Ancho predefinido según DATAGRID_SEMANTIC_WIDTHS.actions
+ */
+export declare const ActionsColumn: Column<any, any>;

package/components/DataGrid/{subcomponents/Table/subcomponents → views/TableView/subcomponents/ActionsColumn}/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
-import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
+import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();
   if (rowActionsGetter === void 0) {
@@ -22,8 +22,7 @@ function ActionsFormatter(props) {
 }
 const ActionsColumn = {
   key: DATAGRID_ACTIONS_COLUMN_KEY,
-  // name: getLabel(dictionary.LABEL_ACTIONS),
-  name: getActionLabel(),
+  name: "",
   width: DATAGRID_SEMANTIC_WIDTHS.actions,
   minWidth: 32,
   isDraggable: false,
@@ -34,9 +33,6 @@ const ActionsColumn = {
   type: "custom",
   renderCell: ActionsFormatter
 };
-function getActionLabel() {
-  return "";
-}
 export {
   ActionsColumn as A
 };

package/components/DataGrid/views/TableView/subcomponents/ActionsColumn/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionsColumn';

package/components/DataGrid/views/TableView/subcomponents/ActionsColumn/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/CheckboxFormatter.d.ts

@@ -0,0 +1,15 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente de checkbox personalizado para la selección de filas en TableView.
+ *
+ * Renderiza un checkbox de MUI con iconos personalizados para los estados:
+ * - Unchecked (vacío)
+ * - Checked (seleccionado)
+ * - Indeterminate (selección parcial en header)
+ *
+ * Soporta selección múltiple con Shift+Click.
+ * @param props - Props de renderizado de checkbox de react-data-grid
+ * @param props.onChange - Callback cuando cambia el estado del checkbox
+ * @param props.checked - Estado actual del checkbox
+ */
+export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/{subcomponents/Table/subcomponents → views/TableView/subcomponents/CheckboxFormatter}/CheckboxFormatter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { C as CheckboxIndeterminateIcon, a as CheckboxCheckedIcon, b as CheckboxIcon } from "./CustomIcons.js";
 import { Checkbox } from "@mui/material";
+import { C as CheckboxIndeterminateIcon, a as CheckboxCheckedIcon, b as CheckboxIcon } from "./subcomponents/CustomIcons/CustomIcons.js";
 const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
   function handleChange(e) {
     onChange(e.target.checked, e.nativeEvent.shiftKey);
@@ -12,6 +12,7 @@ const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, che
       checked,
       size: "small",
       icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      disableRipple: true,
       checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
       indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
       onChange: handleChange,

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckboxFormatter';

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons/CustomIcons.d.ts

@@ -0,0 +1,105 @@
+import { SvgIconProps } from '@mui/material';
+/**
+ * Icono de cierre (X dentro de círculo).
+ *
+ * Se utiliza para botones de cerrar o cancelar acciones.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de cierre
+ */
+export declare function CloseIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de estrella.
+ *
+ * Se utiliza para indicar favoritos o calificaciones.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de estrella
+ */
+export declare function StarIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de información (i dentro de círculo).
+ *
+ * Se utiliza para mensajes informativos o tooltips.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de información
+ */
+export declare function InfoIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de advertencia (triángulo con signo de exclamación).
+ *
+ * Se utiliza para alertas de advertencia que requieren atención.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de advertencia
+ */
+export declare function WarningIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de éxito (checkmark dentro de círculo).
+ *
+ * Se utiliza para indicar operaciones completadas exitosamente.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de éxito
+ */
+export declare function SuccessIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de error (signo de exclamación dentro de círculo).
+ *
+ * Se utiliza para indicar errores o fallos en operaciones.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de error
+ */
+export declare function ErrorIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de checkbox sin seleccionar (vacío).
+ *
+ * Renderiza un cuadrado con borde que representa el estado
+ * unchecked de un checkbox.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del checkbox vacío
+ */
+export declare function CheckboxIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de checkbox seleccionado (checked).
+ *
+ * Renderiza un cuadrado relleno con una marca de verificación (checkmark)
+ * que representa el estado checked de un checkbox.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del checkbox marcado
+ */
+export declare function CheckboxCheckedIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de checkbox en estado indeterminado.
+ *
+ * Renderiza un cuadrado con una línea horizontal que representa
+ * el estado indeterminate de un checkbox. Se utiliza típicamente
+ * en el header cuando algunas filas están seleccionadas pero no todas.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del checkbox indeterminado
+ */
+export declare function CheckboxIndeterminateIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TODO: Documentar
+ */
+export declare function InputSelectIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de colapso para TreeView (cuadrado con signo +).
+ *
+ * Se utiliza para indicar que un nodo del árbol puede expandirse.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de colapso
+ */
+export declare function TreeViewCollapseIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de expansión para TreeView (cuadrado con signo -).
+ *
+ * Se utiliza para indicar que un nodo del árbol puede colapsarse.
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de expansión
+ */
+export declare function TreeViewExpandIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono de nodo final para TreeView (cuadrado con X).
+ *
+ * Se utiliza para indicar nodos que no tienen hijos (hojas del árbol).
+ * @param props - Props estándar de SvgIcon de MUI
+ * @returns Componente SVG del icono de nodo final
+ */
+export declare function TreeViewEndIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons/CustomIcons.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import "@mui/material";
+import { I as Icon } from "../../../../../../../Icon/Icon.js";
+function CheckboxIcon(props) {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const uncheckedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/unchecked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: uncheckedIconUrl,
+      size: "small",
+      color: "text.primary",
+      className: "checkbox-unChecked",
+      ...props
+    }
+  );
+}
+function CheckboxCheckedIcon(props) {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const checkedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/checked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: checkedIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      className: "checkbox-checked",
+      ...props
+    }
+  );
+}
+function CheckboxIndeterminateIcon(props) {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const indeterminateIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/indeterminate.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: indeterminateIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      ...props
+    }
+  );
+}
+export {
+  CheckboxIndeterminateIcon as C,
+  CheckboxCheckedIcon as a,
+  CheckboxIcon as b
+};

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons/index.d.ts

@@ -0,0 +1 @@
+export * from './CustomIcons';

package/components/DataGrid/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.d.ts

@@ -0,0 +1,24 @@
+import { DraggableHeaderRendererProps } from './types';
+/**
+ * Renderizador de celda de header con funcionalidad de arrastrar y soltar.
+ *
+ * Este componente permite:
+ * - Reordenar columnas mediante drag & drop
+ * - Mostrar input de filtro cuando los filtros están activos
+ * - Mostrar iconos de ordenamiento y filtro externos
+ * - Personalizar el renderizado del header mediante withinHeaderRenderer
+ *
+ * Utiliza react-dnd para la funcionalidad de drag & drop.
+ * @template TRow - Tipo de datos de la fila
+ * @param props - Props del componente incluyendo las de RenderHeaderCellProps
+ * @returns Elemento JSX del header arrastrable
+ * @example
+ * ```tsx
+ * <DraggableHeaderRenderer
+ *   column={column}
+ *   onColumnsReorder={(source, target) => handleReorder(source, target)}
+ *   openPopover={(el, key) => handleOpenPopover(el, key)}
+ * />
+ * ```
+ */
+export declare function DraggableHeaderRenderer<TRow>(props: DraggableHeaderRendererProps<TRow>): any;

package/components/DataGrid/{subcomponents/Table/subcomponents → views/TableView/subcomponents/DraggableHeaderRenderer}/DraggableHeaderRenderer.js

@@ -3,12 +3,12 @@ import { useState, useEffect } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
-import { u as useFocusRef } from "../hooks/useFocusRef.js";
-import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../icons.js";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { I as Icon } from "../../../../Icon/Icon.js";
+import { N as NameColumnIconStyled, F as NameColumnStyled, G as IconColumnStyled, H as DraggableHeaderRootStyled, J as ButtonHeaderActionsStyled, K as DraggableWrapperInputBaseStyled, M as IconSearchStyled, O as HeaderInputBaseStyled } from "../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+import { u as useFocusRef } from "../../hooks/useFocusRef/useFocusRef.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 function DraggableHeaderRenderer(props) {
   const {
     onColumnsReorder,
@@ -21,7 +21,13 @@ function DraggableHeaderRenderer(props) {
     headerTabIndex !== void 0 && headerTabIndex >= 0
   );
   const { getLabel } = useModuleDictionary();
-  const { size, classes, externalSortSettings, externalFilterSettings, currentRowHeightVariant } = useDataGrid();
+  const {
+    size,
+    classes,
+    externalSortSettings,
+    externalFilterSettings,
+    currentRowHeightVariant
+  } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
@@ -44,7 +50,7 @@ function DraggableHeaderRenderer(props) {
       onColumnsReorder(key, column.key);
     },
     /**
-     * collect, es una función que recibe un objeto monitor y devuelve un objeto que contiene información sobre el estado del arrastre.
+     * Recolecta el estado del monitor de drop para detectar si hay un elemento sobre esta columna
      */
     collect: (monitor) => ({
       isOver: monitor.isOver(),

package/components/DataGrid/views/TableView/subcomponents/DraggableHeaderRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DraggableHeaderRenderer';
+export * from './types';

package/components/DataGrid/views/TableView/subcomponents/DraggableHeaderRenderer/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/DraggableHeaderRenderer/types.d.ts

@@ -0,0 +1,14 @@
+import { RenderHeaderCellProps } from 'react-data-grid';
+/**
+ * Props para el componente DraggableHeaderRenderer.
+ *
+ * Extiende las props estándar de RenderHeaderCellProps de react-data-grid
+ * añadiendo funcionalidad de reordenamiento y popover.
+ * @template TRow - Tipo de datos de la fila
+ */
+export interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
+    /** Callback para reordenar columnas mediante drag & drop */
+    onColumnsReorder: (sourceKey: string, targetKey: string) => void;
+    /** Callback opcional para abrir el popover de acciones del header */
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+}

package/components/DataGrid/views/TableView/subcomponents/DraggableHeaderRenderer/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.d.ts

@@ -0,0 +1,26 @@
+import { HeaderRenderClickProps } from './types';
+/**
+ * Componente que renderiza un menú de acciones para un encabezado de columna en el DataGrid.
+ *
+ * Este componente se utiliza para mostrar un popover con acciones contextuales
+ * cuando el usuario interactúa con el header de una columna. Soporta:
+ * - Items de menú con iconos, labels y callbacks
+ * - Divisores para separar grupos de acciones
+ * - Nodos personalizados para contenido custom
+ * - Control externo de apertura/cierre
+ * @param props - Props del componente
+ * @returns Componente JSX del menú de acciones del header
+ * @example
+ * ```tsx
+ * <HeaderRenderClick
+ *   menuActions={[
+ *     { label: 'Ordenar A-Z', onClick: handleSortAsc },
+ *     { label: 'Ordenar Z-A', onClick: handleSortDesc },
+ *     { type: 'divider' },
+ *     { label: 'Ocultar columna', onClick: handleHide },
+ *   ]}
+ *   size="small"
+ * />
+ * ```
+ */
+export declare function HeaderRenderClick(props: HeaderRenderClickProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/{subcomponents/Table → views/TableView}/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 function HeaderRenderClick(props) {
   const {
     menuActions,

package/components/DataGrid/{subcomponents/Table → views/TableView}/subcomponents/HeaderRenderClick/index.d.ts

@@ -1 +1,2 @@
 export * from './HeaderRenderClick';
+export * from './types';

package/components/DataGrid/views/TableView/subcomponents/HeaderRenderClick/index.js

@@ -0,0 +1 @@
+