Extract combo editor and table grid

website/src/features/toolboxes/modules/TableGrid.jsx

@@ -0,0 +1,92 @@
+// Rôle : rend la grille du tableau et connecte les cellules aux handlers du module.
+import { columnIndexToName, parseCellAddress } from "./tableFormulaEngine.js";
+import { HeaderLabelInput, TableRow } from "./TableGridParts.jsx";
+
+export function TableGrid({
+  data,
+  textContent,
+  evaluatedCells,
+  editingCell,
+  highlightedCell,
+  selection,
+  movePreview,
+  columnWidths,
+  rowHeaderWidth,
+  draggingSelectionRef,
+  onColumnLabelChange,
+  onRowLabelChange,
+  onCellChange,
+  onFormulaSelectionStart,
+  onFormulaSelectionExtend,
+  onStartMoveSelection,
+  onMoveSelection,
+  onSelectCell,
+  onExtendSelection,
+  onPasteSelection,
+  onCellKeyDown,
+  onStartEditing,
+  onEditingCellClear,
+  registerInput
+}) {
+  return (
+    <div className="table-grid-wrap legacy-scrollbar">
+      <div
+        className="table-grid"
+        style={{
+          "--table-columns": `${rowHeaderWidth}px ${columnWidths.map((width) => `minmax(${width}px, 1fr)`).join(" ")}`,
+          "--table-min-width": `${rowHeaderWidth + columnWidths.reduce((total, width) => total + width, 0)}px`
+        }}
+        role="grid"
+        aria-label={textContent.gridLabel || "Tableau"}
+      >
+        <span className="table-corner" aria-hidden="true" />
+        {Array.from({ length: data.columns }, (_, columnIndex) => (
+          <HeaderLabelInput
+            className="table-header-cell table-header-input"
+            key={columnIndex}
+            value={data.columnLabels?.[columnIndex] || columnIndexToName(columnIndex)}
+            fallback={columnIndexToName(columnIndex)}
+            onSave={(value) => onColumnLabelChange(columnIndex, value)}
+            aria-label={`${textContent.columnLabel || "Intitulé de colonne"} ${columnIndexToName(columnIndex)}`}
+            title={`${columnIndexToName(columnIndex)} - ${textContent.columnFormulaTitle || "Référence conservée dans les formules"}`}
+          />
+        ))}
+        {Array.from({ length: data.rows }, (_, rowIndex) => (
+          <TableRow
+            key={rowIndex}
+            rowIndex={rowIndex}
+            columns={data.columns}
+            cells={data.cells}
+            evaluatedCells={evaluatedCells}
+            editingCell={editingCell}
+            highlightedCell={highlightedCell}
+            textContent={textContent}
+            rowLabel={data.rowLabels?.[rowIndex] || ""}
+            selection={selection}
+            movePreview={movePreview}
+            onRowLabelChange={onRowLabelChange}
+            onFocus={(cell) => {
+              const parsed = parseCellAddress(cell);
+              if (parsed && !selection) onSelectCell(parsed.rowIndex, parsed.columnIndex);
+            }}
+            onBlur={(cell) => {
+              if (editingCell === cell) onEditingCellClear();
+            }}
+            onCellChange={onCellChange}
+            onFormulaSelectionStart={onFormulaSelectionStart}
+            onFormulaSelectionExtend={onFormulaSelectionExtend}
+            onStartMoveSelection={onStartMoveSelection}
+            onMoveSelection={onMoveSelection}
+            onSelectCell={onSelectCell}
+            onExtendSelection={onExtendSelection}
+            onPasteSelection={onPasteSelection}
+            draggingSelectionRef={draggingSelectionRef}
+            onCellKeyDown={onCellKeyDown}
+            onStartEditing={onStartEditing}
+            registerInput={registerInput}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}