@extend-ai/react-xlsx 0.8.1 → 0.8.3

package/dist/index.js

@@ -6261,6 +6261,84 @@ function resizeImageRect(rect, handle, deltaX, deltaY, minimumSize = 16) {
   return { height, left, top, width };
 }
 
+// src/safe-calculate.ts
+var SHEET_REF_REGEX = /'((?:[^']|'')+)'!|([A-Za-z_\u0080-\uFFFF][\w.\u0080-\uFFFF]*)!/g;
+function collectReferencedSheetNames(workbook) {
+  const referenced = /* @__PURE__ */ new Set();
+  for (let sheetIdx = 0; sheetIdx < workbook.sheetCount; sheetIdx += 1) {
+    let sheet;
+    try {
+      sheet = workbook.getSheet(sheetIdx);
+    } catch {
+      continue;
+    }
+    const cells = sheet.formulaCells;
+    if (!Array.isArray(cells)) {
+      continue;
+    }
+    for (const cell of cells) {
+      const formula = cell?.formula;
+      if (!formula) {
+        continue;
+      }
+      SHEET_REF_REGEX.lastIndex = 0;
+      let match;
+      while ((match = SHEET_REF_REGEX.exec(formula)) !== null) {
+        const raw = match[1] ?? match[2];
+        if (!raw) {
+          continue;
+        }
+        referenced.add(raw.replace(/''/g, "'"));
+      }
+    }
+  }
+  return referenced;
+}
+function hasUnresolvedSheetReferences(workbook) {
+  let names;
+  try {
+    names = workbook.sheetNames;
+  } catch {
+    return false;
+  }
+  const known = new Set(names);
+  const referenced = collectReferencedSheetNames(workbook);
+  for (const name of referenced) {
+    if (!known.has(name)) {
+      return true;
+    }
+  }
+  return false;
+}
+function safeCalculate(workbook, options = {}) {
+  if (hasUnresolvedSheetReferences(workbook)) {
+    return { workbook, calculated: false, skipReason: "unresolved-sheet-refs" };
+  }
+  try {
+    workbook.calculate();
+    return { workbook, calculated: true, skipReason: null };
+  } catch (err) {
+    console.warn("[react-xlsx] workbook.calculate() trapped; falling back to cached formula values", err);
+    if (options.reparse) {
+      try {
+        return { workbook: options.reparse(), calculated: false, skipReason: "calculate-trapped" };
+      } catch (reparseErr) {
+        console.warn("[react-xlsx] workbook reparse after calculate trap failed", reparseErr);
+      }
+    }
+    return { workbook, calculated: false, skipReason: "calculate-trapped" };
+  }
+}
+function tryRecalculate(workbook) {
+  try {
+    workbook.calculate();
+    return { calculated: true, error: null };
+  } catch (err) {
+    console.warn("[react-xlsx] workbook.calculate() trapped during recalculation", err);
+    return { calculated: false, error: err };
+  }
+}
+
 // src/wasm.ts
 var wasmModulePromise = null;
 function getSheetsWasmModule() {
@@ -7068,18 +7146,21 @@ async function resolveWorkbookBuffer({ file, src }, signal) {
 }
 async function parseWorkbookBuffer(buffer) {
   const wasmModule = await getSheetsWasmModule();
-  const workbook = wasmModule.Workbook.fromBytes(new Uint8Array(buffer));
+  const initialWorkbook = wasmModule.Workbook.fromBytes(new Uint8Array(buffer));
   let totalFormulas = 0;
-  for (let index = 0; index < workbook.sheetCount; index += 1) {
-    totalFormulas += workbook.getSheet(index).formulaCount;
+  for (let index = 0; index < initialWorkbook.sheetCount; index += 1) {
+    totalFormulas += initialWorkbook.getSheet(index).formulaCount;
   }
   const shouldAutoCalculate = totalFormulas <= FORMULA_COUNT_THRESHOLD;
-  if (shouldAutoCalculate) {
-    workbook.calculate();
+  if (!shouldAutoCalculate) {
+    return { shouldAutoCalculate, workbook: initialWorkbook };
   }
+  const result = safeCalculate(initialWorkbook, {
+    reparse: () => wasmModule.Workbook.fromBytes(new Uint8Array(buffer))
+  });
   return {
-    shouldAutoCalculate,
-    workbook
+    shouldAutoCalculate: result.calculated,
+    workbook: result.workbook
   };
 }
 function scheduleLowPriorityTask(task) {
@@ -8320,7 +8401,10 @@ function useXlsxViewerController(options) {
     if (!shouldAutoCalculate) {
       return;
     }
-    targetWorkbook.calculate();
+    const result = tryRecalculate(targetWorkbook);
+    if (!result.calculated) {
+      setShouldAutoCalculate(false);
+    }
   }, [shouldAutoCalculate]);
   const getActiveWorksheet = React.useCallback(() => {
     if (!workbook || !activeSheet) {
@@ -8957,8 +9041,12 @@ function useXlsxViewerController(options) {
     if (!workbook) {
       return;
     }
-    workbook.calculate();
-    refreshWorkbookState(workbook);
+    const result = tryRecalculate(workbook);
+    if (result.calculated) {
+      refreshWorkbookState(workbook);
+      return;
+    }
+    setShouldAutoCalculate(false);
   }, [refreshWorkbookState, workbook]);
   const resizeColumn = React.useCallback((col, widthPx) => {
     if (readOnly && !canResizeReadOnly || !workbook || !activeSheet) {
@@ -20459,6 +20547,7 @@ function GridRow({
   actualRow,
   editingCell,
   editingValue,
+  frozenRowHeaderZIndex,
   getCellData,
   headerLabelLiveScale,
   leadingSpacerWidth,
@@ -20475,6 +20564,7 @@ function GridRow({
   readOnly,
   renderCellAdornment,
   rowHeight,
+  rowHeaderZIndex,
   rowHeaderWidth,
   stickyLeftByCol,
   stickyTop,
@@ -20507,7 +20597,7 @@ function GridRow({
           textAlign: "center",
           userSelect: "none",
           width: rowHeaderWidth,
-          zIndex: stickyTop !== void 0 ? 45 : 35
+          zIndex: stickyTop !== void 0 ? frozenRowHeaderZIndex : rowHeaderZIndex
         },
         children: /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ jsx3(
@@ -20866,7 +20956,7 @@ function XlsxGrid({
   renderImageSelection,
   renderTableHeaderMenu,
   enableGestureZoom = true,
-  experimentalCanvas = false,
+  experimentalCanvas = true,
   selectionColor,
   selectionFillColor,
   selectionHeaderColor,
@@ -22306,16 +22396,16 @@ function XlsxGrid({
   }, []);
   const resolvePointerCellFromClient = React4.useCallback((clientX, clientY) => {
     const geometryCell = resolvePointerCellFromGeometry(clientX, clientY);
-    if (geometryCell && !worksheet?.isMergedSecondary(geometryCell.row, geometryCell.col)) {
-      return resolveMergeAnchorCell(geometryCell);
+    if (geometryCell) {
+      return geometryCell;
     }
-    const resolvedCell = resolvePointerCellFromHitTest(clientX, clientY) ?? geometryCell;
+    const resolvedCell = resolvePointerCellFromHitTest(clientX, clientY);
     return resolvedCell ? resolveMergeAnchorCell(resolvedCell) : null;
-  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, worksheet]);
+  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest]);
   const resolveDraggedSelectionCell = React4.useCallback((dragState, clientX, clientY) => {
     const geometryCell = resolvePointerCellFromGeometry(clientX, clientY);
     const hitCell = resolvePointerCellFromHitTest(clientX, clientY);
-    const actualRow = hitCell && rowIndexByActual.has(hitCell.row) ? hitCell.row : geometryCell?.row;
+    const actualRow = geometryCell?.row ?? (hitCell && rowIndexByActual.has(hitCell.row) ? hitCell.row : void 0);
     const actualCol = geometryCell?.col ?? hitCell?.col;
     if (actualRow === void 0 || actualCol === void 0) {
       return null;
@@ -22326,8 +22416,8 @@ function XlsxGrid({
     if (dragState.axis === "column") {
       return { row: dragState.originCell.row, col: actualCol };
     }
-    return resolveMergeAnchorCell({ row: actualRow, col: actualCol });
-  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, rowIndexByActual]);
+    return { row: actualRow, col: actualCol };
+  }, [resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, rowIndexByActual]);
   const resolveCellPointerOrigin = React4.useCallback((cell, rect, clientX, clientY) => {
     const rowIndex = rowIndexByActual.get(cell.row);
     const colIndex = colIndexByActual.get(cell.col);
@@ -22345,6 +22435,40 @@ function XlsxGrid({
       originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, displayHeight)
     };
   }, [colIndexByActual, colPrefixSums, displayDefaultColWidth, displayDefaultRowHeight, displayEffectiveColWidths, displayEffectiveRowHeights, rowIndexByActual, rowPrefixSums]);
+  const resolveCellPointerOriginFromClient = React4.useCallback((cell, clientX, clientY) => {
+    const scroller = scrollRef.current;
+    const rowIndex = rowIndexByActual.get(cell.row);
+    const colIndex = colIndexByActual.get(cell.col);
+    if (!scroller || rowIndex === void 0 || colIndex === void 0) {
+      return null;
+    }
+    const scrollerRect = cachedScrollerRectRef.current ?? scroller.getBoundingClientRect();
+    const pointerOffsetX = clientX - scrollerRect.left;
+    const pointerOffsetY = clientY - scrollerRect.top;
+    const localX = pointerOffsetX + (pointerOffsetX >= frozenPaneRight ? scroller.scrollLeft : 0);
+    const localY = pointerOffsetY + (pointerOffsetY >= frozenPaneBottom ? scroller.scrollTop : 0);
+    const displayWidth = displayEffectiveColWidths[colIndex] ?? displayDefaultColWidth;
+    const displayHeight = displayEffectiveRowHeights[rowIndex] ?? displayDefaultRowHeight;
+    return {
+      contentScaleX: 1,
+      contentScaleY: 1,
+      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset(localX - displayRowHeaderWidth - (colPrefixSums[colIndex] ?? 0), displayWidth),
+      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset(localY - displayHeaderHeight - (rowPrefixSums[rowIndex] ?? 0), displayHeight)
+    };
+  }, [
+    colIndexByActual,
+    colPrefixSums,
+    displayDefaultColWidth,
+    displayDefaultRowHeight,
+    displayEffectiveColWidths,
+    displayEffectiveRowHeights,
+    displayHeaderHeight,
+    displayRowHeaderWidth,
+    frozenPaneBottom,
+    frozenPaneRight,
+    rowIndexByActual,
+    rowPrefixSums
+  ]);
   const resolveRowPointerOrigin = React4.useCallback((actualRow, rect, clientY) => {
     const rowIndex = rowIndexByActual.get(actualRow);
     if (rowIndex === void 0) {
@@ -23093,10 +23217,11 @@ function XlsxGrid({
   }, [resolveMountedCellOverlayRect]);
   const resolveGeometryOverlayRect = React4.useCallback((range) => {
     const normalized = normalizeRange2(range);
-    const startCell = resolveMergeAnchorCell(normalized.start);
     const isSingleCellSelection = normalized.start.row === normalized.end.row && normalized.start.col === normalized.end.col;
-    const merge = isSingleCellSelection ? worksheet?.getMergeSpan(startCell.row, startCell.col) : null;
-    const endCell = isSingleCellSelection ? {
+    const isMergedSecondarySelection = isSingleCellSelection ? worksheet?.isMergedSecondary(normalized.start.row, normalized.start.col) === true : false;
+    const startCell = isSingleCellSelection && !isMergedSecondarySelection ? resolveMergeAnchorCell(normalized.start) : normalized.start;
+    const merge = isSingleCellSelection && !isMergedSecondarySelection ? worksheet?.getMergeSpan(startCell.row, startCell.col) : null;
+    const endCell = isSingleCellSelection && !isMergedSecondarySelection ? {
       row: startCell.row + Math.max(1, merge?.rowSpan ?? 1) - 1,
       col: startCell.col + Math.max(1, merge?.colSpan ?? 1) - 1
     } : normalized.end;
@@ -23728,13 +23853,14 @@ function XlsxGrid({
     }
     event.preventDefault();
     focusGrid();
+    const targetCell = event.currentTarget.colSpan > 1 || event.currentTarget.rowSpan > 1 ? resolvePointerCellFromGeometry(event.clientX, event.clientY) ?? cell : cell;
     const currentSelection = selectionRef.current;
-    const anchor = event.shiftKey && currentSelection ? currentSelection.start : cell;
-    const initialRange = normalizeRange2({ start: anchor, end: cell });
-    const isActive = isSameCell(activeCellRef.current, cell);
+    const anchor = event.shiftKey && currentSelection ? currentSelection.start : targetCell;
+    const initialRange = normalizeRange2({ start: anchor, end: targetCell });
+    const isActive = isSameCell(activeCellRef.current, targetCell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
-    const pointerOrigin = resolveCellPointerOrigin(cell, event.currentTarget.getBoundingClientRect(), event.clientX, event.clientY);
-    const originOverlayRect = resolveMountedCellOverlayRect(event.currentTarget);
+    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) {
       return;
     }
@@ -23742,7 +23868,7 @@ function XlsxGrid({
       event.pointerId,
       anchor,
       "cell",
-      cell,
+      targetCell,
       pointerOrigin,
       originOverlayRect,
       committedOnPointerDown,
@@ -23750,11 +23876,25 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
-    applyPreviewOverlayFromElement(event.currentTarget, initialRange);
+    if (targetCell.row === cell.row && targetCell.col === cell.col) {
+      applyPreviewOverlayFromElement(event.currentTarget, initialRange);
+    } else {
+      applyPreviewOverlay(initialRange);
+    }
     if (committedOnPointerDown) {
       commitSelectionRange(initialRange);
     }
-  }, [applyPreviewOverlayFromElement, commitSelectionRange, focusGrid, resolveCellPointerOrigin, resolveMountedCellOverlayRect]);
+  }, [
+    applyPreviewOverlay,
+    applyPreviewOverlayFromElement,
+    commitSelectionRange,
+    focusGrid,
+    resolveCellPointerOrigin,
+    resolveCellPointerOriginFromClient,
+    resolveMountedCellOverlayRect,
+    resolveOverlayRect,
+    resolvePointerCellFromGeometry
+  ]);
   const handleRowPointerDown = React4.useCallback((event, actualRow) => {
     if (event.button !== 0 || firstVisibleCol === void 0 || lastVisibleCol === void 0) {
       return;
@@ -24971,7 +25111,7 @@ function XlsxGrid({
         paneContext.textBaseline = "middle";
         paneContext.fillText(`${row.actualRow + 1}`, rowHeaderWidth / 2, row.localTop + row.height / 2);
       }
-      cornerContext.fillStyle = palette.rowHeaderSurface;
+      cornerContext.fillStyle = palette.headerSurface;
       cornerContext.fillRect(0, 0, rowHeaderWidth, headerHeight);
       cornerContext.strokeStyle = palette.border;
       cornerContext.lineWidth = 1;
@@ -25254,7 +25394,18 @@ function XlsxGrid({
   const canvasSelectionTransition = shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1), width 120ms cubic-bezier(0.22, 1, 0.36, 1), height 120ms cubic-bezier(0.22, 1, 0.36, 1), opacity 100ms linear" : "none";
   const rowColSpan = renderedCols.length + 1 + (leadingColumnSpacerWidth > 0 ? 1 : 0) + (trailingColumnSpacerWidth > 0 ? 1 : 0);
   const gutterSeparatorShadow = `inset -1px 0 0 ${palette.border}, inset 0 -1px 0 ${palette.border}`;
-  const canvasHeaderOverlayZIndex = 1e5;
+  const maxDrawingOverlayZIndex = Math.max(
+    0,
+    ...shapes.map((shape) => shape.zIndex + 20),
+    ...formControls.map((control) => control.zIndex + 20),
+    ...images.map((image) => image.zIndex + 22),
+    ...charts.map((chart) => chart.zIndex + 22)
+  );
+  const rowHeaderOverlayZIndex = Math.max(35, maxDrawingOverlayZIndex + 1);
+  const canvasHeaderOverlayZIndex = Math.max(50, rowHeaderOverlayZIndex + 1);
+  const stickyHeaderOverlayZIndex = canvasHeaderOverlayZIndex + 1;
+  const cornerHeaderOverlayZIndex = canvasHeaderOverlayZIndex + 2;
+  const frozenRowHeaderOverlayZIndex = rowHeaderOverlayZIndex;
   const headerCellStyle = scaleCssProperties({
     backgroundColor: palette.headerSurface,
     borderBottom: "none",
@@ -25271,7 +25422,7 @@ function XlsxGrid({
     top: 0,
     userSelect: "none",
     whiteSpace: "nowrap",
-    zIndex: 50
+    zIndex: canvasHeaderOverlayZIndex
   }, zoomFactor);
   const columnResizeHandleStyle = scaleCssProperties({
     backgroundColor: "transparent",
@@ -25360,7 +25511,7 @@ function XlsxGrid({
     display: topFrozenHeaderCanvasWidth > 0 && drawingViewport.height > 0 ? "block" : "none",
     left: displayRowHeaderWidth,
     top: 0,
-    zIndex: canvasHeaderOverlayZIndex + 1
+    zIndex: stickyHeaderOverlayZIndex
   };
   const canvasTopScrollHeaderStyle = {
     ...canvasHeaderBaseStyle,
@@ -25374,7 +25525,7 @@ function XlsxGrid({
     display: leftFrozenHeaderCanvasHeight > 0 && drawingViewport.width > 0 ? "block" : "none",
     left: 0,
     top: displayHeaderHeight,
-    zIndex: canvasHeaderOverlayZIndex + 1
+    zIndex: stickyHeaderOverlayZIndex
   };
   const canvasLeftScrollHeaderStyle = {
     ...canvasHeaderBaseStyle,
@@ -25390,7 +25541,7 @@ function XlsxGrid({
     position: "absolute",
     top: 0,
     transformOrigin: "0 0",
-    zIndex: canvasHeaderOverlayZIndex + 1
+    zIndex: cornerHeaderOverlayZIndex
   };
   const editingOverlayRect = experimentalCanvas && editingCell ? resolveCellDisplayRect(editingCell) : null;
   const activeCellAdornment = experimentalCanvas && activeCell ? renderCellAdornment(activeCell) : null;
@@ -26724,7 +26875,7 @@ function XlsxGrid({
                         )),
                         trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ jsx3("col", { style: { width: trailingColumnSpacerWidth } }) : null
                       ] }),
-                      /* @__PURE__ */ jsx3("thead", { style: { position: "sticky", top: 0, zIndex: 50 }, children: /* @__PURE__ */ jsxs3("tr", { children: [
+                      /* @__PURE__ */ jsx3("thead", { style: { position: "sticky", top: 0, zIndex: canvasHeaderOverlayZIndex }, children: /* @__PURE__ */ jsxs3("tr", { children: [
                         /* @__PURE__ */ jsx3(
                           "th",
                           {
@@ -26733,7 +26884,7 @@ function XlsxGrid({
                               backgroundColor: palette.headerSurface,
                               left: 0,
                               width: displayRowHeaderWidth,
-                              zIndex: 60
+                              zIndex: cornerHeaderOverlayZIndex
                             }
                           }
                         ),
@@ -26747,7 +26898,7 @@ function XlsxGrid({
                             style: {
                               ...headerCellStyle,
                               left: stickyLeftByCol.get(column.actualCol),
-                              zIndex: stickyLeftByCol.has(column.actualCol) ? 55 : headerCellStyle.zIndex
+                              zIndex: stickyLeftByCol.has(column.actualCol) ? stickyHeaderOverlayZIndex : headerCellStyle.zIndex
                             },
                             children: /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
                               /* @__PURE__ */ jsx3(
@@ -26802,6 +26953,7 @@ function XlsxGrid({
                                 actualRow,
                                 editingCell,
                                 editingValue,
+                                frozenRowHeaderZIndex: frozenRowHeaderOverlayZIndex,
                                 getCellData,
                                 leadingSpacerWidth: leadingColumnSpacerWidth,
                                 onCellClick: handleCellClick,
@@ -26818,6 +26970,7 @@ function XlsxGrid({
                                 readOnly,
                                 renderCellAdornment,
                                 rowHeight: virtualRow.size,
+                                rowHeaderZIndex: rowHeaderOverlayZIndex,
                                 rowHeaderWidth: displayRowHeaderWidth,
                                 stickyLeftByCol,
                                 stickyTop: stickyTopByRow.get(actualRow),
@@ -26986,7 +27139,7 @@ function XlsxViewerInner({
   enableCanvasSelectionAnimation = true,
   enableGestureZoom = true,
   errorState,
-  experimentalCanvas = false,
+  experimentalCanvas = true,
   fileTooLargeState,
   height,
   isDark = false,