@extend-ai/react-xlsx 0.15.1 → 0.16.0

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

@@ -17834,6 +17834,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 +18652,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 +20106,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 +20358,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 +22684,7 @@ function GridRow({
           borderRight: "none",
           boxSizing: "border-box",
           boxShadow: gutterSeparatorShadow,
-          color: palette.mutedText,
+          color: palette.headerText,
           fontSize: scaleCssLengthExpression("11px", zoomFactor),
           height: rowHeight,
           left: 0,
@@ -28062,7 +28084,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 +28132,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 +28475,7 @@ function XlsxGrid({
     borderBottom: "none",
     borderRight: "none",
     boxShadow: gutterSeparatorShadow,
-    color: palette.mutedText,
+    color: palette.headerText,
     fontSize: "11px",
     fontWeight: 600,
     height: HEADER_HEIGHT,
@@ -30717,6 +30739,8 @@ function XlsxViewerInner({
   experimentalCanvas = true,
   fileTooLargeState,
   getCellStyle,
+  headerBackgroundColor,
+  headerTextColor,
   height,
   isDark = false,
   loadingComponent,
@@ -30737,7 +30761,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 +30772,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 +31243,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 +31856,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 +31943,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: