@extend-ai/react-xlsx 0.20.0 → 0.20.2

package/dist/index.d.cts

@@ -814,7 +814,17 @@ interface XlsxChartWall {
     lineColor?: string;
     thickness?: number;
 }
+interface XlsxChartRenderSource {
+    kind: "bar" | "line";
+    xml: string;
+    themeColors?: Record<string, string>;
+    themeOverrideXml?: string;
+    styleXml?: string;
+    colorStyleXml?: string;
+}
 interface XlsxChart {
+    /** Original chart appearance used with the current workbook values during rendering. */
+    renderSource?: XlsxChartRenderSource;
     anchor: XlsxImageAnchor;
     autoTitleDeleted?: boolean;
     axes: XlsxChartAxis[];
@@ -961,6 +971,8 @@ interface XlsxScrollerRenderProps {
     };
 }
 interface UseXlsxViewerControllerOptions {
+    /** BCP 47 locale for numeric decimal and grouping separators. Defaults to en-US. */
+    locale?: string;
     /**
      * Allows row and column resizing even while editing is disabled by `readOnly`.
      *
@@ -1073,6 +1085,7 @@ interface XlsxViewerController {
     deferredLoadFileSize: number | null;
     defineNamedRange: (name: string, range?: XlsxCellRange | null) => void;
     displayFileName: string;
+    locale: string;
     download: () => void;
     charts: XlsxChart[];
     chartsheets: XlsxChartsheet[];

package/dist/index.d.ts

@@ -814,7 +814,17 @@ interface XlsxChartWall {
     lineColor?: string;
     thickness?: number;
 }
+interface XlsxChartRenderSource {
+    kind: "bar" | "line";
+    xml: string;
+    themeColors?: Record<string, string>;
+    themeOverrideXml?: string;
+    styleXml?: string;
+    colorStyleXml?: string;
+}
 interface XlsxChart {
+    /** Original chart appearance used with the current workbook values during rendering. */
+    renderSource?: XlsxChartRenderSource;
     anchor: XlsxImageAnchor;
     autoTitleDeleted?: boolean;
     axes: XlsxChartAxis[];
@@ -961,6 +971,8 @@ interface XlsxScrollerRenderProps {
     };
 }
 interface UseXlsxViewerControllerOptions {
+    /** BCP 47 locale for numeric decimal and grouping separators. Defaults to en-US. */
+    locale?: string;
     /**
      * Allows row and column resizing even while editing is disabled by `readOnly`.
      *
@@ -1073,6 +1085,7 @@ interface XlsxViewerController {
     deferredLoadFileSize: number | null;
     defineNamedRange: (name: string, range?: XlsxCellRange | null) => void;
     displayFileName: string;
+    locale: string;
     download: () => void;
     charts: XlsxChart[];
     chartsheets: XlsxChartsheet[];

package/dist/index.js

@@ -1,10 +1,73 @@
-import "./chunk-3JTCYAUX.js";
+import "./chunk-IYGZTLDY.js";
 import {
   getBuiltinChartColor,
   getBuiltinChartSurfaceStyle,
   resolveBuiltinChartColor
 } from "./chunk-VWGKYABF.js";
 
+// src/number-locale.ts
+var separators = /* @__PURE__ */ new Map();
+function parseLocaleNumber(text, locale) {
+  if (locale === "en-US") return void 0;
+  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+  const decimal = parts.find((part) => part.type === "decimal")?.value ?? ".";
+  const group = parts.find((part) => part.type === "group")?.value ?? ",";
+  let normalized = text.trim();
+  const percent = normalized.endsWith("%");
+  if (percent) normalized = normalized.slice(0, -1).trim();
+  normalized = group.trim() === "" ? normalized.replace(/[ \u00a0\u202f]/g, "") : normalized.split(group).join("");
+  normalized = normalized.replace(decimal, ".");
+  if (!/^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/.test(normalized)) return void 0;
+  const value = Number(normalized) / (percent ? 100 : 1);
+  return Number.isFinite(value) ? value : void 0;
+}
+function localizeCellNumber(worksheet, row, col, text, locale = "en-US") {
+  if (locale === "en-US" || !text) return text;
+  const value = worksheet.getCalculatedValueAt(row, col);
+  try {
+    if (!value.is_number) return text;
+  } finally {
+    value.free();
+  }
+  const style = worksheet.getCellStyleAt(row, col);
+  const format = style?.numberFormat;
+  if (format?.isDateFormat) return text;
+  let symbols = separators.get(locale);
+  if (!symbols) {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+    symbols = {
+      decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+      group: parts.find((part) => part.type === "group")?.value ?? ","
+    };
+    if (separators.size >= 100) separators.clear();
+    separators.set(locale, symbols);
+  }
+  if (symbols.decimal === "." && symbols.group === ",") return text;
+  const protectedPositions = /* @__PURE__ */ new Set();
+  const code = format?.formatString ?? "";
+  const literalPattern = /"[^"]*"|\\.|\[[^\]]*\]/g;
+  const firstPlaceholder = code.replace(literalPattern, (token) => " ".repeat(token.length)).search(/[0#?]/);
+  const literals = [...code.matchAll(literalPattern)];
+  let suffixEnd = text.length;
+  let prefixStart = 0;
+  const protect = (token, suffix) => {
+    const literal = token.startsWith('"') ? token.slice(1, -1) : token.startsWith("\\") ? token.slice(1) : token.startsWith("[$") ? token.slice(2, -1).split("-")[0] : "";
+    if (!literal) return;
+    const offset = suffix ? text.lastIndexOf(literal, suffixEnd - literal.length) : text.indexOf(literal, prefixStart);
+    if (offset >= 0) {
+      for (let i = offset; i < offset + literal.length; i++) protectedPositions.add(i);
+      if (suffix) suffixEnd = offset;
+      else prefixStart = offset + literal.length;
+    }
+  };
+  for (const token of literals.filter((token2) => token2.index < firstPlaceholder)) protect(token[0], false);
+  for (const token of literals.filter((token2) => token2.index >= firstPlaceholder).reverse()) protect(token[0], true);
+  return text.replace(
+    /\d[\d,]*(?:\.\d*)?|\.\d+/g,
+    (number, offset) => number.replace(/[.,]/g, (separator, index) => protectedPositions.has(offset + index) ? separator : separator === "." ? symbols.decimal : symbols.group)
+  );
+}
+
 // src/spreadsheet-fonts.ts
 var fontLoadPromise;
 var SPREADSHEET_FALLBACK_FONT = "React XLSX Carlito";
@@ -1566,6 +1629,21 @@ function applyChartStyleFromXml(chart, chartPath, archive, themePalette) {
       chart.axes = [...chart.axes, seriesAxis];
     }
   }
+  const kind = chartTypeNode.localName === "lineChart" && chart.chartType === "Line" ? "line" : chartTypeNode.localName === "barChart" && chart.chartType === "ColumnClustered" ? "bar" : null;
+  const groupCount = Array.from(plotArea.children).filter((entry) => entry.localName.endsWith("Chart")).length;
+  if (kind && groupCount === 1 && !chart.is3d && !plotArea.querySelector("trendline, errBars, dropLines, hiLowLines, upDownBars, dateAx, multiLvlStrRef, pictureOptions") && getLocalChildren(chartTypeNode, "ser").length === chart.series.length) {
+    chart.renderSource = {
+      kind,
+      xml: chartXml,
+      themeColors: themePalette ? Object.fromEntries(Object.entries(THEME_COLOR_INDEX_BY_NAME).flatMap(([key, index]) => {
+        const color = themePalette.colorsByIndex[index];
+        return color ? [[key, color]] : [];
+      })) : void 0,
+      themeOverrideXml: readArchiveText(archive, relationships.get("http://schemas.openxmlformats.org/officeDocument/2006/relationships/themeOverride")) ?? void 0,
+      styleXml: readArchiveText(archive, relationships.get(CHART_STYLE_REL_TYPE)) ?? void 0,
+      colorStyleXml: readArchiveText(archive, relationships.get(CHART_COLOR_STYLE_REL_TYPE)) ?? void 0
+    };
+  }
   applyChartSeriesStyleFromXml(chart, chartTypeNode, themePalette);
   applyFallbackSeriesStyles();
   applyBuiltinChartDefaults(chart, themePalette);
@@ -6818,10 +6896,10 @@ var XlsxWorkerClient = class {
       type: "load"
     }, [workerBuffer]);
   }
