@extend-ai/react-xlsx 0.12.0 → 0.12.2

package/dist/index.cjs

@@ -17179,6 +17179,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;
@@ -23678,9 +23687,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]);
@@ -23699,9 +23705,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);
@@ -23908,6 +23944,7 @@ function XlsxGrid({
   }, [
     activeSheet,
     activeSheetChartHighlights,
+    cellRenderCacheInvalidationKey,
     colIndexByActual,
     colPrefixSums,
     displayDefaultColWidth,
@@ -26411,8 +26448,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);
@@ -26452,7 +26490,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,
@@ -26472,7 +26510,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,
@@ -29901,13 +29939,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,
@@ -29930,7 +29969,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) {