@extend-ai/react-xlsx 0.15.1 → 0.16.1

package/README.md

@@ -468,6 +468,8 @@ Common rendering props:
 - `height?: React.CSSProperties["height"]`
 - `className?: string`
 - `isDark?: boolean`
+- `headerBackgroundColor?: string`
+- `headerTextColor?: string`
 - `rounded?: boolean`
 - `showDefaultToolbar?: boolean`
 - `toolbar?: React.ReactNode | ((controller: XlsxViewerController) => React.ReactNode)`

package/dist/index.cjs

@@ -11089,6 +11089,14 @@ function useXlsxViewerController(options) {
 var React4 = __toESM(require("react"), 1);
 var import_react_virtual = require("@tanstack/react-virtual");
 
+// src/cell-text-clip.ts
+function resolveCellTextClipOverscan(overscan, usesWrappedText) {
+  return {
+    horizontal: overscan,
+    vertical: usesWrappedText ? 0 : overscan
+  };
+}
+
 // src/chart-renderer.tsx
 var import_d3_hierarchy = require("d3-hierarchy");
 var import_d3_geo = require("d3-geo");
@@ -17834,6 +17842,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
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_ROW_HEIGHT2 = 24;
@@ -18591,48 +18660,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) {
@@ -20087,8 +20114,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) {
@@ -20336,7 +20366,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();
@@ -22662,7 +22692,7 @@ function GridRow({
           borderRight: "none",
           boxSizing: "border-box",
           boxShadow: gutterSeparatorShadow,
-          color: palette.mutedText,
+          color: palette.headerText,
           fontSize: scaleCssLengthExpression("11px", zoomFactor),
           height: rowHeight,
           left: 0,
@@ -22794,6 +22824,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";
@@ -22989,7 +23029,7 @@ function GridRow({
                 },
                 children: renderCheckboxControl(cellData.checkboxState, palette, zoomFactor)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cellContentStyle, children: rotatedTextStyle ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: rotatedTextStyle, children: cellData.value }) : cellData.value })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cellContentStyle, children: rotatedTextStyle ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: rotatedTextStyle, children: cellData.value }) : wrappedTextStyle ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: wrappedTextStyle, children: cellData.value }) : cellData.value })
           ]
         },
         key
@@ -27713,14 +27753,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;
@@ -28062,7 +28106,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(
@@ -28110,7 +28154,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);
@@ -28453,7 +28497,7 @@ function XlsxGrid({
     borderBottom: "none",
     borderRight: "none",
     boxShadow: gutterSeparatorShadow,
-    color: palette.mutedText,
+    color: palette.headerText,
     fontSize: "11px",
     fontWeight: 600,
     height: HEADER_HEIGHT,
@@ -30717,6 +30761,8 @@ function XlsxViewerInner({
   experimentalCanvas = true,
   fileTooLargeState,
   getCellStyle,
+  headerBackgroundColor,
+  headerTextColor,
   height,
   isDark = false,
   loadingComponent,
@@ -30737,7 +30783,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,
@@ -30748,7 +30794,7 @@ function XlsxViewerInner({
     },
     palette
   ) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerContext.Provider, { value: controller, children: customFileTooLarge !== void 0 ? customFileTooLarge : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerAppearanceContext.Provider, { value: { headerBackgroundColor, headerTextColor, isDark }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewerContext.Provider, { value: controller, children: customFileTooLarge !== void 0 ? customFileTooLarge : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: classNames("react-xlsx-viewer", className),
@@ -31219,8 +31265,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());
@@ -31832,7 +31878,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;
@@ -31919,8 +31965,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__ */ (0, import_jsx_runtime3.jsx)(DefaultToolbar, { controller, palette });
 }
 // Annotate the CommonJS export names for ESM import in node: