frontend-plus-react 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -622,7 +622,7 @@ var SnackbarAlert = _react2.default.forwardRef(function SnackbarAlert2(props, re
 });
 var SnackbarContext = _react.createContext.call(void 0, void 0);
 var DEFAULT_SUCCESS_DURATION = 3e3;
-var DEFAULT_ERROR_DURATION = 5e3;
+var DEFAULT_ERROR_DURATION = 1e4;
 var SnackbarProvider = ({ children }) => {
   const [snackbar, setSnackbar] = _react.useState.call(void 0, {
     open: false,
@@ -757,9 +757,12 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
-  const callApi = _react.useCallback.call(void 0, async (procedureName, params) => {
+  const callApi = _react.useCallback.call(void 0, async (procedureName, params, opts) => {
     setLoading(true);
     setError(null);
+    const defaultOpts = { ...{
+      reportOnSnackbar: true
+    }, ...opts };
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
@@ -771,7 +774,9 @@ var useApiCall = () => {
       } else if (err instanceof Error) {
         snackbarMessage = err.message;
       }
-      showSnackbar(snackbarMessage, "error");
+      if (defaultOpts.reportOnSnackbar) {
+        showSnackbar(snackbarMessage, "error");
+      }
       throw err;
     } finally {
       setLoading(false);
@@ -781,13 +786,6 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-
-
-
-
-
-
-
 var _material = require('@mui/material');
 
 // src/utils/functions.tsx
@@ -1145,7 +1143,6 @@ var ExampleClientSideComponent_default = ExampleClientSideComponent;
 var _WarningAmber = require('@mui/icons-material/WarningAmber'); var _WarningAmber2 = _interopRequireDefault(_WarningAmber);
 
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
-  const value = row[column.key];
   const clientSideName = _optionalChain([fieldDefinition, 'optionalAccess', _5 => _5.clientSide]) || "Desconocido";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Box,
@@ -1168,7 +1165,7 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: value !== null && value !== void 0 ? String(value) : "*Vac\xEDo*" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _WarningAmber2.default,
           {
@@ -1217,15 +1214,25 @@ var allColumnsCellRenderer = (props) => {
           fixedFields.push({ fieldName: field.target, value: row[field.source] });
         }
       });
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: {
-        // Se eliminó el padding para que la sub-grilla se extienda por completo
-        minHeight: "200px",
-        width: "100%",
-        height: "100%",
-        //display: 'flex',
-        //flexDirection: 'column',
-        boxSizing: "border-box"
-      }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GenericDataGrid_default, { tableName: detailTable.table, fixedFields }) });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Box,
+        {
+          sx: {
+            // Se eliminó el padding para que la sub-grilla se extienda por completo
+            minHeight: "200px",
+            width: "100%",
+            height: "100%",
+            //display: 'flex',
+            //flexDirection: 'column',
+            boxSizing: "border-box"
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation(),
+          onDoubleClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GenericDataGrid_default, { tableName: detailTable.table, fixedFields })
+        }
+      );
     }
     return void 0;
   }
@@ -1256,7 +1263,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? _optionalChain([cellFeedback, 'optionalAccess', _17 => _17.message]) : "", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
     }
     case "detail": {
       const detailColumn = column;
@@ -1294,7 +1301,7 @@ var allColumnsCellRenderer = (props) => {
     case "action": {
       const actionColumn = column;
       const { tableDefinition, handleDeleteRow } = actionColumn;
-      if (!_optionalChain([tableDefinition, 'access', _17 => _17.allow, 'optionalAccess', _18 => _18.delete])) return void 0;
+      if (!_optionalChain([tableDefinition, 'access', _18 => _18.allow, 'optionalAccess', _19 => _19.delete])) return void 0;
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { variant: "outlined", color: "error", size: "small", onClick: () => handleDeleteRow(row), title: "Eliminar fila", sx: { minWidth: 35, height: 30, p: 0.5, "& .MuiButton-startIcon": { m: 0 } }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Delete2.default, { sx: { fontSize: 18 } }) }) });
     }
     default:
