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

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

@@ -1,34 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { D as DICTIONARY } from "../../../../dictionary.js";
-import { 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 = () => {
-    if (externalFilterSettings) {
-      externalFilterSettings.onChange?.({
-        action: "openPopoverMenuFields"
-      });
-    } else {
-      setActiveFilters(!activeFilters);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      tooltip: activeFilters ? getLabel(DICTIONARY.TOOLTIP_FILTER_HIDE) : getLabel(DICTIONARY.TOOLTIP_FILTER_SHOW),
-      onClick: toggleIcon,
-      "aria-label": "filter",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`
-    }
-  );
-}
-export {
-  Filter as F
-};
+

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

@@ -0,0 +1,19 @@
+import { Column } from 'react-data-grid';
+/**
+ * Componente que renderiza el menú de acciones en dispositivos móviles.
+ *
+ * Consolida todas las acciones del DataGrid en un único menú desplegable
+ * para optimizar el espacio en pantallas pequeñas:
+ * - Opciones de densidad (compact, standard, confortable)
+ * - Toggle de filtros
+ * - Configuración de columnas (específica según viewMode)
+ * @param props.columns - Columnas del DataGrid para la configuración
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando isMobile es true
+ * {isMobile && <MobileMenuActions columns={columns} />}
+ * ```
+ */
+export declare const MobileMenuActions: (props: {
+    columns: readonly Column<any, any>[];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useModalSettings } from "../../../../views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
+import { u as useModalSettings$1 } from "../../../../views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
+import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
+const MobileMenuActions = (props) => {
+  const { columns } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentRowHeightVariant, setRowHeightVariant, size, viewMode } = useDataGrid();
+  const { activeFilters, setActiveFilters } = useFilters();
+  const tableModalSettings = useModalSettings(size, columns);
+  const cardsModalSettings = useModalSettings$1(size, columns);
+  const modalSettings = viewMode === "cards" ? cardsModalSettings : tableModalSettings;
+  const toggleIcon = () => {
+    setActiveFilters(!activeFilters);
+  };
+  const menuActions = [
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      label: getLabel("data_grid.density_compact")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      label: getLabel("data_grid.density_standard")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      label: getLabel("data_grid.density_confortable")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
+      onClick: () => toggleIcon(),
+      label: activeFilters ? getLabel("data_grid.tooltip_filter_hide") : getLabel("data_grid.tooltip_filter_show")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      onClick: () => modalSettings(),
+      label: getLabel("data_grid.tooltip_settings")
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    MenuActions,
+    {
+      className: "mobile-menu-actions",
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
+      arrowType: "no-arrow",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      menuActions
+    }
+  );
+};
+export {
+  MobileMenuActions as M
+};

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

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

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

@@ -1,67 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
-import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-const MobileMenuActions = (props) => {
-  const { columns } = props;
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant, size } = useDataGrid();
-  const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings(size, columns);
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-  const menuActions = [
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
-      onClick: () => setRowHeightVariant("compact"),
-      disabled: currentRowHeightVariant === "compact",
-      label: getLabel("data_grid.density_compact")
-    },
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
-      onClick: () => setRowHeightVariant("standard"),
-      disabled: currentRowHeightVariant === "standard",
-      label: getLabel("data_grid.density_standard")
-    },
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
-      onClick: () => setRowHeightVariant("confortable"),
-      disabled: currentRowHeightVariant === "confortable",
-      label: getLabel("data_grid.density_confortable")
-    },
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
-      onClick: () => toggleIcon(),
-      label: activeFilters ? getLabel("data_grid.tooltip_filter_hide") : getLabel("data_grid.tooltip_filter_show")
-    },
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
-      onClick: () => modalSettings(),
-      label: getLabel("data_grid.tooltip_settings")
-    }
-  ];
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      className: "mobile-menu-actions",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
-      arrowType: "no-arrow",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions
-    }
-  );
-};
-export {
-  MobileMenuActions as M
-};
+

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

