@extend-ai/react-xlsx 0.12.0 → 0.12.2

package/dist/index.js

@@ -17145,6 +17145,15 @@ function resolveCanvasLineHeight(style, fallbackFontSize = 12) {
   }
   return fontSizePx * 1.2;
 }
+function resolveCanvasTextMiddleY(verticalAlign, contentTop, contentHeight, lineHeight) {
+  if (verticalAlign === "top") {
+    return contentTop + lineHeight / 2;
+  }
+  if (verticalAlign === "middle") {
+    return contentTop + contentHeight / 2;
+  }
+  return contentTop + contentHeight - lineHeight / 2;
+}
 function resolveCanvasWrapIndex(context, text, maxWidth) {
   if (text.length <= 1) {
     return text.length;
@@ -23644,9 +23653,6 @@ function XlsxGrid({
     };
   }, [activeSheet, asyncViewportRowBatch, getRowsBatchAsync, shouldVirtualizeRows, startBatchTransition, viewportRequest]);
   const viewportRowBatch = getRowsBatchAsync ? asyncViewportRowBatch : syncViewportRowBatch;
-  React4.useEffect(() => {
-    cellRenderCacheRef.current.clear();
-  }, [activeSheetIndex, displayColLimit, displayRowLimit, getCellStyle, palette, revision, viewportRowBatch, worksheet, zoomFactor]);
   React4.useEffect(() => {
     setAsyncViewportRowBatch(null);
   }, [activeSheetIndex, revision]);
@@ -23665,9 +23671,39 @@ function XlsxGrid({
     () => activeSheet ? chartRangeHighlights.filter((highlight) => highlight.workbookSheetIndex === activeSheet.workbookSheetIndex) : [],
     [activeSheet, chartRangeHighlights]
   );
-  React4.useEffect(() => {
+  const cellRenderCacheInvalidationKey = React4.useMemo(
+    () => [
+      activeSheetChartHighlights,
+      activeSheetIndex,
+      displayColLimit,
+      displayRowLimit,
+      getCellStyle,
+      palette,
+      revision,
+      selectedChartId,
+      viewportRowBatch,
+      worksheet,
+      zoomFactor
+    ],
+    [
+      activeSheetChartHighlights,
+      activeSheetIndex,
+      displayColLimit,
+      displayRowLimit,
+      getCellStyle,
+      palette,
+      revision,
+      selectedChartId,
+      viewportRowBatch,
+      worksheet,
+      zoomFactor
+    ]
+  );
+  const cellRenderCacheInvalidationRef = React4.useRef(null);
+  if (cellRenderCacheInvalidationRef.current !== cellRenderCacheInvalidationKey) {
     cellRenderCacheRef.current.clear();
-  }, [activeSheetChartHighlights, selectedChartId]);
+    cellRenderCacheInvalidationRef.current = cellRenderCacheInvalidationKey;
+  }
   const getCellData = React4.useCallback((row, col) => {
     const cacheKey = `${row}:${col}`;
     const cached = cellRenderCacheRef.current.get(cacheKey);
@@ -23874,6 +23910,7 @@ function XlsxGrid({
   }, [
     activeSheet,
     activeSheetChartHighlights,
+    cellRenderCacheInvalidationKey,
     colIndexByActual,
     colPrefixSums,
     displayDefaultColWidth,
@@ -26377,8 +26414,9 @@ function XlsxGrid({
               const textColor = canvasCellStyle.textColor;
               const shouldEllipsizeText = canvasCellStyle.textOverflowEllipsis;
               const shouldWrapText = canvasCellStyle.usesWrappedText || rawText.includes("\n");
+              const singleLineHeight = cellData.shrinkToFitFontSizePx ? resolveCanvasLineHeight(cellStyle, cellData.shrinkToFitFontSizePx) : resolveCanvasLineHeight(cellStyle, 12 * zoomFactor);
               if (cellData.textRotationDeg && rawText.length > 0) {
-                const textY = contentTop + contentHeight / 2;
+                const textY = resolveCanvasTextMiddleY(cellStyle.verticalAlign, contentTop, contentHeight, singleLineHeight);
                 const rotationOriginX = contentLeft + contentWidth / 2;
                 paneContext.save();
                 paneContext.translate(rotationOriginX, textY);
@@ -26418,7 +26456,7 @@ function XlsxGrid({
                 });
               } else if (spillMaxWidth != null) {
                 const text = shouldEllipsizeText ? truncateCanvasText(paneContext, rawText, maxTextWidth) : rawText;
-                const textY = contentTop + contentHeight / 2;
+                const textY = resolveCanvasTextMiddleY(cellStyle.verticalAlign, contentTop, contentHeight, singleLineHeight);
                 deferredSpillTextsByPane[pane].push({
                   align,
                   clipHeight: contentHeight + textClipOverscan * 2,
@@ -26438,7 +26476,7 @@ function XlsxGrid({
                 });
               } else {
                 const text = cellData.shrinkToFit ? rawText : shouldEllipsizeText ? truncateCanvasText(paneContext, rawText, maxTextWidth) : rawText;
-                const textY = contentTop + contentHeight / 2;
+                const textY = resolveCanvasTextMiddleY(cellStyle.verticalAlign, contentTop, contentHeight, singleLineHeight);
                 paneContext.fillText(text, textX, textY);
                 drawCanvasTextDecorations(paneContext, {
                   align,
@@ -29867,13 +29905,14 @@ function useXlsxViewerThumbnails(options = {}) {
               const align = canvasCellStyle.textAlign;
               context.textAlign = align;
               const textX = align === "right" ? contentLeft + contentWidth : align === "center" ? contentLeft + contentWidth / 2 : contentLeft;
-              const textY = contentTop + contentHeight / 2;
               const trailingInset = cellData.conditionalIcon ? 18 : 0;
               const maxTextWidth = Math.max(0, contentWidth - trailingInset);
+              const singleLineHeight = resolveCanvasLineHeight(cellData.style, 12);
               if (cellData.textRotationDeg) {
+                const alignedTextY = resolveCanvasTextMiddleY(cellData.style.verticalAlign, contentTop, contentHeight, singleLineHeight);
                 const rotationOriginX = contentLeft + contentWidth / 2;
                 context.save();
-                context.translate(rotationOriginX, textY);
+                context.translate(rotationOriginX, alignedTextY);
                 context.rotate(cellData.textRotationDeg * Math.PI / 180);
                 context.fillText(
                   rawText,
@@ -29896,7 +29935,7 @@ function useXlsxViewerThumbnails(options = {}) {
                 });
               } else {
                 const text = canvasCellStyle.textOverflowEllipsis ? truncateCanvasText(context, rawText, maxTextWidth) : rawText;
-                context.fillText(text, textX, textY);
+                context.fillText(text, textX, resolveCanvasTextMiddleY(cellData.style.verticalAlign, contentTop, contentHeight, singleLineHeight));
               }
             }
             if (cellData.conditionalIcon) {