@@ -1306,6 +1313,16 @@ var allColumnsCellRenderer = (props) => {
 
 var _InputBase = require('@mui/material/InputBase'); var _InputBase2 = _interopRequireDefault(_InputBase);
 
+
+function findChangedValues(oldRowData, newRowData) {
+  let changes = [];
+  for (const key in newRowData) {
+    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key]) {
+      changes.push(key);
+    }
+  }
+  return changes;
+}
 function InputRenderer({
   column,
   row,
@@ -1313,6 +1330,7 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
+  cellFeedback,
   setCellFeedback,
   onEnterPress,
   setTableData,
@@ -1322,7 +1340,13 @@ function InputRenderer({
 }) {
   const tableName = tableDefinition.tableName;
   const [editingValue, setEditingValue] = _react.useState.call(void 0, row[column.key]);
+  const theme = _material.useTheme.call(void 0, );
   const { showSuccess, showError } = useSnackbar();
+  const rowId = getPrimaryKeyValues(row, primaryKey);
+  let cellBackgroundColor;
+  if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === column.key) {
+    cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  }
   const initialRowId = _react.useMemo.call(void 0, () => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const { callApi } = useApiCall();
   const handleCommit = _react.useCallback.call(void 0, async (currentValue, closeEditor, focusNextCell) => {
@@ -1332,31 +1356,16 @@ function InputRenderer({
       (key) => potentialUpdatedRow[key] !== void 0 && potentialUpdatedRow[key] !== null && String(potentialUpdatedRow[key]).trim() !== ""
     );
     const isNewRow = !arePKValuesFilled || potentialUpdatedRow[NEW_ROW_INDICATOR];
-    const isMandatoryField = tableDefinition.primaryKey.includes(column.key) || _optionalChain([tableDefinition, 'access', _19 => _19.fields, 'access', _20 => _20.find, 'call', _21 => _21((f) => f.name === column.key), 'optionalAccess', _22 => _22.nullable]) === false;
+    const isMandatoryField = tableDefinition.primaryKey.includes(column.key) || _optionalChain([tableDefinition, 'access', _20 => _20.fields, 'access', _21 => _21.find, 'call', _22 => _22((f) => f.name === column.key), 'optionalAccess', _23 => _23.nullable]) === false;
     const isMandatoryFieldEmpty = isNewRow && isMandatoryField && (processedNewValue === null || processedNewValue === void 0 || String(processedNewValue).trim() === "");
     if (processedNewValue === row[column.key] && !isNewRow && !isMandatoryFieldEmpty) {
       console.log("No se guard\xF3: el valor no cambi\xF3 (y no es una nueva fila o campo obligatorio vac\xEDo que se est\xE1 iniciando).");
-      onClose(false, focusNextCell);
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
       return;
     }
     const oldRowData = { ...row };
     const primaryKeyValuesForBackend = tableDefinition.primaryKey.map((key) => potentialUpdatedRow[key]);
     const currentRowIdBeforeUpdate = getPrimaryKeyValues(oldRowData, tableDefinition.primaryKey);
     onRowChange({ ...row, [column.key]: processedNewValue }, true);
-    onClose(true, focusNextCell);
     if (isNewRow) {
       const areAllMandatoryFieldsFilled = tableDefinition.fields.every((fieldDef) => {
         const isMandatory = fieldDef.nullable === false || fieldDef.isPk;
@@ -1403,7 +1412,7 @@ function InputRenderer({
         }
       });
       if (localCellChanges.has(initialRowId)) {
-        _optionalChain([localCellChanges, 'access', _23 => _23.get, 'call', _24 => _24(initialRowId), 'optionalAccess', _25 => _25.forEach, 'call', _26 => _26((colKey) => {
+        _optionalChain([localCellChanges, 'access', _24 => _24.get, 'call', _25 => _25(initialRowId), 'optionalAccess', _26 => _26.forEach, 'call', _27 => _27((colKey) => {
           if (!rowToSend.hasOwnProperty(colKey)) {
             rowToSend[colKey] = potentialUpdatedRow[colKey];
           }
@@ -1423,21 +1432,7 @@ function InputRenderer({
         newRow: rowToSend,
         oldRow: oldRowData,
         status
-      });
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
-      showSuccess("Registro guardado exitosamente!");
+      }, { reportOnSnackbar: false });
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1460,15 +1455,18 @@ function InputRenderer({
         });
         finalRowIdForFeedback = getPrimaryKeyValues(persistedRowData, tableDefinition.primaryKey);
       } else {
-        persistedRowData = potentialUpdatedRow;
+        persistedRowData = response.row;
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
+        onRowChange({ ...response.row }, true);
+        onClose(true, focusNextCell);
       }
-      setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: column.key, type: "success" });
+      findChangedValues(oldRowData, response.row).forEach(
+        (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
+      );
     } catch (err) {
       console.error("Error al guardar el registro:", err);
-      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error" });
-      onRowChange(oldRowData, true);
+      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error", message: err.message });
     }
   }, [
     column,
@@ -1487,6 +1485,7 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = _react.useCallback.call(void 0, (event) => {
+    console.log("entra");
     if (event.key === "Enter") {
       handleCommit(editingValue, true, true);
       event.preventDefault();
@@ -1501,7 +1500,7 @@ function InputRenderer({
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
   const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _27 => _27.editable]) !== false;
+  const isFieldEditable = _optionalChain([fieldDefinition, 'optionalAccess', _28 => _28.editable]) !== false;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _InputBase2.default,
     {
@@ -1517,7 +1516,8 @@ function InputRenderer({
         borderRadius: "4px",
         padding: "2px 4px",
         fontSize: "0.8rem",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        backgroundColor: cellBackgroundColor
       },
       onClick: (e) => e.stopPropagation(),
       autoFocus: true,
@@ -1529,28 +1529,54 @@ var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
 
-var defaultColumnEditCellRenderer = (props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns) => {
-  const { column } = props;
-  if (column.editable) {
-    const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _28 => _28.some, 'call', _29 => _29((f) => f.fieldName === column.key)]);
-    const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _30 => _30.editable]) !== false && !isFixedField;
-    if (!isFieldEditableByUI) {
-      return void 0;
-    }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      InputRenderer_default,
-      {
-        ...props,
+var allColumnsEditCellRenderer = (props, allColumns) => {
+  const column = props.column;
+  switch (column.customType) {
+    case "default": {
+      const defaultColumn = column;
+      const {
         tableDefinition,
-        setCellFeedback,
-        onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+        fixedFields,
+        primaryKey,
         setTableData,
-        setLocalCellChanges,
+        cellFeedback,
+        setCellFeedback,
+        handleEnterKeyPressInEditor,
         localCellChanges,
-        primaryKey
+        setLocalCellChanges
+      } = defaultColumn;
+      if (column.editable) {
+        const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
+        const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _29 => _29.some, 'call', _30 => _30((f) => f.fieldName === column.key)]);
+        const isFieldEditableByUI = _optionalChain([fieldDefinition, 'optionalAccess', _31 => _31.editable]) !== false && !isFixedField;
+        if (!isFieldEditableByUI) {
+          return void 0;
+        }
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          InputRenderer_default,
+          {
+            ...props,
+            tableDefinition,
+            setCellFeedback,
+            cellFeedback,
+            onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+            setTableData,
+            setLocalCellChanges,
+            localCellChanges,
+            primaryKey
+          }
+        );
       }
-    );
+      return void 0;
+    }
+    case "detail": {
+      return void 0;
+    }
+    case "action": {
+      return void 0;
+    }
+    default:
+      return void 0;
   }
 };
 
@@ -1578,7 +1604,10 @@ function EmptyRowsRenderer() {
 // src/components/grid/GenericDataGrid.tsx
 
 var getPrimaryKeyValues = (row, primaryKey) => {
-  return primaryKey.concat(DETAIL_ROW_INDICATOR).map((key) => {
+  if (row[DETAIL_ROW_INDICATOR]) {
+    primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
+  }
+  return primaryKey.map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
@@ -1593,6 +1622,7 @@ var GenericDataGrid = ({
   const [isFilterRowVisible, setIsFilterRowVisible] = _react.useState.call(void 0, false);
   const [filters, setFilters] = _react.useState.call(void 0, {});
   const [selectedRows, setSelectedRows] = _react.useState.call(void 0, () => /* @__PURE__ */ new Set());
+  const [selectedCell, setSelectedCell] = _react.useState.call(void 0, void 0);
   const [cellFeedback, setCellFeedback] = _react.useState.call(void 0, null);
   const [localCellChanges, setLocalCellChanges] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
   const theme = _material.useTheme.call(void 0, );
@@ -1638,7 +1668,11 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [tableName, fixedFields, showError]);
+  }, [
+    tableName,
+    /*fixedFields,*/
+    showError
+  ]);
   _react.useEffect.call(void 0, () => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
@@ -1646,7 +1680,8 @@ var GenericDataGrid = ({
       }
       const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        setCellFeedback(null);
+        if (cellFeedback.type == "success")
+          setCellFeedback(null);
       }, timerDuration);
     }
     return () => {
@@ -1800,7 +1835,7 @@ var GenericDataGrid = ({
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        return col.key !== "filterToggle" && col.key !== "deleteAction" && (_optionalChain([fieldDefinition, 'optionalAccess', _31 => _31.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.clientSide]));
+        return col.key !== "filterToggle" && col.key !== "deleteAction" && (_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _33 => _33.clientSide]));
       });
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
@@ -1817,19 +1852,22 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: false, scrollIntoView: true });
+          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
         }
       }
     }
   }, [filteredRows, tableDefinition]);
+  const handleSelectedCellChange = _react.useCallback.call(void 0, (args) => {
+    setSelectedCell(args);
+  }, []);
   const columns = _react.useMemo.call(void 0, () => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _33 => _33.find, 'call', _34 => _34((f) => f.fieldName === field.name)]);
+      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _34 => _34.find, 'call', _35 => _35((f) => f.fieldName === field.name)]);
       return !(fixedFieldEntry && fixedFieldEntry.until === void 0);
     });
     const defaultColumns = fieldsToShow.map((fieldDef) => {
-      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _35 => _35.some, 'call', _36 => _36((f) => f.fieldName === fieldDef.name)]);
+      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _36 => _36.some, 'call', _37 => _37((f) => f.fieldName === fieldDef.name)]);
       const isFieldEditable = fieldDef.editable !== false && !isFixedField;
       return {
         key: fieldDef.name,
@@ -1840,11 +1878,14 @@ var GenericDataGrid = ({
         primaryKey,
         fixedFields,
         localCellChanges,
+        setLocalCellChanges,
+        setTableData,
+        setCellFeedback,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
-        //frozen: true,
         editable: isFieldEditable,
+        handleEnterKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
         renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
@@ -1858,9 +1899,9 @@ var GenericDataGrid = ({
       handleDeleteRow,
       name: "filterCol",
       width: 50,
+      editable: false,
       resizable: false,
       sortable: false,
-      //frozen: true,
       renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
@@ -1880,8 +1921,8 @@ var GenericDataGrid = ({
           name: detailTable.label || `Detalle ${detailTable.abr}`,
           resizable: false,
           sortable: false,
+          editable: false,
           width: 50,
-          //frozen: true,
           renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
           renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
         });
@@ -1903,7 +1944,7 @@ var GenericDataGrid = ({
         }
         return void 0;
       },
-      renderEditCell: (props) => defaultColumnEditCellRenderer(props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns),
+      renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
   }, [
@@ -1927,10 +1968,21 @@ var GenericDataGrid = ({
   const handleRowsChange = _react.useCallback.call(void 0, (updatedRows) => {
     setTableData(updatedRows);
   }, []);
+  const deselectAllOtherGrids = (currentGridElement) => {
+    const allSelectedCells = document.querySelectorAll("div[aria-selected='true']");
+    allSelectedCells.forEach((cell) => {
+      const parentGrid = cell.closest(".rdg");
+      if (parentGrid && parentGrid !== currentGridElement) {
+        cell.setAttribute("aria-selected", "false");
+      }
+    });
+  };
   const handleCellClick = _react.useCallback.call(void 0, (args) => {
-    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _37 => _37.fields, 'access', _38 => _38.find, 'call', _39 => _39((f) => f.name === args.column.key)]);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _40 => _40.some, 'call', _41 => _41((f) => f.fieldName === args.column.key)]);
-    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _42 => _42.editable]) !== false && !isFixedField;
+    deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.element]));
+    args.selectCell(true);
+    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _40 => _40.fields, 'access', _41 => _41.find, 'call', _42 => _42((f) => f.name === args.column.key)]);
+    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _43 => _43.some, 'call', _44 => _44((f) => f.fieldName === args.column.key)]);
+    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _45 => _45.editable]) !== false && !isFixedField;
     console.log("Clicked column index:", args.column.idx);
     console.log("Clicked row index:", args.rowIdx);
     console.log("Is editable:", isEditable);
