@extend-ai/react-xlsx 0.15.1 → 0.16.1

package/dist/index.d.cts

@@ -1495,6 +1495,10 @@ interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
      * ```
      */
     getCellStyle?: (context: XlsxCellStyleContext) => React.CSSProperties | null | undefined;
+    /** Background color used for row-number, column-letter, and corner headers. */
+    headerBackgroundColor?: string;
+    /** Text color used for row-number and column-letter headers. */
+    headerTextColor?: string;
     /**
      * CSS height for the viewer container.
      *

package/dist/index.d.ts

@@ -1495,6 +1495,10 @@ interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
      * ```
      */
     getCellStyle?: (context: XlsxCellStyleContext) => React.CSSProperties | null | undefined;
+    /** Background color used for row-number, column-letter, and corner headers. */
+    headerBackgroundColor?: string;
+    /** Text color used for row-number and column-letter headers. */
+    headerTextColor?: string;
     /**
      * CSS height for the viewer container.
      *

package/dist/index.js

@@ -11040,6 +11040,14 @@ import {
   useVirtualizer
 } from "@tanstack/react-virtual";
 
+// src/cell-text-clip.ts
+function resolveCellTextClipOverscan(overscan, usesWrappedText) {
+  return {
+    horizontal: overscan,
+    vertical: usesWrappedText ? 0 : overscan
+  };
+}
+
 // src/chart-renderer.tsx
 import { hierarchy as d3Hierarchy, partition as d3Partition, treemap as d3Treemap, treemapBinary, treemapDice } from "d3-hierarchy";
 import { geoIdentity, geoMercator, geoNaturalEarth1, geoPath } from "d3-geo";
@@ -17800,6 +17808,67 @@ var MemoChartSvg = React3.memo(function MemoChartSvg2({
   );
 }, (prev, next) => prev.chart === next.chart && prev.onChartElementDoubleClick === next.onChartElementDoubleClick && prev.onChartElementPointerDown === next.onChartElementPointerDown && prev.palette === next.palette && prev.rect.height === next.rect.height && prev.rect.width === next.rect.width && prev.rect.left === next.rect.left && prev.rect.top === next.rect.top && prev.selectedChartElement === next.selectedChartElement);
 
+// src/viewer-palette.ts
+var LIGHT_PALETTE = {
+  border: "#e4e4e7",
+  buttonSurface: "#ffffff",
+  buttonText: "#18181b",
+  canvas: "#fafafa",
+  danger: "#dc2626",
+  headerSurface: "#f4f4f5",
+  headerText: "#71717a",
+  mutedSurface: "#f5f5f5",
+  mutedText: "#71717a",
+  rowHeaderSurface: "#f4f4f5",
+  shadow: "0 1px 2px rgba(0, 0, 0, 0.04)",
+  sheetActiveSurface: "#ffffff",
+  sheetActiveText: "#18181b",
+  sheetInactiveSurface: "#e4e4e7",
+  sheetInactiveText: "#52525b",
+  strongBorder: "#d4d4d8",
+  subtleSurface: "#fafafa",
+  surface: "#ffffff",
+  text: "#18181b",
+  toolbarSurface: "#f5f5f5"
+};
+var DARK_PALETTE = {
+  border: "rgba(255, 255, 255, 0.10)",
+  buttonSurface: "rgba(255, 255, 255, 0.06)",
+  buttonText: "#f4f4f5",
+  canvas: "#09090b",
+  danger: "#f87171",
+  headerSurface: "#18181b",
+  headerText: "#a1a1aa",
+  mutedSurface: "#111113",
+  mutedText: "#a1a1aa",
+  rowHeaderSurface: "#18181b",
+  shadow: "0 1px 2px rgba(0, 0, 0, 0.28)",
+  sheetActiveSurface: "#27272a",
+  sheetActiveText: "#fafafa",
+  sheetInactiveSurface: "#18181b",
+  sheetInactiveText: "#a1a1aa",
+  strongBorder: "rgba(255, 255, 255, 0.16)",
+  subtleSurface: "#101012",
+  surface: "#111113",
+  text: "#f4f4f5",
+  toolbarSurface: "#101012"
+};
+function isDarkViewerPalette(palette) {
+  return palette.surface === DARK_PALETTE.surface;
+}
+function resolveViewerPalette(isDark = false, headerBackgroundColor, headerTextColor) {
+  const basePalette = isDark ? DARK_PALETTE : LIGHT_PALETTE;
+  if (headerBackgroundColor === void 0 && headerTextColor === void 0) {
+    return basePalette;
+  }
+  return {
+    ...basePalette,
+    headerSurface: headerBackgroundColor ?? basePalette.headerSurface,
+    headerText: headerTextColor ?? basePalette.headerText,
+    rowHeaderSurface: headerBackgroundColor ?? basePalette.rowHeaderSurface
+  };
+}
+
 // src/XlsxViewer.tsx
 import { Fragment as Fragment4, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_ROW_HEIGHT2 = 24;
@@ -18557,48 +18626,6 @@ function resolveEventAnchor(clientX, clientY, rect) {
 function resolveTouchDistance(firstTouch, secondTouch) {
   return Math.hypot(firstTouch.clientX - secondTouch.clientX, firstTouch.clientY - secondTouch.clientY);
 }
-var LIGHT_PALETTE = {
-  border: "#e4e4e7",
-  buttonSurface: "#ffffff",
-  buttonText: "#18181b",
-  canvas: "#fafafa",
-  danger: "#dc2626",
-  headerSurface: "#f4f4f5",
-  mutedSurface: "#f5f5f5",
-  mutedText: "#71717a",
-  rowHeaderSurface: "#f4f4f5",
-  shadow: "0 1px 2px rgba(0, 0, 0, 0.04)",
-  sheetActiveSurface: "#ffffff",
-  sheetActiveText: "#18181b",
-  sheetInactiveSurface: "#e4e4e7",
-  sheetInactiveText: "#52525b",
-  strongBorder: "#d4d4d8",
-  subtleSurface: "#fafafa",
-  surface: "#ffffff",
-  text: "#18181b",
-  toolbarSurface: "#f5f5f5"
-};
-var DARK_PALETTE = {
-  border: "rgba(255, 255, 255, 0.10)",
-  buttonSurface: "rgba(255, 255, 255, 0.06)",
-  buttonText: "#f4f4f5",
-  canvas: "#09090b",
-  danger: "#f87171",
-  headerSurface: "#18181b",
-  mutedSurface: "#111113",
-  mutedText: "#a1a1aa",
-  rowHeaderSurface: "#18181b",
-  shadow: "0 1px 2px rgba(0, 0, 0, 0.28)",
-  sheetActiveSurface: "#27272a",
-  sheetActiveText: "#fafafa",
-  sheetInactiveSurface: "#18181b",
-  sheetInactiveText: "#a1a1aa",
-  strongBorder: "rgba(255, 255, 255, 0.16)",
-  subtleSurface: "#101012",
-  surface: "#111113",
-  text: "#f4f4f5",
-  toolbarSurface: "#101012"
-};
 function parseRgbColor3(color) {
   const match = /^#?([0-9a-f]{6})$/i.exec(color);
   if (!match) {
@@ -20053,8 +20080,11 @@ function resolveImageHandleStyle(position, stroke, surface, scale = 1) {
   }
   return style;
 }
-function useViewerPalette(isDark = false) {
-  return isDark ? DARK_PALETTE : LIGHT_PALETTE;
+function useViewerPalette(isDark = false, headerBackgroundColor, headerTextColor) {
+  return React4.useMemo(
+    () => resolveViewerPalette(isDark, headerBackgroundColor, headerTextColor),
+    [headerBackgroundColor, headerTextColor, isDark]
+  );
 }
 function normalizeThumbnailResolution(resolution) {
   if (typeof resolution === "number" && Number.isFinite(resolution) && resolution > 0) {
@@ -20302,7 +20332,7 @@ function mapBorder2(edge, themePalette) {
   return `${widthMap[edge.style] ?? "1px"} ${styleMap[edge.style] ?? "solid"} ${color}`;
 }
 function paletteIsDark(palette) {
-  return palette.surface === DARK_PALETTE.surface;
+  return isDarkViewerPalette(palette);
 }
 function parseHexColor3(color) {
   const normalized = color.trim().toLowerCase();
@@ -22628,7 +22658,7 @@ function GridRow({
           borderRight: "none",
           boxSizing: "border-box",
           boxShadow: gutterSeparatorShadow,
-          color: palette.mutedText,
+          color: palette.headerText,
           fontSize: scaleCssLengthExpression("11px", zoomFactor),
           height: rowHeight,
           left: 0,
@@ -22760,6 +22790,16 @@ function GridRow({
         width: "100%",
         wordBreak: "inherit"
       };
+      const usesWrappedText = cellData.style.whiteSpace === "pre-wrap" || cellData.value.includes("\n");
+      const wrappedTextStyle = usesWrappedText ? {
+        display: "block",
+        flex: "0 0 auto",
+        maxWidth: "100%",
+        minWidth: 0
+      } : null;
+      if (usesWrappedText) {
+        cellContentStyle.overflow = "clip";
+      }
       const trailingInset = (adornment ? 20 : 0) + (cellData.conditionalIcon ? 18 : 0);
       if (cellData.conditionalDataBar) {
         cellContentStyle.position = "relative";
@@ -22955,7 +22995,7 @@ function GridRow({
                 },
                 children: renderCheckboxControl(cellData.checkboxState, palette, zoomFactor)
               }
-            ) : /* @__PURE__ */ jsx3("div", { style: cellContentStyle, children: rotatedTextStyle ? /* @__PURE__ */ jsx3("span", { style: rotatedTextStyle, children: cellData.value }) : cellData.value })
+            ) : /* @__PURE__ */ jsx3("div", { style: cellContentStyle, children: rotatedTextStyle ? /* @__PURE__ */ jsx3("span", { style: rotatedTextStyle, children: cellData.value }) : wrappedTextStyle ? /* @__PURE__ */ jsx3("span", { style: wrappedTextStyle, children: cellData.value }) : cellData.value })
           ]
         },
         key