@@ -0,0 +1,16 @@
+/**
+ * Componente que permite cambiar entre los modos de vista del DataGrid.
+ *
+ * Muestra un popover con las opciones disponibles:
+ * - **table**: Vista de tabla tradicional con filas y columnas
+ * - **cards**: Vista de tarjetas para visualización más compacta
+ *
+ * El componente solo se renderiza cuando `cardsViewConfig` está definido,
+ * indicando que la vista de cards está habilitada.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando cardsViewConfig existe
+ * {cardsViewConfig !== undefined && <ViewMode />}
+ * ```
+ */
+export declare function ViewMode(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,125 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
+import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+function ViewMode() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { viewMode, onViewModeChange } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const ownerState = {
+    viewMode
+  };
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+  const handleClick = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+    },
+    []
+  );
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleViewModeChange = useCallback(
+    (newViewMode) => {
+      onViewModeChange?.(newViewMode);
+      handleClose();
+    },
+    [onViewModeChange, handleClose]
+  );
+  const renderIcon = useMemo(() => {
+    return viewMode === "table" ? pathIcons.viewTable : pathIcons.viewCards;
+  }, [viewMode]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tooltip: getLabel(DICTIONARY.TOOLTIP_VIEW_MODE),
+        onClick: handleClick,
+        "aria-label": "view-mode",
+        icon: `${host_static_assets}/${environment_assets}/${renderIcon}`,
+        "data-testid": "view-mode-button"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        slotProps: {
+          paper: {
+            sx: { mt: 0.6 }
+          }
+        },
+        children: /* @__PURE__ */ jsxs(ContainerToggleCardsStyled, { children: [
+          /* @__PURE__ */ jsxs(
+            CardToggleButtonStyled,
+            {
+              ownerState: { ...ownerState, isActive: viewMode === "table" },
+              variant: "outlined",
+              role: "button",
+              onClick: () => handleViewModeChange("table"),
+              "data-testid": "toggle-button-table",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewTable}`,
+                    color: viewMode === "table" ? "primary.enabled" : "text.disabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextToggleCardButtonStyled,
+                  {
+                    ownerState: { ...ownerState, isActive: viewMode === "table" },
+                    variant: "body",
+                    children: getLabel(DICTIONARY.VIEW_MODE_TABLE)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            CardToggleButtonStyled,
+            {
+              ownerState: { ...ownerState, isActive: viewMode === "cards" },
+              variant: "outlined",
+              role: "button",
+              onClick: () => handleViewModeChange("cards"),
+              "data-testid": "toggle-button-cards",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewCards}`,
+                    color: viewMode === "cards" ? "primary.enabled" : "text.disabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextToggleCardButtonStyled,
+                  {
+                    ownerState: { ...ownerState, isActive: viewMode === "cards" },
+                    variant: "body",
+                    children: getLabel(DICTIONARY.VIEW_MODE_CARDS)
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ViewMode as V
+};

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

@@ -1,4 +1 @@
-/**
- * Componente que renderiza el botón de cambio de vista en el DataGrid
- */
-export declare function ViewMode(): import("react/jsx-runtime").JSX.Element;
+export { ViewMode } from './ViewMode';

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

@@ -1,125 +1 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useCallback } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { D as DICTIONARY } from "../../../../dictionary.js";
-import { w as ContainerToggleCardsStyled, x as CardToggleButtonStyled, y as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
-import { I as Icon } from "../../../../../Icon/Icon.js";
-function ViewMode() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { viewMode, onViewModeChange } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const ownerState = {
-    viewMode
-  };
-  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
-  const handleClick = useCallback(
-    (event) => {
-      setAnchorEl(event.currentTarget);
-    },
-    []
-  );
-  const handleClose = useCallback(() => {
-    setAnchorEl(null);
-  }, []);
-  const handleViewModeChange = useCallback(
-    (newViewMode) => {
-      onViewModeChange?.(newViewMode);
-      handleClose();
-    },
-    [onViewModeChange, handleClose]
-  );
-  const renderIcon = useMemo(() => {
-    return viewMode === "table" ? pathIcons.viewTable : pathIcons.viewCards;
-  }, [viewMode]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        tooltip: getLabel(DICTIONARY.TOOLTIP_VIEW_MODE),
-        onClick: handleClick,
-        "aria-label": "view-mode",
-        icon: `${host_static_assets}/${environment_assets}/${renderIcon}`,
-        "data-testid": "view-mode-button"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        open,
-        anchorEl,
-        onClose: handleClose,
-        anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        transformOrigin: { vertical: "top", horizontal: "left" },
-        slotProps: {
-          paper: {
-            sx: { mt: 0.6 }
-          }
-        },
-        children: /* @__PURE__ */ jsxs(ContainerToggleCardsStyled, { children: [
-          /* @__PURE__ */ jsxs(
-            CardToggleButtonStyled,
-            {
-              ownerState: { ...ownerState, isActive: viewMode === "table" },
-              variant: "outlined",
-              role: "button",
-              onClick: () => handleViewModeChange("table"),
-              "data-testid": "toggle-button-table",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewTable}`,
-                    color: viewMode === "table" ? "primary.enabled" : "text.disabled"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TextToggleCardButtonStyled,
-                  {
-                    ownerState: { ...ownerState, isActive: viewMode === "table" },
-                    variant: "body",
-                    children: getLabel(DICTIONARY.VIEW_MODE_TABLE)
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            CardToggleButtonStyled,
-            {
-              ownerState: { ...ownerState, isActive: viewMode === "cards" },
-              variant: "outlined",
-              role: "button",
-              onClick: () => handleViewModeChange("cards"),
-              "data-testid": "toggle-button-cards",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewCards}`,
-                    color: viewMode === "cards" ? "primary.enabled" : "text.disabled"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TextToggleCardButtonStyled,
-                  {
-                    ownerState: { ...ownerState, isActive: viewMode === "cards" },
-                    variant: "body",
-                    children: getLabel(DICTIONARY.VIEW_MODE_CARDS)
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-export {
-  ViewMode as V
-};
+

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

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/editors/EditLabelEditor/formatter.d.ts

@@ -1,8 +1,22 @@
 import { ColumnEditLabelFormatterProps } from './types';
 import { RenderCellProps } from 'react-data-grid';
 /**
- * Formatter para mostrar un etiqueta en una columna de un DataGrid
- * @param props - Propiedades del formatter
- * @returns Componente EditLabelFormatter
+ * Formatter para mostrar una etiqueta editable en una columna del DataGrid.
+ *
+ * Renderiza un campo de texto editable que permite modificar el valor
+ * directamente en la celda de la tabla.
+ * @param props.fieldLabel - Campo del objeto row a mostrar/editar
+ * @param props.fieldWidth - Ancho del campo de edición
+ * @returns Función render para react-data-grid
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'label',
+ *     name: 'Etiqueta',
+ *     renderCell: ColumnEditLabelFormatter({ fieldLabel: 'label' })
+ *   }
+ * ];
+ * ```
  */
 export declare const ColumnEditLabelFormatter: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/editors/EditLabelEditor/useColumnEditLabel.d.ts

@@ -1,6 +1,28 @@
 import { ColumnEditLabelFormatterProps } from './types';
 /**
- * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
+ * Hook que retorna el formatter, filter y customSort para columnas con etiquetas editables.
+ *
+ * Proporciona una configuración completa para columnas que necesitan:
+ * - Renderizado con EditLabelFormatter
+ * - Filtrado personalizado por el campo de etiqueta
+ * - Ordenamiento personalizado por el campo de etiqueta
+ * @param props.fieldLabel - Campo del objeto row a usar
+ * @param props.fieldWidth - Ancho del campo de edición
+ * @returns Objeto con formatter, customFilter y customSort
+ * @example
+ * ```tsx
+ * const { formatter, customFilter, customSort } = useColumnEditLabel({
+ *   fieldLabel: 'name',
+ *   fieldWidth: 200
+ * });
+ *
+ * const columns = [{
+ *   key: 'name',
+ *   renderCell: formatter,
+ *   customFilter,
+ *   customSort
+ * }];
+ * ```
  */
 export declare const useColumnEditLabel: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/editors/TextEditor/TextEditor.d.ts

@@ -0,0 +1,50 @@
+import { RenderEditCellProps } from 'react-data-grid';
+/**
+ * Editor para campos de texto en el DataGrid.
+ *
+ * Permite editar valores de texto inline con las siguientes características:
+ * - Auto-enfoque al abrir
+ * - Selección automática del texto existente
+ * - Cierra al perder el foco (onBlur)
+ * @param props.row - Fila actual del DataGrid
+ * @param props.column - Columna actual del DataGrid
+ * @param props.onRowChange - Función para actualizar la fila
+ * @param props.onClose - Función para cerrar el editor
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'name',
+ *     name: 'Nombre',
+ *     renderEditCell: TextEditor
+ *   }
+ * ];
+ * ```
+ */
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor para campos numéricos en el DataGrid.
+ *
+ * Permite editar valores numéricos inline con las siguientes características:
+ * - Auto-enfoque al abrir
+ * - Selección automática del texto existente
+ * - Navegación con flechas arriba/abajo cierra el editor
+ * - Enter cierra el editor guardando cambios
+ * - Convierte valores vacíos a string vacío
+ * @param props.row - Fila actual del DataGrid
+ * @param props.column - Columna actual del DataGrid
+ * @param props.onRowChange - Función para actualizar la fila
+ * @param props.onClose - Función para cerrar el editor
+ * @example
+ * ```tsx
+ * const columns = [
+ *   {
+ *     key: 'quantity',
+ *     name: 'Cantidad',
+ *     renderEditCell: NumberEditor
+ *   }
+ * ];
+ * ```
+ */
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export default TextEditor;

package/components/DataGrid/subcomponents/editors/TextEditor/TextEditor.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+function autoFocusAndSelect(input) {
+  input?.focus();
+  input?.select();
+}
+function TextEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(
+    InputTextEditorStyled,
+    {
+      ref: autoFocusAndSelect,
+      value: row[column.key],
+      onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
+      onBlur: () => onClose(true)
+    }
+  );
+}
+function NumberEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      onClose(true);
+    }
+    if (event.key === "Enter") {
+      onClose(true);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    InputTextEditorStyled,
+    {
+      ref: autoFocusAndSelect,
+      type: "number",
+      value: row[column.key],
+      onKeyDown: handleKeyDown,
+      onChange: (event) => onRowChange({
+        ...row,
+        [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
+      }),
+      onBlur: () => onClose(true)
+    }
+  );
+}
+export {
+  NumberEditor as N,
+  TextEditor as T
+};

package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts

@@ -1,20 +1 @@
-import { RenderEditCellProps } from 'react-data-grid';
-/**
- * Editor para campos de texto en el DataGrid.
- * Permite editar valores de texto con navegación por teclado.
- * @param row - Fila actual del DataGrid
- * @param column - Columna actual del DataGrid
- * @param onRowChange - Función para actualizar la fila
- * @param onClose - Función para cerrar el editor
- */
-export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
-/**
- * Editor para campos numéricos en el DataGrid.
- * Permite editar valores numéricos con validación y navegación por teclado.
- * @param row - Fila actual del DataGrid
- * @param column - Columna actual del DataGrid
- * @param onRowChange - Función para actualizar la fila
- * @param onClose - Función para cerrar el editor
- */
-export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
-export default TextEditor;
+export { TextEditor, NumberEditor } from './TextEditor';