@@ -1948,7 +2000,7 @@ var GenericDataGrid = ({
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Alert, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    _optionalChain([tableDefinition, 'access', _43 => _43.allow, 'optionalAccess', _44 => _44.insert]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optionalChain([tableDefinition, 'access', _46 => _46.allow, 'optionalAccess', _47 => _47.insert]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", px: 2, pb: 1 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _material.Button,
       {
         variant: "contained",
@@ -2003,6 +2055,7 @@ var GenericDataGrid = ({
             enableVirtualization: true,
             rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
             onSelectedRowsChange: setSelectedRows,
+            onSelectedCellChange: handleSelectedCellChange,
             onRowsChange: handleRowsChange,
             selectedRows,
             rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 35,
@@ -2010,8 +2063,8 @@ var GenericDataGrid = ({
             headerRowHeight: 35,
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
             summaryRowHeight: isFilterRowVisible ? 35 : 0,
-            onCellClick: handleCellClick,
-            renderers: { noRowsFallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyRowsRenderer, {}) }
+            renderers: { noRowsFallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyRowsRenderer, {}) },
+            onCellClick: handleCellClick
           }
         )
       }
@@ -2550,7 +2603,7 @@ var SessionExpiredMessage_default = SessionExpiredMessage;
 var HomePage = () => {
   const { clientContext } = useApp();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _45 => _45.username])}` }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _48 => _48.username])}` }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
@@ -2679,7 +2732,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.username,
-                        helperText: _optionalChain([errors, 'access', _46 => _46.username, 'optionalAccess', _47 => _47.message]),
+                        helperText: _optionalChain([errors, 'access', _49 => _49.username, 'optionalAccess', _50 => _50.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2702,7 +2755,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.password,
-                        helperText: _optionalChain([errors, 'access', _48 => _48.password, 'optionalAccess', _49 => _49.message]),
+                        helperText: _optionalChain([errors, 'access', _51 => _51.password, 'optionalAccess', _52 => _52.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2780,7 +2833,7 @@ var ProcedureForm = () => {
   const [executionLog, setExecutionLog] = _react.useState.call(void 0, []);
   const [procedureResultData, setProcedureResultData] = _react.useState.call(void 0, null);
   const procedure = _react.useMemo.call(void 0, () => {
-    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _50 => _50.procedure])) {
+    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _53 => _53.procedure])) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
@@ -3071,7 +3124,7 @@ var ProcedureForm = () => {
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = _react.useMemo.call(void 0, () => {
-    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _51 => _51.resultOk])) return null;
+    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _54 => _54.resultOk])) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentToRender, { data: procedureResultData });