@extend-ai/react-xlsx 0.15.0 → 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

@@ -6801,6 +6801,204 @@ function cloneArrayBufferForTransfer(buffer) {
   return buffer.slice(0);
 }
 
+// src/zip-entry-names.ts
+var BACKSLASH_BYTE = 92;
+var FORWARD_SLASH_BYTE = 47;
+var END_OF_CENTRAL_DIRECTORY_SIGNATURE = 101010256;
+var CENTRAL_FILE_HEADER_SIGNATURE = 33639248;
+var LOCAL_FILE_HEADER_SIGNATURE = 67324752;
+var END_OF_CENTRAL_DIRECTORY_LENGTH = 22;
+var CENTRAL_FILE_HEADER_LENGTH = 46;
+var LOCAL_FILE_HEADER_LENGTH = 30;
+var MAX_ZIP_COMMENT_LENGTH = 65535;
+var ZIP16_SENTINEL = 65535;
+var ZIP32_SENTINEL = 4294967295;
+function findEndOfCentralDirectoryOffset(view) {
+  const firstPossibleOffset = Math.max(
+    0,
+    view.byteLength - END_OF_CENTRAL_DIRECTORY_LENGTH - MAX_ZIP_COMMENT_LENGTH
+  );
+  for (let offset = view.byteLength - END_OF_CENTRAL_DIRECTORY_LENGTH; offset >= firstPossibleOffset; offset -= 1) {
+    if (view.getUint32(offset, true) !== END_OF_CENTRAL_DIRECTORY_SIGNATURE) {
+      continue;
+    }
+    const commentLength = view.getUint16(offset + 20, true);
+    if (offset + END_OF_CENTRAL_DIRECTORY_LENGTH + commentLength === view.byteLength) {
+      return offset;
+    }
+  }
+  return null;
+}
+function readCentralDirectoryInfo(view) {
+  if (view.byteLength < END_OF_CENTRAL_DIRECTORY_LENGTH) {
+    return null;
+  }
+  const endOfCentralDirectoryOffset = findEndOfCentralDirectoryOffset(view);
+  if (endOfCentralDirectoryOffset === null) {
+    return null;
+  }
+  const diskNumber = view.getUint16(endOfCentralDirectoryOffset + 4, true);
+  const centralDirectoryDiskNumber = view.getUint16(endOfCentralDirectoryOffset + 6, true);
+  const entriesOnDisk = view.getUint16(endOfCentralDirectoryOffset + 8, true);
+  const entryCount = view.getUint16(endOfCentralDirectoryOffset + 10, true);
+  const centralDirectorySize = view.getUint32(endOfCentralDirectoryOffset + 12, true);
+  const centralDirectoryOffset = view.getUint32(endOfCentralDirectoryOffset + 16, true);
+  if (diskNumber !== 0 || centralDirectoryDiskNumber !== 0 || entriesOnDisk !== entryCount || entryCount === ZIP16_SENTINEL || centralDirectorySize === ZIP32_SENTINEL || centralDirectoryOffset === ZIP32_SENTINEL) {
+    return null;
+  }
+  const centralDirectoryEndOffset = centralDirectoryOffset + centralDirectorySize;
+  if (centralDirectoryOffset > endOfCentralDirectoryOffset || centralDirectoryEndOffset > endOfCentralDirectoryOffset || centralDirectoryEndOffset > view.byteLength) {
+    return null;
+  }
+  return {
+    endOffset: centralDirectoryEndOffset,
+    entryCount,
+    offset: centralDirectoryOffset
+  };
+}
+function readCentralDirectoryEntry(view, centralDirectoryEndOffset, offset) {
+  if (offset < 0 || offset + CENTRAL_FILE_HEADER_LENGTH > centralDirectoryEndOffset || offset + CENTRAL_FILE_HEADER_LENGTH > view.byteLength || view.getUint32(offset, true) !== CENTRAL_FILE_HEADER_SIGNATURE) {
+    return null;
+  }
+  const nameLength = view.getUint16(offset + 28, true);
+  const extraLength = view.getUint16(offset + 30, true);
+  const commentLength = view.getUint16(offset + 32, true);
+  const nameStart = offset + CENTRAL_FILE_HEADER_LENGTH;
+  const nameEnd = nameStart + nameLength;
+  const nextOffset = nameEnd + extraLength + commentLength;
+  if (nameEnd > centralDirectoryEndOffset || nextOffset > centralDirectoryEndOffset) {
+    return null;
+  }
+  return {
+    diskNumberStart: view.getUint16(offset + 34, true),
+    localHeaderOffset: view.getUint32(offset + 42, true),
+    nameEnd,
+    nameStart,
+    nextOffset
+  };
+}
+function entryNameUsesBackslash(bytes, entry) {
+  for (let cursor = entry.nameStart; cursor < entry.nameEnd; cursor += 1) {
+    if (bytes[cursor] === BACKSLASH_BYTE) {
+      return true;
+    }
+  }
+  return false;
+}
+function centralDirectoryUsesBackslashSeparators(bytes, view, centralDirectory) {
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry) {
+      return null;
+    }
+    if (entryNameUsesBackslash(bytes, entry)) {
+      return true;
+    }
+    offset = entry.nextOffset;
+  }
+  return false;
+}
+function normalizedEntryNameKey(bytes, entry) {
+  let key = "";
+  for (let cursor = entry.nameStart; cursor < entry.nameEnd; cursor += 1) {
+    const byte = bytes[cursor] === BACKSLASH_BYTE ? FORWARD_SLASH_BYTE : bytes[cursor];
+    key += String.fromCharCode(byte);
+  }
+  return key;
+}
+function validateEntryNamePatches(bytes, view, centralDirectory) {
+  const normalizedNames = /* @__PURE__ */ new Set();
+  const localHeaderOffsets = /* @__PURE__ */ new Set();
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry || entry.diskNumberStart !== 0 || entry.localHeaderOffset === ZIP32_SENTINEL || entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH > centralDirectory.offset || localHeaderOffsets.has(entry.localHeaderOffset)) {
+      return false;
+    }
+    localHeaderOffsets.add(entry.localHeaderOffset);
+    const normalizedName = normalizedEntryNameKey(bytes, entry);
+    if (normalizedNames.has(normalizedName)) {
+      return false;
+    }
+    normalizedNames.add(normalizedName);
+    if (!entryNameUsesBackslash(bytes, entry)) {
+      offset = entry.nextOffset;
+      continue;
+    }
+    if (view.getUint32(entry.localHeaderOffset, true) !== LOCAL_FILE_HEADER_SIGNATURE) {
+      return false;
+    }
+    const localNameLength = view.getUint16(entry.localHeaderOffset + 26, true);
+    const localNameStart = entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH;
+    const localNameEnd = localNameStart + localNameLength;
+    if (localNameLength !== entry.nameEnd - entry.nameStart || localNameEnd > centralDirectory.offset) {
+      return false;
+    }
+    for (let nameIndex = 0; nameIndex < localNameLength; nameIndex += 1) {
+      const centralNameOffset = entry.nameStart + nameIndex;
+      const localNameOffset = localNameStart + nameIndex;
+      if (bytes[centralNameOffset] !== bytes[localNameOffset]) {
+        return false;
+      }
+    }
+    offset = entry.nextOffset;
+  }
+  return true;
+}
+function patchEntryNameSeparators(bytes, view, centralDirectory) {
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry) {
+      return;
+    }
+    if (entryNameUsesBackslash(bytes, entry)) {
+      const localNameStart = entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH;
+      for (let nameIndex = 0; nameIndex < entry.nameEnd - entry.nameStart; nameIndex += 1) {
+        const centralNameOffset = entry.nameStart + nameIndex;
+        if (bytes[centralNameOffset] === BACKSLASH_BYTE) {
+          bytes[centralNameOffset] = FORWARD_SLASH_BYTE;
+          bytes[localNameStart + nameIndex] = FORWARD_SLASH_BYTE;
+        }
+      }
+    }
+    offset = entry.nextOffset;
+  }
+}
+function normalizeZipEntryNames(bytes) {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const centralDirectory = readCentralDirectoryInfo(view);
+  if (!centralDirectory || centralDirectoryUsesBackslashSeparators(bytes, view, centralDirectory) !== true) {
+    return bytes;
+  }
+  if (!validateEntryNamePatches(bytes, view, centralDirectory)) {
+    return bytes;
+  }
+  const normalizedBytes = new Uint8Array(bytes.byteLength);
+  normalizedBytes.set(bytes);
+  const normalizedView = new DataView(
+    normalizedBytes.buffer,
+    normalizedBytes.byteOffset,
+    normalizedBytes.byteLength
+  );
+  patchEntryNameSeparators(normalizedBytes, normalizedView, centralDirectory);
+  return normalizedBytes;
+}
+function normalizeWorkbookArrayBuffer(buffer) {
+  const bytes = new Uint8Array(buffer);
+  const normalizedBytes = normalizeZipEntryNames(bytes);
+  if (normalizedBytes === bytes) {
+    return buffer;
+  }
+  if (normalizedBytes.byteOffset === 0 && normalizedBytes.byteLength === normalizedBytes.buffer.byteLength && normalizedBytes.buffer instanceof ArrayBuffer) {
+    return normalizedBytes.buffer;
+  }
+  const normalizedBuffer = new ArrayBuffer(normalizedBytes.byteLength);
+  new Uint8Array(normalizedBuffer).set(normalizedBytes);
+  return normalizedBuffer;
+}
+
 // src/controller.tsx
 var FORMULA_COUNT_THRESHOLD = 1e3;
 var DEFAULT_ROW_HEIGHT = 24;
