frontend-plus-react 0.1.10 → 0.1.12

package/dist/index.js

@@ -1258,8 +1258,10 @@ var allColumnsCellRenderer = (props) => {
   switch (column.customType) {
     case "default": {
       const defaultColumn = column;
-      const { fieldDef, tableDefinition, primaryKey, cellFeedback, fixedFields, localCellChanges } = defaultColumn;
+      const { fieldDef, tableDefinition, primaryKey, cellFeedbackMap, fixedFields, localCellChanges } = defaultColumn;
       const rowId = getPrimaryKeyValues(row, primaryKey);
+      const cellKey = `${rowId}-${props.column.key}`;
+      const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
       if (fieldDef?.clientSide) {
         const ClientSideComponent = clientSides[fieldDef.clientSide];
         if (ClientSideComponent) {
@@ -1268,8 +1270,8 @@ var allColumnsCellRenderer = (props) => {
         return /* @__PURE__ */ jsx8(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
       }
       let cellBackgroundColor = "transparent";
-      if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key) {
-        cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+      if (currentCellFeedback) {
+        cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
       } else {
         const isNewRowLocalCheck = row[NEW_ROW_INDICATOR];
         const isMandatory = tableDefinition.primaryKey.includes(props.column.key) || tableDefinition.fields.find((f) => f.name === props.column.key)?.nullable === false;
@@ -1282,7 +1284,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box5, { 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__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx8(Box5, { 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__ */ jsx8(Typography4, { 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;
@@ -1366,10 +1368,10 @@ import { useCallback as useCallback3, useMemo, useState as useState3 } from "rea
 import InputBase2 from "@mui/material/InputBase";
 import { useTheme as useTheme2 } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
-function findChangedValues(oldRowData, newRowData) {
+function findChangedValues(oldRowData, newRowData, isNewRow) {
   let changes = [];
   for (const key in newRowData) {
-    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key]) {
+    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key] || isNewRow) {
       changes.push(key);
     }
   }
@@ -1382,8 +1384,10 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
-  cellFeedback,
-  setCellFeedback,
+  cellFeedbackMap,
+  // Tipo: CellFeedbackMap
+  setCellFeedbackMap,
+  // Tipo: Dispatch<SetStateAction<CellFeedbackMap>>
   onKeyPress,
   setTableData,
   setLocalCellChanges,
@@ -1394,10 +1398,11 @@ function InputRenderer({
   const [editingValue, setEditingValue] = useState3(row[column.key]);
   const theme = useTheme2();
   const { showSuccess, showError } = useSnackbar();
-  const rowId = getPrimaryKeyValues(row, primaryKey);
+  const cellKey = getCellKey(row, column.key, primaryKey);
+  const currentCellFeedback = cellFeedbackMap.get(cellKey);
   let cellBackgroundColor;
-  if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === column.key) {
-    cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  if (currentCellFeedback) {
+    cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
   }
   const initialRowId = useMemo(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const { callApi } = useApiCall();
@@ -1496,7 +1501,6 @@ function InputRenderer({
           if (rowIndex !== -1) {
             newData[rowIndex] = persistedRowData;
           } else {
-            console.warn("Fila no encontrada para actualizar despu\xE9s de la inserci\xF3n. Podr\xEDa haber un problema de sincronizaci\xF3n.");
             const newPrimaryKeyId = getPrimaryKeyValues(persistedRowData, tableDefinition.primaryKey);
             const newRowIndex = newData.findIndex((r) => getPrimaryKeyValues(r, tableDefinition.primaryKey) === newPrimaryKeyId);
             if (newRowIndex !== -1) {
@@ -1512,12 +1516,28 @@ function InputRenderer({
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
         onRowChange({ ...response.row }, true);
       }
-      findChangedValues(oldRowData, response.row).forEach(
-        (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
-      );
+      const changes = findChangedValues(oldRowData, response.row, isNewRow);
+      setCellFeedbackMap((prevFeedback) => {
+        const newFeedback = new Map(prevFeedback);
+        changes.forEach((key) => {
+          const keyForMap = `${finalRowIdForFeedback}-${key}`;
+          newFeedback.set(keyForMap, { rowId: finalRowIdForFeedback, columnKey: key, type: "success" });
+        });
+        return newFeedback;
+      });
     } catch (err) {
       console.error("Error al guardar el registro:", err);
-      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error", message: err.message });
+      const keyForMap = `${currentRowIdBeforeUpdate}-${column.key}`;
+      setCellFeedbackMap((prevFeedback) => {
+        const newFeedback = new Map(prevFeedback);
+        newFeedback.set(keyForMap, {
+          rowId: currentRowIdBeforeUpdate,
+          columnKey: column.key,
+          type: "error",
+          message: err.message
+        });
+        return newFeedback;
+      });
     }
   }, [
     column,
@@ -1528,18 +1548,18 @@ function InputRenderer({
     tableDefinition.fields,
     showSuccess,
     showError,
-    setCellFeedback,
+    setCellFeedbackMap,
     onClose,
     setTableData,
     setLocalCellChanges,
     localCellChanges,
     initialRowId
   ]);
-  const handleKeyDown = useCallback3((event) => {
-    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
-      handleCommit(editingValue, true, true);
+  const handleKeyDown = useCallback3(async (event) => {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "F4"].includes(event.key)) {
+      await handleCommit(editingValue, true, true);
       if (onKeyPress) {
-        onKeyPress(rowIdx, column.key, event);
+        onKeyPress(rowIdx, column.key, event, handleCommit);
       }
     }
   }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress]);
@@ -1587,8 +1607,10 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         fixedFields,
         primaryKey,
         setTableData,
-        cellFeedback,
-        setCellFeedback,
+        cellFeedbackMap,
+        // <--- CAMBIADO
+        setCellFeedbackMap,
+        // <--- CAMBIADO
         handleKeyPressInEditor,
         localCellChanges,
         setLocalCellChanges
@@ -1601,20 +1623,25 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
           return void 0;
         }
         const rowId = getPrimaryKeyValues(props.row, primaryKey);
-        return /* @__PURE__ */ jsx10(Tooltip4, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
-          InputRenderer_default,
-          {
-            ...props,
-            tableDefinition,
-            setCellFeedback,
-            cellFeedback,
-            onKeyPress: (rowIndex, columnKey, event) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns),
-            setTableData,
-            setLocalCellChanges,
-            localCellChanges,
-            primaryKey
-          }
-        ) }) });
+        const cellKey = `${rowId}-${props.column.key}`;
+        const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
+        return (
+          // --- TOOLTIP ADAPTADO: Lee el mensaje de error desde el Mapa ---
+          /* @__PURE__ */ jsx10(Tooltip4, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
+            InputRenderer_default,
+            {
+              ...props,
+              tableDefinition,
+              setCellFeedbackMap,
+              cellFeedbackMap,
+              onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
+              setTableData,
+              setLocalCellChanges,
+              localCellChanges,
+              primaryKey
+            }
+          ) }) })
+        );
       }
       return void 0;
     }
@@ -1652,16 +1679,20 @@ function EmptyRowsRenderer() {
 
 // src/components/grid/GenericDataGrid.tsx
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var NEW_ROW_INDICATOR = "$new";
+var DETAIL_ROW_INDICATOR = "$detail";
 var getPrimaryKeyValues = (row, primaryKey) => {
+  let keys = [...primaryKey];
   if (row[DETAIL_ROW_INDICATOR]) {
-    primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
+    keys = keys.concat(DETAIL_ROW_INDICATOR);
   }
-  return primaryKey.map((key) => {
+  return keys.map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
-var NEW_ROW_INDICATOR = "$new";
-var DETAIL_ROW_INDICATOR = "$detail";
+var getCellKey = (row, columnKey, primaryKey) => {
+  return `${getPrimaryKeyValues(row, primaryKey)}|${columnKey}`;
+};
 var GenericDataGrid = ({
   tableName,
   fixedFields,
@@ -1674,7 +1705,7 @@ var GenericDataGrid = ({
   const [filters, setFilters] = useState4({});
   const [selectedRows, setSelectedRows] = useState4(() => /* @__PURE__ */ new Set());
   const [selectedCell, setSelectedCell] = useState4(void 0);
-  const [cellFeedback, setCellFeedback] = useState4(null);
+  const [cellFeedbackMap, setCellFeedbackMap] = useState4(/* @__PURE__ */ new Map());
   const [localCellChanges, setLocalCellChanges] = useState4(/* @__PURE__ */ new Map());
   const theme = useTheme3();
   const [openConfirmDialog, setOpenConfirmDialog] = useState4(false);
@@ -1692,7 +1723,7 @@ var GenericDataGrid = ({
     setSelectedRows(/* @__PURE__ */ new Set());
     setTableDefinition(null);
     setTableData([]);
-    setCellFeedback(null);
+    setCellFeedbackMap(/* @__PURE__ */ new Map());
     setLocalCellChanges(/* @__PURE__ */ new Map());
     setOpenConfirmDialog(false);
     setRowToDelete(null);
@@ -1719,20 +1750,26 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [
-    tableName,
-    /*fixedFields,*/
-    showError
-  ]);
+  }, [tableName, fixedFields, showError]);
   useEffect(() => {
-    if (cellFeedback) {
+    if (cellFeedbackMap.size > 0) {
       if (feedbackTimerRef.current) {
         clearTimeout(feedbackTimerRef.current);
       }
       const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        if (cellFeedback.type == "success")
-          setCellFeedback(null);
+        setCellFeedbackMap((prevMap) => {
+          const newMap = new Map(prevMap);
+          let mapChanged = false;
+          for (const [cellId, feedback] of prevMap.entries()) {
+            if (feedback.type === "success") {
+              newMap.delete(cellId);
+              mapChanged = true;
+            }
+          }
+          return mapChanged ? newMap : prevMap;
+        });
+        feedbackTimerRef.current = null;
       }, timerDuration);
     }
     return () => {
@@ -1740,7 +1777,7 @@ var GenericDataGrid = ({
         clearTimeout(feedbackTimerRef.current);
       }
     };
-  }, [cellFeedback]);
+  }, [cellFeedbackMap]);
   const primaryKey = useMemo2(() => {
     if (!tableDefinition) return ["id"];
     return tableDefinition.primaryKey && tableDefinition.primaryKey.length > 0 ? tableDefinition.primaryKey : ["id"];
@@ -1881,19 +1918,20 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleKeyPressInEditor = useCallback4((rowIndex, columnKey, event, currentColumns) => {
+  const handleKeyPressInEditor = useCallback4((rowIndex, columnKey, event, currentColumns, handleCommit) => {
     if (dataGridRef.current && tableDefinition) {
       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 !== "actionsColumn" && col.customType != "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
-      const { key, currentTarget } = event;
-      const input = currentTarget;
+      const { key, target } = event;
+      const input = target;
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
         let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
-        const calcularColumnaSiguienteYHacerFoco = () => {
+        const hacerFoco = ({ rowIdx, idx }) => setTimeout(() => dataGridRef.current?.selectCell({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true }), 10);
+        const calcularColumnaSiguiente = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex + 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex >= editableColumns.length) {
@@ -1908,9 +1946,9 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: nextColumnIndex };
         };
-        const calcularColumnaAnteriorYHacerFoco = () => {
+        const calcularColumnaAnterior = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex - 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex <= 0) {
@@ -1918,57 +1956,65 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: nextColumnIndex };
         };
-        const calcularFilaSiguienteYHacerFoco = () => {
+        const calcularFilaSiguiente = () => {
           let nextRowIndex = rowIndex;
           nextRowIndex++;
           while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
             nextRowIndex++;
           }
           if (nextRowIndex >= filteredRows.length) {
-            return;
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
           }
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
         };
-        const calcularFilaAnteriorYHacerFoco = () => {
+        const calcularFilaAnterior = () => {
           let nextRowIndex = rowIndex;
           nextRowIndex--;
           while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
             nextRowIndex--;
           }
           if (nextRowIndex < 0) {
-            return;
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
           }
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
         };
         if (currentEditableColumnIndex !== -1) {
           switch (true) {
             case ["Enter", "Tab"].includes(key): {
-              calcularColumnaSiguienteYHacerFoco();
+              hacerFoco(calcularColumnaSiguiente());
               break;
             }
             case key == "ArrowRight": {
               const cursorPosition = input.selectionStart;
               const inputValueLength = input.value.length;
               if (cursorPosition === inputValueLength) {
-                calcularColumnaSiguienteYHacerFoco();
+                hacerFoco(calcularColumnaSiguiente());
               }
               break;
             }
             case key == "ArrowLeft": {
               const cursorPosition = input.selectionStart;
               if (cursorPosition === 0) {
-                calcularColumnaAnteriorYHacerFoco();
+                hacerFoco(calcularColumnaAnterior());
               }
               break;
             }
             case key == "ArrowUp": {
-              calcularFilaAnteriorYHacerFoco();
+              hacerFoco(calcularFilaAnterior());
               break;
             }
             case key == "ArrowDown": {
-              calcularFilaSiguienteYHacerFoco();
+              hacerFoco(calcularFilaSiguiente());
+              break;
+            }
+            case key == "F4": {
+              const { rowIdx, idx } = calcularFilaSiguiente();
+              const previousRow = tableData[rowIndex - 1];
+              if (previousRow && !previousRow[DETAIL_ROW_INDICATOR]) {
+                handleCommit(previousRow[columnKey], true, true).then(() => hacerFoco({ rowIdx, idx }));
+              }
               break;
             }
             default:
@@ -1977,7 +2023,7 @@ var GenericDataGrid = ({
         }
       }
     }
-  }, [filteredRows, tableDefinition]);
+  }, [filteredRows, tableDefinition, tableData]);
   const handleSelectedCellChange = useCallback4((args) => {
     setSelectedCell(args);
   }, []);
@@ -1995,13 +2041,14 @@ var GenericDataGrid = ({
         customType: "default",
         tableDefinition,
         fieldDef,
-        cellFeedback,
+        // 💥 MULTI-CELL: Se inyecta el mapa y su setter
+        cellFeedbackMap,
+        setCellFeedbackMap,
         primaryKey,
         fixedFields,
         localCellChanges,
         setLocalCellChanges,
         setTableData,
-        setCellFeedback,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
@@ -2083,7 +2130,8 @@ var GenericDataGrid = ({
     isFilterRowVisible,
     filters,
     toggleFilterVisibility,
-    cellFeedback,
+    // 💥 MULTI-CELL: Se usa el mapa en lugar de la variable simple
+    cellFeedbackMap,
     primaryKey,
     theme.palette.success.light,
     theme.palette.error.light,