-  getCellSnapshot(workbookSheetIndex, row, col) {
+  getCellSnapshot(workbookSheetIndex, row, col, locale) {
     return this.request({
       id: 0,
-      payload: { col, row, workbookSheetIndex },
+      payload: { col, row, workbookSheetIndex, locale },
       type: "getCellSnapshot"
     });
   }
@@ -6838,10 +6916,10 @@ var XlsxWorkerClient = class {
       type: "parseCharts"
     }, [workerBuffer]);
   }
-  getRowsBatch(workbookSheetIndex, startRow, rowCount) {
+  getRowsBatch(workbookSheetIndex, startRow, rowCount, locale) {
     return this.request({
       id: 0,
-      payload: { rowCount, startRow, workbookSheetIndex },
+      payload: { rowCount, startRow, workbookSheetIndex, locale },
       type: "getRowsBatch"
     });
   }
@@ -7965,7 +8043,7 @@ function cloneCellStyle(style) {
     return style;
   }
 }
-function coerceUserEnteredValue(value) {
+function coerceUserEnteredValue(value, locale = "en-US") {
   const trimmed = value.trim();
   if (!trimmed) {
     return "";
@@ -7976,6 +8054,8 @@ function coerceUserEnteredValue(value) {
   if (/^(true|false)$/i.test(trimmed)) {
     return trimmed.toLowerCase() === "true";
   }
+  const localizedNumber = parseLocaleNumber(trimmed, locale);
+  if (localizedNumber !== void 0) return localizedNumber;
   if (/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(trimmed)) {
     const parsed = Number(trimmed);
     if (Number.isFinite(parsed)) {
@@ -8395,6 +8475,7 @@ function useXlsxViewerController(options) {
     deferLoadingAboveBytes = DEFAULT_DEFER_LOADING_ABOVE_BYTES,
     file,
     fileName,
+    locale = "en-US",
     maxFileSizeBytes = DEFAULT_MAX_FILE_SIZE_BYTES,
     readOnly: requestedReadOnly = false,
     readOnlyAboveBytes = 0,
@@ -9209,14 +9290,14 @@ function useXlsxViewerController(options) {
         formula: ""
       });
     }
-    return getWorkerClient().getCellSnapshot(workbookSheetIndex, row, col);
-  }, [getWorkerClient, isWorkerBacked]);
+    return getWorkerClient().getCellSnapshot(workbookSheetIndex, row, col, locale);
+  }, [getWorkerClient, isWorkerBacked, locale]);
   const getRowsBatchAsync = React.useCallback((workbookSheetIndex, startRow, rowCount) => {
     if (!isWorkerBacked) {
       return Promise.resolve(null);
     }
-    return getWorkerClient().getRowsBatch(workbookSheetIndex, startRow, rowCount);
-  }, [getWorkerClient, isWorkerBacked]);
+    return getWorkerClient().getRowsBatch(workbookSheetIndex, startRow, rowCount, locale);
+  }, [getWorkerClient, isWorkerBacked, locale]);
   const visibleSheetIndexByWorkbookSheetIndex = React.useMemo(
     () => new Map(sheets.map((sheet, index) => [sheet.workbookSheetIndex, index])),
     [sheets]
@@ -9429,7 +9510,7 @@ function useXlsxViewerController(options) {
   }, [activeSheet?.showGridLines, activeSheet?.workbookSheetIndex]);
   const getCellDisplayValue2 = React.useCallback((cell) => {
     if (cell && activeSheet) {
-      const workerSnapshot = workerCellSnapshotCacheRef.current.get(`${activeSheet.workbookSheetIndex}:${cell.row}:${cell.col}`);
+      const workerSnapshot = workerCellSnapshotCacheRef.current.get(`${locale}:${activeSheet.workbookSheetIndex}:${cell.row}:${cell.col}`);
       if (workerSnapshot) {
         return workerSnapshot.displayValue;
       }
@@ -9442,7 +9523,7 @@ function useXlsxViewerController(options) {
     const cachedFormulaValue = formula ? activeSheet?.cachedFormulaValues?.[cellAddressToA1(cell)] : void 0;
     const formatted = worksheet.getFormattedValueAt(cell.row, cell.col);
     if (formatted && !(formula && cachedFormulaValue !== void 0 && formatted.startsWith("#"))) {
-      return decodeHtmlEntities(formatted);
+      return localizeCellNumber(worksheet, cell.row, cell.col, decodeHtmlEntities(formatted), locale);
     }
     const calculated = worksheet.getCalculatedValueAt(cell.row, cell.col);
     if (formula && cachedFormulaValue !== void 0 && calculated.is_error) {
@@ -9455,10 +9536,10 @@ function useXlsxViewerController(options) {
       return "";
     }
     return calculated.toString();
-  }, [activeSheet, getActiveWorksheet]);
+  }, [activeSheet, getActiveWorksheet, locale]);
   const getCellFormula = React.useCallback((cell) => {
     if (cell && activeSheet) {
-      const workerSnapshot = workerCellSnapshotCacheRef.current.get(`${activeSheet.workbookSheetIndex}:${cell.row}:${cell.col}`);
+      const workerSnapshot = workerCellSnapshotCacheRef.current.get(`${locale}:${activeSheet.workbookSheetIndex}:${cell.row}:${cell.col}`);
       if (workerSnapshot) {
         return workerSnapshot.formula;
       }
@@ -9468,7 +9549,7 @@ function useXlsxViewerController(options) {
       return "";
     }
     return worksheet.getFormulaAt(cell.row, cell.col) ?? "";
-  }, [activeSheet, getActiveWorksheet]);
+  }, [activeSheet, getActiveWorksheet, locale]);
   const getClipboardData = React.useCallback(() => {
     const worksheet = getActiveWorksheet();
     const targetRange = selection ?? (activeCell ? { start: activeCell, end: activeCell } : null);
@@ -9588,7 +9669,7 @@ function useXlsxViewerController(options) {
     if (!isWorkerBacked || !deferredMetadataSheet || !deferredMetadataCell) {
       return;
     }
-    const cacheKey = `${deferredMetadataSheet.workbookSheetIndex}:${deferredMetadataCell.row}:${deferredMetadataCell.col}`;
+    const cacheKey = `${locale}:${deferredMetadataSheet.workbookSheetIndex}:${deferredMetadataCell.row}:${deferredMetadataCell.col}`;
     if (workerCellSnapshotCacheRef.current.has(cacheKey)) {
       return;
     }
@@ -9612,7 +9693,7 @@ function useXlsxViewerController(options) {
     return () => {
       isCurrent = false;
     };
-  }, [deferredMetadataCell, deferredMetadataSheet, getCellSnapshotAsync, isWorkerBacked]);
+  }, [deferredMetadataCell, deferredMetadataSheet, getCellSnapshotAsync, isWorkerBacked, locale]);
   const activeCellAddress = React.useMemo(() => activeCell ? cellAddressToA1(activeCell) : null, [activeCell]);
   const selectedRangeAddress = React.useMemo(() => selection ? rangeToA1(selection) : null, [selection]);
   const selectedValue = React.useMemo(
@@ -10361,7 +10442,11 @@ function useXlsxViewerController(options) {
     if (imageAssetsRef.current && hydratedChartAssets) {
       updateWorkbookChartDefinition(imageAssetsRef.current, hydratedChartAssets, id, patch);
     }
-    setChartsByWorkbookSheetIndex((current) => current.map((sheetCharts) => sheetCharts.map((chart) => chart.id === id ? { ...chart, ...patch } : chart)));
+    setChartsByWorkbookSheetIndex((current) => current.map((sheetCharts) => sheetCharts.map((chart) => {
+      if (chart.id !== id) return chart;
+      const appearanceUnchanged = Object.keys(patch).every((key) => key === "anchor" || key === "title");
+      return { ...chart, renderSource: appearanceUnchanged ? chart.renderSource : void 0, ...patch };
+    })));
     setRevision((current) => current + 1);
   }, [ensureChartAssetsHydrated, getChartById, readOnly, recordHistoryBeforeMutation, sheets, workbook]);
   const setChartSeriesFormula = React.useCallback((chartId, seriesIndex, formula) => {
@@ -10376,7 +10461,7 @@ function useXlsxViewerController(options) {
     if (!nextChart) {
       return false;
     }
-    updateChart(chartId, { series: nextChart.series });
+    updateChart(chartId, { series: nextChart.series, renderSource: chart.renderSource });
     const selectedSeries = nextChart.series[seriesIndex];
     if (selectedSeries) {
       setSelectedChartElement((current) => current && current.chartId === chartId && current.kind !== "chart" ? {
@@ -10469,7 +10554,8 @@ function useXlsxViewerController(options) {
     if (!before) {
       return;
     }
-    const nextValue = coerceUserEnteredValue(value);
+    if (locale !== "en-US" && value === getCellDisplayValue2(cell)) return;
+    const nextValue = coerceUserEnteredValue(value, locale);
     worksheet.setCell(cellAddressToA1(cell), nextValue);
     const after = captureCellMutationState(cell);
     if (!after) {
@@ -10478,7 +10564,7 @@ function useXlsxViewerController(options) {
     maybeRecalculateWorkbook(workbook);
     refreshWorkbookState(workbook);
     recordCellEditHistory(cell, before, after);
-  }, [captureCellMutationState, getActiveWorksheet, maybeRecalculateWorkbook, readOnly, recordCellEditHistory, refreshWorkbookState, workbook]);
+  }, [captureCellMutationState, getActiveWorksheet, getCellDisplayValue2, locale, maybeRecalculateWorkbook, readOnly, recordCellEditHistory, refreshWorkbookState, workbook]);
   const setCellFormula = React.useCallback((cell, formula) => {
     const worksheet = getActiveWorksheet();
     if (readOnly || !worksheet || !workbook) {
@@ -10819,7 +10905,7 @@ function useXlsxViewerController(options) {
             cell: nextCell
           });
         } else {
-          const nextValue = coerceUserEnteredValue(rawValue);
+          const nextValue = coerceUserEnteredValue(rawValue, locale);
           worksheet.setCell(cellAddressToA1(nextCell), nextValue);
           const after = captureCellMutationState(nextCell);
           if (!after) {
@@ -10847,7 +10933,7 @@ function useXlsxViewerController(options) {
     selectionAnchorRef.current = targetCell;
     recordRangeEditHistory(mutations, nextRange, targetCell);
     return true;
-  }, [activeCell, captureCellMutationState, getActiveWorksheet, maybeRecalculateWorkbook, readOnly, recordRangeEditHistory, refreshWorkbookState, selection, workbook]);
+  }, [activeCell, captureCellMutationState, getActiveWorksheet, locale, maybeRecalculateWorkbook, readOnly, recordRangeEditHistory, refreshWorkbookState, selection, workbook]);
   const pasteStructuredClipboardData = React.useCallback((serializedPayload) => {
     const worksheet = getActiveWorksheet();
     const targetCell = activeCell ?? selection?.start ?? null;
@@ -11120,6 +11206,7 @@ function useXlsxViewerController(options) {
       deferredLoadFileSize,
       defineNamedRange,
       displayFileName,
+      locale,
       download,
       exportCsv,
       exportXlsx,
@@ -11243,6 +11330,7 @@ function useXlsxViewerController(options) {
       deferredLoadFileSize,
       defineNamedRange,
       displayFileName,
+      locale,
       download,
       error,
       exportCsv,
@@ -13575,12 +13663,12 @@ function measureTextWidth(value, style) {
   context.font = buildCanvasFont(style);
   return measureCanvasTextWidth(context, value);
 }
-function getCellDisplayValue(worksheet, row, col, activeSheet) {
+function getCellDisplayValue(worksheet, row, col, activeSheet, locale = "en-US") {
   const formula = worksheet.getFormulaAt(row, col);
   const cachedFormulaValue = formula ? activeSheet?.cachedFormulaValues?.[cellAddressToA12({ row, col })] : void 0;
   const formatted = worksheet.getFormattedValueAt(row, col);
   if (formatted && !(formula && cachedFormulaValue !== void 0 && formatted.startsWith("#"))) {
-    return decodeHtmlEntities2(formatted);
+    return localizeCellNumber(worksheet, row, col, decodeHtmlEntities2(formatted), locale);
   }
   const cellValue = worksheet.getCalculatedValueAt(row, col);
   if (formula && cachedFormulaValue !== void 0 && cellValue.is_error) {
@@ -13630,6 +13718,7 @@ function getBatchedCellNumericValue(cell) {
   if (!cell) {
     return null;
   }
+  if (cell.numericValue !== void 0) return cell.numericValue;
   const text = cell.value.trim();
   if (text.length === 0) {
     return null;
@@ -13845,6 +13934,7 @@ function buildWorksheetBatchWindow(rows, activeSheet, startRow, endRow) {
         const formula = typeof cellEntry.formula === "string" ? cellEntry.formula : null;
         cells.set(`${row}:${col}`, {
           formula,
+          numericValue: typeof cellEntry.numericValue === "number" ? cellEntry.numericValue : cellEntry.numericValue === null ? null : void 0,
           generalAlignment: cellEntry.generalAlignment === "right" || cellEntry.generalAlignment === "center" ? cellEntry.generalAlignment : "left",
           hyperlink: normalizeBatchedHyperlink(cellEntry.hyperlink),
           isMergedSecondary: cellEntry.isMergedSecondary === true,
@@ -15730,6 +15820,7 @@ function useXlsxViewerThumbnails(options = {}) {
     getSheetFormControls,
     getSheetImages,
     getSheetShapes,
+    locale,
     workbook,
     sheets
   } = useXlsxViewer();
@@ -15751,6 +15842,11 @@ function useXlsxViewerThumbnails(options = {}) {
       isMountedRef.current = false;
     };
   }, []);
+  React4.useEffect(() => {
+    workerThumbnailRowBatchCacheRef.current.clear();
+    workerThumbnailRowBatchRequestRef.current.clear();
+    setWorkerThumbnailRowBatchVersion((version) => version + 1);
+  }, [locale]);
   React4.useEffect(() => {
     const currentSheets = new Set(sheets);
     for (const sheet of workerThumbnailRowBatchCacheRef.current.keys()) {
@@ -16099,7 +16195,7 @@ function useXlsxViewerThumbnails(options = {}) {
             col,
             sheet,
             () => worksheet ? getCellNumericValue(worksheet, row, col) : getBatchedCellNumericValue(batchedCell),
-            () => worksheet ? getCellDisplayValue(worksheet, row, col, sheet) : batchedCell?.value ?? "",
+            () => worksheet ? getCellDisplayValue(worksheet, row, col, sheet, locale) : batchedCell?.value ?? "",
             worksheet,
             workerRowBatch?.cells
           );
@@ -16136,7 +16232,7 @@ function useXlsxViewerThumbnails(options = {}) {
               showGridLines
             }),
             textRotationDeg: resolveSpreadsheetTextRotation(alignment?.rotation ?? alignment?.textRotation),
-            value: sparkline ? "" : checkboxState !== null ? "" : worksheet ? getCellDisplayValue(worksheet, row, col, sheet) : batchedCell?.value ?? ""
+            value: sparkline ? "" : checkboxState !== null ? "" : worksheet ? getCellDisplayValue(worksheet, row, col, sheet, locale) : batchedCell?.value ?? ""
           };
           nextData.canvas = buildCanvasCellStyleCache(nextData.style);
           cellRenderCache.set(cacheKey, nextData);
@@ -16408,6 +16504,7 @@ function useXlsxViewerThumbnails(options = {}) {
     sheets,
     thumbnailImageLoadVersion,
     workerThumbnailRowBatchVersion,
+    locale,
     workbook
   ]);
   const paintThumbnail = React4.useCallback(