@@ -8444,6 +8642,7 @@ function useXlsxViewerController(options) {
       if (maxFileSizeBytes > 0 && buffer.byteLength > maxFileSizeBytes) {
         throw new XlsxFileSizeLimitExceededError(buffer.byteLength, maxFileSizeBytes);
       }
+      buffer = normalizeWorkbookArrayBuffer(buffer);
       const preflight = preflightWorkbookBuffer(buffer);
       if (preflight?.tooLarge) {
         throw createWorkbookTooLargeError(preflight);
@@ -17635,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;
@@ -18392,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) {
@@ -19888,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) {
@@ -20137,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();
@@ -22463,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,
@@ -27863,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(
@@ -27911,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);
@@ -28254,7 +28475,7 @@ function XlsxGrid({
     borderBottom: "none",
     borderRight: "none",
     boxShadow: gutterSeparatorShadow,
-    color: palette.mutedText,
+    color: palette.headerText,
     fontSize: "11px",
     fontWeight: 600,
     height: HEADER_HEIGHT,
@@ -30518,6 +30739,8 @@ function XlsxViewerInner({
   experimentalCanvas = true,
   fileTooLargeState,
   getCellStyle,
+  headerBackgroundColor,
+  headerTextColor,
   height,
   isDark = false,
   loadingComponent,
@@ -30538,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,
@@ -30549,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),
@@ -31020,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());
@@ -31633,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;
@@ -31720,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: