@m4l/components 9.4.6 → 9.4.7-BE20260109-beta.3

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

package/components/{DataGrid/subcomponents/Table/hooks → datagrids/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";

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/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 → datagrids/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/datagrids/views/TableView/subcomponents/ActionsColumn/ActionsColumn.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

package/components/datagrids/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 → datagrids/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);

package/components/datagrids/views/TableView/subcomponents/CheckboxFormatter/CheckboxFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

package/components/datagrids/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/subcomponents/Table/subcomponents → datagrids/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons}/CustomIcons.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import "@mui/material";
-import { I as Icon } from "../../../../Icon/Icon.js";
+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`;

package/components/datagrids/views/TableView/subcomponents/CheckboxFormatter/subcomponents/CustomIcons/CustomIcons.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

package/components/datagrids/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 → datagrids/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, 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 { 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/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

package/components/datagrids/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/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/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 → datagrids/views/TableView}/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -7,7 +7,7 @@ import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDi
 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/datagrids/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+

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

@@ -5,17 +5,36 @@ import { MenuItemProps } from '../../../../../mui_extended/MenuItem/types';
 import { ComponentNameToClassKey, PaperProps, SxProps } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
+/**
+ * Tipos de elementos que puede contener el menú.
+ */
 export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
+/**
+ * Interfaz base para todas las acciones del menú.
+ */
 interface BaseMenuAction {
     type?: MenuTypes;
 }
+/**
+ * Acción de tipo MenuItem con todas las propiedades disponibles.
+ *
+ * Hereda propiedades de MenuItemProps como startIcon, endIcon, label, etc.
+ */
 export interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
+    /** Tipo de acción (por defecto 'menuItem') */
     type?: 'menuItem';
+    /** Callback ejecutado al hacer click en el item */
     onClick?: (arg?: any) => void;
+    /** No aplica para este tipo de acción */
     customNode?: never;
+    /** Indica si el item está en estado de error */
     error?: boolean;
+    /** ID para pruebas automatizadas */
     dataTestId?: string;
 }
+/**
+ * Acción de tipo divisor para separar grupos de items.
+ */
 interface DividerAction extends BaseMenuAction {
     type: 'divider';
     label?: never;
@@ -23,38 +42,56 @@ interface DividerAction extends BaseMenuAction {
     customNode?: never;
     error?: never;
 }
+/**
+ * Acción de tipo nodo personalizado para renderizar contenido custom.
+ */
 interface CustomNodeAction extends BaseMenuAction {
     type: 'customNode';
+    /** Nodo React personalizado a renderizar */
     customNode: ReactNode;
     label?: never;
     onClick?: never;
     error?: never;
 }
 /**
- * Define una acción del menú, con propiedades heredadas de `MenuItemProps`.
- * [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
- * [error] - Indicador de error en la acción del menú.
+ * Unión de todos los tipos de acciones disponibles en el menú.
+ * @example
+ * ```tsx
+ * const actions: MenuAction[] = [
+ *   { type: 'menuItem', label: 'Editar', onClick: handleEdit },
+ *   { type: 'divider' },
+ *   { type: 'menuItem', label: 'Eliminar', onClick: handleDelete, error: true },
+ * ];
+ * ```
  */
 export type MenuAction = MenuItemAction | DividerAction | CustomNodeAction;
+/**
+ * Props para el componente HeaderRenderClick.
+ *
+ * Extiende PopoverProps omitiendo 'open' y 'anchorEl' que se manejan internamente.
+ */
 export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anchorEl'> {
     /**
-     * Tamaño opcional del menú (pequeño o mediano).
+     * Tamaño del menú.
+     * @default 'medium'
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * Objeto personalizado a pasar al componente.
+     * Objeto con datos del item actual (fila).
+     * Se pasa a menuActions si es función.
      */
     objItem?: any;
     /**
-     * Acciones del menú, puede ser un array o una función que genere acciones.
+     * Acciones del menú.
+     * Puede ser un array estático o una función que recibe el row y retorna acciones.
      */
     menuActions: MenuAction[] | ((row: any) => MenuAction[]);
     /**
-     * Texto del tooltip opcional.
+     * Texto del tooltip.
      */
     toolTip?: string;
     /**
-     * Elemento opcional que se renderiza al final de la lista del menú.
+     * Elemento a renderizar al final de la lista del menú.
      */
     endListElement?: ReactElement;
     /**
@@ -62,11 +99,11 @@ export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anc
      */
     menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
     /**
-     * Contenido del `Badge` si está presente.
+     * Contenido del Badge si está presente.
      */
     badgeContent?: string;
     /**
-     * Elemento externo para abrir el menú.
+     * Elemento externo para controlar la apertura del menú.
      */
     externalOpen?: HTMLDivElement | null;
     /**
@@ -74,11 +111,11 @@ export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anc
      */
     externalClose?: (element: null | HTMLDivElement) => void;
     /**
-     * Tipo de flecha del menú.
+     * Indica si el menú está deshabilitado.
      */
     disabled?: boolean;
     /**
-     * The components used for each slot inside.
+     * Componentes personalizados para cada slot interno.
      * @default {}
      */
     slots?: {
@@ -86,46 +123,47 @@ export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anc
         paper?: React.ElementType;
     };
     /**
-     * Propiedad objeto que se usa para poder editar las propiedades del paper o agregar estilos desde su sx
+     * Props para el componente Paper del Popover.
      */
     paperProps?: PaperProps;
     /**
-     * Propiedad checked
+     * Indica si el menú tiene estado checked.
      */
     checked?: boolean;
     /**
-     * Propiedad checkable para el menú
+     * Indica si el menú es checkable.
      */
     checkable?: boolean;
     /**
-     * Propiedad para agregar un node al menú
+     * Nodo personalizado a agregar al menú.
      */
     customNode?: ReactNode;
     /**
-     * Define el color del componente.
+     * Color del componente.
      */
     color?: Extract<ComponentPalletColor, 'primary'>;
     /**
-     * Define la clave de la acción.
+     * Clave única para identificar la acción.
      */
     actionKey?: string;
     /**
-     * agrega un header al menú
+     * Nodo a renderizar como header del menú.
      */
     header?: ReactNode;
     /**
-     * agrega un footer al menú
+     * Nodo a renderizar como footer del menú.
      */
     footer?: ReactNode;
     /**
-     * Define el tipo de flecha del menú.
+     * Callback cuando el menú se abre o cierra.
      */
     onOpen?: (param: boolean) => void;
 }
 /**
- * Estado del propietario para `HeaderRenderClick`.
+ * Estado interno del componente HeaderRenderClick.
  */
 export interface HeaderRenderClickOwnerState {
+    /** Indica si el menú está seleccionado/abierto */
     selected: boolean;
 }
 export {};

package/components/datagrids/views/TableView/subcomponents/HeaderRenderClick/types.js

@@ -0,0 +1 @@
+