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

package/components/DataGrid/{subcomponents/Table → 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/DataGrid/views/TableView/subcomponents/HeaderRenderClick/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,65 @@
+import { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from 'react-data-grid';
+/**
+ * Renderizador para celdas de grupo con radio button.
+ *
+ * En modo de selección única con radio buttons, no tiene sentido
+ * seleccionar grupos completos, por lo que retorna null.
+ * @param _props - Props de renderizado de celda de grupo (no utilizadas)
+ * @returns null - No renderiza ningún control en filas de grupo
+ * @example
+ * ```tsx
+ * // En un DataGrid con filas agrupadas:
+ * // - Filas de grupo: sin radio button (este componente)
+ * // - Filas individuales: con radio button (RadioSelectFormatter)
+ * ```
+ */
+export declare function RadioSelectGroupFormatter(_props: RenderGroupCellProps<unknown>): null;
+/**
+ * Renderizador de celda de selección única con radio button.
+ *
+ * Implementa la lógica de selección única: cuando el usuario hace click
+ * en un radio button, se REEMPLAZA la selección anterior con solo la fila actual.
+ *
+ * Comportamiento:
+ * - Click en radio (checked=true): checkedRows se reemplaza con [rowKey actual]
+ * - Click en radio seleccionado (checked=false): checkedRows se vacía
+ * @param props - Props de renderizado de celda de react-data-grid
+ * @returns Componente RadioFormatter configurado
+ * @example
+ * ```tsx
+ * // Usuario hace click en radio de fila ID=5:
+ * // checkedRows antes: Set([3])
+ * // checkedRows después: Set([5]) ← Reemplaza, no agrega
+ * ```
+ */
+export declare function RadioSelectFormatter(props: RenderCellProps<any, any>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renderizador para el header de la columna de radio buttons.
+ *
+ * A diferencia de checkboxes, los radio buttons NO tienen funcionalidad
+ * de "Seleccionar Todo" ya que solo se puede seleccionar una fila a la vez.
+ * Por lo tanto, retorna null (header vacío).
+ * @param _props - Props de renderizado del header (no utilizadas)
+ * @returns null - No renderiza control en el header
+ */
+export declare function RadioSelectColumnHeaderRenderer(_props: RenderHeaderCellProps<any, any>): null;
+/**
+ * Configuración de la columna de selección única con radio buttons.
+ *
+ * Esta columna permite selección única de filas mediante radio buttons.
+ *
+ * Características:
+ * - Ancho fijo: 32px
+ * - No redimensionable, no draggable, no sortable
+ * - Congelada (frozen): siempre visible al hacer scroll horizontal
+ * - Header vacío: no tiene control "Select All"
+ * - Selección única: solo una fila puede estar seleccionada a la vez
+ * @example
+ * ```tsx
+ * // En useSortColumnsRows:
+ * const selectionColumn = checkedRowsMultiple === false
+ *   ? RadioSelectColumn   // Selección única
+ *   : SelectColumn;       // Selección múltiple
+ * ```
+ */
+export declare const RadioSelectColumn: Column<any, any>;

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
-import { R as RadioFormatter } from "./RadioFormatter.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { R as RadioFormatter } from "./subcomponents/RadioFormatter/RadioFormatter.js";
 function RadioSelectGroupFormatter(_props) {
   return null;
 }

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

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

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

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/RadioFormatter.d.ts

@@ -0,0 +1,22 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Renderizador de radio button para selección única de filas en TableView.
+ *
+ * Este componente es un wrapper del Radio de MUI que adapta las props
+ * de react-data-grid (RenderCheckboxProps) al formato esperado por Radio.
+ *
+ * Se utiliza en conjunto con RadioSelectColumn para implementar
+ * selección única de filas (a diferencia de CheckboxFormatter que
+ * permite selección múltiple).
+ * @param props - Props de renderizado de checkbox de react-data-grid
+ * @param props.onChange - Callback cuando cambia el estado del radio
+ * @param props.checked - Estado actual del radio (seleccionado o no)
+ * @param _ref - Ref forwarded (no utilizado internamente)
+ * @returns Componente Radio de MUI adaptado
+ * @example
+ * ```tsx
+ * // Uso interno en RadioSelectColumn
+ * renderCell: (props) => <RadioFormatter {...props} />
+ * ```
+ */
+export declare const RadioFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/views/TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/RadioFormatter.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { R as Radio } from "../../../../../../../mui_extended/Radio/Radio.js";
+const RadioFormatter = forwardRef(
+  function RadioFormatter2({ onChange, checked, ...props }, _ref) {
+    function handleChange(e) {
+      onChange(e.target.checked, e.nativeEvent.shiftKey);
+    }
+    return /* @__PURE__ */ jsx(Radio, { checked, onChange: handleChange, ...props });
+  }
+);
+export {
+  RadioFormatter as R
+};

package/components/DataGrid/views/TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/index.d.ts

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

package/components/DataGrid/views/TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/index.js

@@ -0,0 +1 @@
+

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRowSelection, SelectCellFormatter } from "react-data-grid";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
@@ -74,6 +74,6 @@ const SelectColumn = {
 };
 export {
   SelectColumn as S,
-  filterHeight as a,
-  filterColumnClassName as f
+  filterColumnClassName as a,
+  filterHeight as f
 };

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,6 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración para TableView.
+ * Abre el modal de configuración de columnas específico para la vista de tabla.
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/views/TableView/subcomponents/Settings/Settings.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
+function Settings(props) {
+  const { columns } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { size } = useDataGrid();
+  const modalSettings = useModalSettings(size, columns);
+  const { getLabel } = useModuleDictionary();
+  const handleClick = () => {
+    modalSettings();
+  };
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      tooltip: getLabel("data_grid.tooltip_settings"),
+      onClick: handleClick,
+      "aria-label": "settings",
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      "data-testid": "settings-button"
+    }
+  );
+}
+export {
+  Settings as S
+};

package/components/DataGrid/views/TableView/subcomponents/Settings/hooks/useModalSettings/index.d.ts

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

package/components/DataGrid/views/TableView/subcomponents/Settings/hooks/useModalSettings/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/Settings/hooks/useModalSettings/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.d.ts

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

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js → views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js}

@@ -2,15 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
-import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
-import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
-import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../icons.js";
-import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";
-import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
-import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
+import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
+import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
 const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
   const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();

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

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

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

@@ -0,0 +1 @@
+

package/components/DataGrid/views/TableView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.d.ts

@@ -0,0 +1,10 @@
+import { ColumnAlign } from '../../../../../../types';
+import { ColumnsConfigRef, ConfigProps } from './types';
+/**
+ * función encargada de definir la clase css de alineación
+ */
+export declare const getAlignClass: (align: ColumnAlign) => {
+    cellClass: string;
+    headerCellClass: string;
+};
+export declare const ColumnsConfig: import('react').ForwardRefExoticComponent<ConfigProps & import('react').RefAttributes<ColumnsConfigRef>>;