@@ -27679,14 +27719,18 @@ function XlsxGrid({
               zoomFactor * 1.5,
               activeFontSizePx * (cellData.textRotationDeg ? 0.75 : 0.18)
             );
+            const textClip = resolveCellTextClipOverscan(
+              textClipOverscan,
+              canvasCellStyle.usesWrappedText || rawText.includes("\n")
+            );
             flushPendingGridlines();
             paneContext.save();
             paneContext.beginPath();
             paneContext.rect(
-              contentLeft - textClipOverscan,
-              contentTop - textClipOverscan,
-              contentWidth + textClipOverscan * 2,
-              contentHeight + textClipOverscan * 2
+              contentLeft - textClip.horizontal,
+              contentTop - textClip.vertical,
+              contentWidth + textClip.horizontal * 2,
+              contentHeight + textClip.vertical * 2
             );
             paneContext.clip();
             paneContext.font = cellData.shrinkToFitFontSizePx ? resolveCanvasFontWithPxSize(cellStyle, cellData.shrinkToFitFontSizePx) : canvasCellStyle.baseFont;
@@ -28028,7 +28072,7 @@ function XlsxGrid({
         paneContext.lineTo(column.localLeft + column.width, column.height - 0.5);
         paneContext.stroke();
         paneContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
-        paneContext.fillStyle = palette.mutedText;
+        paneContext.fillStyle = palette.headerText;
         paneContext.textAlign = "center";
         paneContext.textBaseline = "middle";
         paneContext.fillText(
@@ -28076,7 +28120,7 @@ function XlsxGrid({
         paneContext.lineTo(rowHeaderWidth - 0.5, row.localTop + row.height);
         paneContext.stroke();
         paneContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
-        paneContext.fillStyle = palette.mutedText;
+        paneContext.fillStyle = palette.headerText;
         paneContext.textAlign = "center";
         paneContext.textBaseline = "middle";
         paneContext.fillText(`${row.actualRow + 1}`, rowHeaderWidth / 2, row.localTop + row.height / 2);
@@ -28419,7 +28463,7 @@ function XlsxGrid({
     borderBottom: "none",
     borderRight: "none",
     boxShadow: gutterSeparatorShadow,
-    color: palette.mutedText,
+    color: palette.headerText,
     fontSize: "11px",
     fontWeight: 600,
     height: HEADER_HEIGHT,
@@ -30683,6 +30727,8 @@ function XlsxViewerInner({
   experimentalCanvas = true,
   fileTooLargeState,
   getCellStyle,
+  headerBackgroundColor,
+  headerTextColor,
   height,
   isDark = false,
   loadingComponent,
@@ -30703,7 +30749,7 @@ function XlsxViewerInner({
   showDefaultToolbar = true,
   toolbar
 }) {
-  const palette = useViewerPalette(isDark);
+  const palette = useViewerPalette(isDark, headerBackgroundColor, headerTextColor);
   const { displayFileName, error } = controller;
   const customFileTooLarge = error instanceof XlsxFileSizeLimitExceededError ? renderCustomFileTooLarge(
     fileTooLargeState,
@@ -30714,7 +30760,7 @@ function XlsxViewerInner({
     },
     palette
   ) : void 0;
-  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: customFileTooLarge !== void 0 ? customFileTooLarge : /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { headerBackgroundColor, headerTextColor, isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: customFileTooLarge !== void 0 ? customFileTooLarge : /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classNames("react-xlsx-viewer", className),
@@ -31185,8 +31231,8 @@ function useXlsxViewerThumbnails(options = {}) {
     workbook,
     sheets
   } = useXlsxViewer();
-  const { isDark } = React4.useContext(ViewerAppearanceContext);
-  const palette = useViewerPalette(isDark);
+  const { headerBackgroundColor, headerTextColor, isDark } = React4.useContext(ViewerAppearanceContext);
+  const palette = useViewerPalette(isDark, headerBackgroundColor, headerTextColor);
   const includeHeaders = options.includeHeaders ?? true;
   const resolution = options.resolution;
   const thumbnailImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
@@ -31798,7 +31844,7 @@ function useXlsxViewerThumbnails(options = {}) {
           context.strokeStyle = palette.border;
           context.lineWidth = 1;
           context.font = "600 11px ui-sans-serif, system-ui, sans-serif";
-          context.fillStyle = palette.mutedText;
+          context.fillStyle = palette.headerText;
           context.textBaseline = "middle";
           for (const colItem of colAxis.items) {
             const left = rowHeaderWidth + colItem.start;
@@ -31885,8 +31931,8 @@ function XlsxViewer(props) {
 }
 function DefaultXlsxToolbar() {
   const controller = useXlsxViewer();
-  const { isDark } = React4.useContext(ViewerAppearanceContext);
-  const palette = useViewerPalette(isDark);
+  const { headerBackgroundColor, headerTextColor, isDark } = React4.useContext(ViewerAppearanceContext);
+  const palette = useViewerPalette(isDark, headerBackgroundColor, headerTextColor);
   return /* @__PURE__ */ jsx3(DefaultToolbar, { controller, palette });
 }
 export {