@extend-ai/react-xlsx 0.8.8 → 0.9.1

package/dist/index.cjs

@@ -21579,6 +21579,9 @@ function XlsxGrid({
   const selectionCommitFrameRef = React4.useRef(null);
   const selectionRef = React4.useRef(null);
   const editingCellRef = React4.useRef(null);
+  const commitEditingRef = React4.useRef(() => {
+  });
+  const editingInputRef = React4.useRef(null);
   const readOnlyRef = React4.useRef(readOnly);
   const committedZoomScaleRef = React4.useRef(zoomScale);
   const gestureZoomScaleRef = React4.useRef(zoomScale);
@@ -22456,6 +22459,18 @@ function XlsxGrid({
   React4.useEffect(() => {
     editingCellRef.current = editingCell;
   }, [editingCell]);
+  React4.useLayoutEffect(() => {
+    if (!editingCell) {
+      return;
+    }
+    const input = editingInputRef.current;
+    if (!input) {
+      return;
+    }
+    input.focus();
+    const caret = input.value.length;
+    input.setSelectionRange(caret, caret);
+  }, [editingCell]);
   React4.useEffect(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
@@ -23215,6 +23230,9 @@ function XlsxGrid({
     setEditingValue("");
     focusGrid();
   }, [focusGrid]);
+  React4.useEffect(() => {
+    commitEditingRef.current = commitEditing;
+  }, [commitEditing]);
   const [, startBatchTransition] = React4.useTransition();
   const [, startSelectionTransition] = React4.useTransition();
   const [asyncViewportRowBatch, setAsyncViewportRowBatch] = React4.useState(null);
@@ -24517,6 +24535,9 @@ function XlsxGrid({
     const initialRange = normalizeRange2({ start: anchor, end: targetCell });
     const isActive = isSameCell(activeCellRef.current, targetCell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
+    if (editingCellRef.current && !isActive) {
+      commitEditingRef.current();
+    }
     const pointerOrigin = targetCell.row === cell.row && targetCell.col === cell.col ? resolveCellPointerOrigin(cell, event.currentTarget.getBoundingClientRect(), event.clientX, event.clientY) : resolveCellPointerOriginFromClient(targetCell, event.clientX, event.clientY);
     const originOverlayRect = targetCell.row === cell.row && targetCell.col === cell.col ? resolveMountedCellOverlayRect(event.currentTarget) : resolveOverlayRect(initialRange);
     if (!pointerOrigin) {
@@ -24872,6 +24893,9 @@ function XlsxGrid({
     const initialRange = normalizeRange2({ start: anchor, end: cell });
     const isActive = isSameCell(activeCellRef.current, cell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
+    if (editingCellRef.current && !isActive) {
+      commitEditingRef.current();
+    }
     const rowIndex = rowIndexByActual.get(cell.row);
     const colIndex = colIndexByActual.get(cell.col);
     if (rowIndex === void 0 || colIndex === void 0) {
@@ -27833,52 +27857,62 @@ function XlsxGrid({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
                   ] }),
-                  editingCell && editingOverlayRect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      style: {
-                        left: editingOverlayRect.left,
-                        position: "absolute",
-                        top: editingOverlayRect.top,
-                        width: editingOverlayRect.width,
-                        height: editingOverlayRect.height,
-                        zIndex: 28
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "input",
-                        {
-                          autoFocus: true,
-                          onBlur: commitEditing,
-                          onChange: (event) => setEditingValue(event.target.value),
-                          onKeyDown: (event) => {
-                            event.stopPropagation();
-                            if (event.key === "Enter") {
-                              event.preventDefault();
-                              commitEditing();
-                              return;
-                            }
-                            if (event.key === "Escape") {
-                              event.preventDefault();
-                              cancelEditing();
-                            }
-                          },
-                          style: {
-                            backgroundColor: resolveSheetSurface(activeSheet, palette),
-                            border: 0,
-                            boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
-                            color: "#000000",
-                            font: resolveCanvasFont(getCellData(editingCell.row, editingCell.col).style, 12 * zoomFactor),
-                            height: "100%",
-                            margin: 0,
-                            outline: "none",
-                            padding: scaleCssLengthExpression(DEFAULT_CELL_PADDING, zoomFactor),
-                            width: "100%"
-                          },
-                          value: editingValue
-                        }
-                      )
-                    }
-                  ) : null,
+                  editingCell && editingOverlayRect ? (() => {
+                    const editingCellStyle = getCellData(editingCell.row, editingCell.col).style;
+                    const editingBackground = typeof editingCellStyle.backgroundColor === "string" ? editingCellStyle.backgroundColor : resolveSheetSurface(activeSheet, palette);
+                    const editingColor = typeof editingCellStyle.color === "string" ? editingCellStyle.color : resolveReadableTextColor(null, editingBackground, palette);
+                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "div",
+                      {
+                        style: {
+                          left: editingOverlayRect.left,
+                          position: "absolute",
+                          top: editingOverlayRect.top,
+                          width: editingOverlayRect.width,
+                          height: editingOverlayRect.height,
+                          zIndex: 28
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "input",
+                          {
+                            ref: editingInputRef,
+                            autoFocus: true,
+                            onBlur: commitEditing,
+                            onChange: (event) => setEditingValue(event.target.value),
+                            onKeyDown: (event) => {
+                              event.stopPropagation();
+                              if (event.key === "Enter") {
+                                event.preventDefault();
+                                commitEditing();
+                                return;
+                              }
+                              if (event.key === "Escape") {
+                                event.preventDefault();
+                                cancelEditing();
+                              }
+                            },
+                            style: {
+                              backgroundColor: editingBackground,
+                              border: 0,
+                              boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
+                              boxSizing: "border-box",
+                              color: editingColor,
+                              display: "block",
+                              font: resolveCanvasFont(editingCellStyle, 12 * zoomFactor),
+                              height: "100%",
+                              margin: 0,
+                              minHeight: 0,
+                              outline: "none",
+                              overflow: "hidden",
+                              padding: scaleCssLengthExpression(DEFAULT_CELL_PADDING, zoomFactor),
+                              width: "100%"
+                            },
+                            value: editingValue
+                          }
+                        )
+                      }
+                    );
+                  })() : null,
                   activeCellAdornment && activeCellAdornmentRect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {