@extend-ai/react-xlsx 0.16.6 → 0.17.0

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   XlsxViewer: () => XlsxViewer,
   XlsxViewerProvider: () => XlsxViewerProvider,
   initWasm: () => initWasm,
+  parseXlsxRange: () => parseXlsxRange,
   setWasmSource: () => setWasmSource,
   useXlsxViewer: () => useXlsxViewer,
   useXlsxViewerCharts: () => useXlsxViewerCharts,
@@ -3789,7 +3790,8 @@ function resolveWorksheetMergeMetadata(worksheet) {
     hasHorizontalMerges: false,
     hasVerticalMerges: false,
     maxHorizontalMergeEndCol: -1,
-    maxVerticalMergeEndRow: -1
+    maxVerticalMergeEndRow: -1,
+    mergedRanges: []
   };
   const mergedRegions = Array.isArray(worksheet.mergedRegions) ? worksheet.mergedRegions : [];
   for (const rawRegion of mergedRegions) {
@@ -3820,6 +3822,7 @@ function resolveWorksheetMergeMetadata(worksheet) {
     if (!range) {
       continue;
     }
+    mergeMetadata.mergedRanges.push(range);
     if (range.end.col > range.start.col) {
       mergeMetadata.hasHorizontalMerges = true;
       mergeMetadata.maxHorizontalMergeEndCol = Math.max(mergeMetadata.maxHorizontalMergeEndCol, range.end.col);
@@ -6723,6 +6726,102 @@ function tryRecalculate(workbook) {
   }
 }
 
+// src/range-reference.ts
+var XLSX_MAX_ROWS = 1048576;
+var XLSX_MAX_COLUMNS = 16384;
+function parseColumn(value) {
+  let column = 0;
+  for (const character of value.toUpperCase()) {
+    column = column * 26 + character.charCodeAt(0) - 64;
+  }
+  return column > 0 && column <= XLSX_MAX_COLUMNS ? column - 1 : null;
+}
+function parseRow(value) {
+  const row = Number(value);
+  return row > 0 && row <= XLSX_MAX_ROWS ? row - 1 : null;
+}
+function parseCell(value) {
+  const match = /^\$?([a-z]{1,3})\$?([1-9]\d{0,6})$/i.exec(value);
+  if (!match) {
+    return null;
+  }
+  const col = parseColumn(match[1]);
+  const row = parseRow(match[2]);
+  return col === null || row === null ? null : { col, row };
+}
+function parseXlsxRange(reference) {
+  if (typeof reference !== "string") {
+    return null;
+  }
+  let address = reference.trim().replace(/^=\s*/, "");
+  let sheetName = null;
+  if (address.startsWith("'")) {
+    const match = /^'((?:[^']|'')+)'!(.+)$/.exec(address);
+    if (!match) {
+      return null;
+    }
+    sheetName = match[1].replace(/''/g, "'");
+    address = match[2];
+  } else if (address.includes("!")) {
+    const match = /^([^\s'!\[\]:*?/\\+,;(){}=<>"&^%\-]+)!(.+)$/.exec(address);
+    if (!match) {
+      return null;
+    }
+    sheetName = match[1];
+    address = match[2];
+  }
+  if (sheetName !== null && (sheetName.length > 31 || /[\[\]:*?/\\\u0000-\u001f]/.test(sheetName) || sheetName.startsWith("'") || sheetName.endsWith("'"))) {
+    return null;
+  }
+  const parts = address.split(":");
+  if (parts.length > 2) {
+    return null;
+  }
+  const start = parseCell(parts[0]);
+  const end = parseCell(parts[1] ?? parts[0]);
+  if (start && end) {
+    return {
+      kind: "cells",
+      range: {
+        start: { col: Math.min(start.col, end.col), row: Math.min(start.row, end.row) },
+        end: { col: Math.max(start.col, end.col), row: Math.max(start.row, end.row) }
+      },
+      sheetName
+    };
+  }
+  const columns = /^\$?([a-z]{1,3}):\$?([a-z]{1,3})$/i.exec(address);
+  if (columns) {
+    const first = parseColumn(columns[1]);
+    const last = parseColumn(columns[2]);
+    if (first !== null && last !== null) {
+      return {
+        kind: "columns",
+        range: {
+          start: { col: Math.min(first, last), row: 0 },
+          end: { col: Math.max(first, last), row: XLSX_MAX_ROWS - 1 }
+        },
+        sheetName
+      };
+    }
+  }
+  const rows = /^\$?([1-9]\d{0,6}):\$?([1-9]\d{0,6})$/.exec(address);
+  if (rows) {
+    const first = parseRow(rows[1]);
+    const last = parseRow(rows[2]);
+    if (first !== null && last !== null) {
+      return {
+        kind: "rows",
+        range: {
+          start: { col: 0, row: Math.min(first, last) },
+          end: { col: XLSX_MAX_COLUMNS - 1, row: Math.max(first, last) }
+        },
+        sheetName
+      };
+    }
+  }
+  return null;
+}
+
 // src/wasm.ts
 var wasmModulePromise = null;
 var hasConfiguredWasmSource = false;
@@ -7345,6 +7444,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
         hasVerticalMerges: mergeMetadata.hasVerticalMerges,
         maxHorizontalMergeEndCol: mergeMetadata.maxHorizontalMergeEndCol,
         maxVerticalMergeEndRow: mergeMetadata.maxVerticalMergeEndRow,
+        mergedRanges: mergeMetadata.mergedRanges,
         hiddenCols: [],
         hiddenRows: [],
         minUsedCol: -1,
@@ -7432,6 +7532,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
       hasVerticalMerges: mergeMetadata.hasVerticalMerges,
       maxHorizontalMergeEndCol: mergeMetadata.maxHorizontalMergeEndCol,
       maxVerticalMergeEndRow: mergeMetadata.maxVerticalMergeEndRow,
+      mergedRanges: mergeMetadata.mergedRanges,
       hiddenCols: resolveWorksheetHiddenCols(worksheet, maxCol),
       hiddenRows: resolveWorksheetHiddenRows(worksheet, maxRow),
       minUsedCol: minCol,
@@ -8433,6 +8534,7 @@ function useXlsxViewerController(options) {
   const [zoomScaleOverridesByTabId, setZoomScaleOverridesByTabId] = React.useState({});
   const [activeCell, setActiveCell] = React.useState(null);
   const [selection, setSelection] = React.useState(null);
+  const [highlightedRanges, setHighlightedRanges] = React.useState([]);
   const [selectedChartId, setSelectedChartId] = React.useState(null);
   const [selectedChartElement, setSelectedChartElement] = React.useState(null);
   const [selectedImageId, setSelectedImageId] = React.useState(null);
@@ -8718,6 +8820,7 @@ function useXlsxViewerController(options) {
       setActiveTabIndexState(0);
       setActiveCell(null);
       setSelection(null);
+      setHighlightedRanges([]);
       setSelectedChartId(null);
       setSelectedChartElement(null);
       setSelectedImageId(null);
@@ -8747,6 +8850,7 @@ function useXlsxViewerController(options) {
     setActiveTabIndexState(0);
     setActiveCell(null);
     setSelection(null);
+    setHighlightedRanges([]);
     setSelectedChartId(null);
     setSelectedChartElement(null);
     setSelectedImageId(null);
@@ -8938,6 +9042,41 @@ function useXlsxViewerController(options) {
       return index;
     });
   }, [tabs]);
+  const highlightRanges = React.useCallback((references, options2 = {}) => {
+    const inputs = typeof references === "string" ? [references] : references;
+    if (!Array.isArray(inputs) || isLoading || error) {
+      return false;
+    }
+    const nextHighlights = [];
+    let firstSheetIndex = activeSheetIndex;
+    for (const reference of inputs) {
+      const parsed = parseXlsxRange(reference);
+      if (!parsed) {
+        return false;
+      }
+      const requestedSheetName = parsed.sheetName?.toLowerCase();
+      const sheetIndex = requestedSheetName === void 0 ? options2.sheetIndex ?? activeSheetIndex : sheets.findIndex((sheet2) => sheet2.name.toLowerCase() === requestedSheetName);
+      const sheet = Number.isInteger(sheetIndex) ? sheets[sheetIndex] : void 0;
+      if (!sheet) {
+        return false;
+      }
+      if (nextHighlights.length === 0) {
+        firstSheetIndex = sheetIndex;
+      }
+      nextHighlights.push({
+        ...parsed,
+        autoScroll: nextHighlights.length === 0 && (options2.autoScroll ?? true),
+        sheetName: sheet.name,
+        workbookSheetIndex: sheet.workbookSheetIndex
+      });
+    }
+    setHighlightedRanges(nextHighlights);
+    if (nextHighlights[0]?.autoScroll) {
+      setActiveSheetIndex(firstSheetIndex);
+    }
+    return true;
+  }, [activeSheetIndex, error, isLoading, setActiveSheetIndex, sheets]);
+  const clearHighlightedRanges = React.useCallback(() => setHighlightedRanges([]), []);
   const setZoomScale = React.useCallback((nextZoomScale) => {
     const normalizedZoomScale = clampZoomScale(nextZoomScale);
     setZoomScaleOverridesByTabId((current) => {
@@ -10996,6 +11135,9 @@ function useXlsxViewerController(options) {
       clearSelectedCells,
       clearSelectedImage,
       clearSelection,
+      clearHighlightedRanges,
+      highlightRanges,
+      highlightedRanges,
       continueDeferredLoad,
       copySelectionToClipboard,
       defaultZoomScale,
@@ -11116,6 +11258,9 @@ function useXlsxViewerController(options) {
       clearSelectedCells,
       clearSelectedImage,
       continueDeferredLoad,
+      clearHighlightedRanges,
+      highlightRanges,
+      highlightedRanges,
       copySelectionToClipboard,
       defaultZoomScale,
       deferredLoadFileSize,
@@ -11799,6 +11944,62 @@ function growScrollDisplayLimit(current, growth, maximum, readOnly) {
   return readOnly ? Math.max(current, Math.min(maximum, nextLimit)) : nextLimit;
 }
 
+// src/range-highlight.ts
+function expandHighlightedRange(range, mergedRanges) {
+  const expanded = { start: { ...range.start }, end: { ...range.end } };
+  let changed;
+  do {
+    changed = false;
+    for (const merged of mergedRanges) {
+      if (merged.end.row < expanded.start.row || merged.start.row > expanded.end.row || merged.end.col < expanded.start.col || merged.start.col > expanded.end.col) {
+        continue;
+      }
+      const startRow = Math.min(expanded.start.row, merged.start.row);
+      const startCol = Math.min(expanded.start.col, merged.start.col);
+      const endRow = Math.max(expanded.end.row, merged.end.row);
+      const endCol = Math.max(expanded.end.col, merged.end.col);
+      if (startRow !== expanded.start.row || startCol !== expanded.start.col || endRow !== expanded.end.row || endCol !== expanded.end.col) {
+        expanded.start = { row: startRow, col: startCol };
+        expanded.end = { row: endRow, col: endCol };
+        changed = true;
+      }
+    }
+  } while (changed);
+  return expanded;
+}
+function lowerBound(indices, value) {
+  let low = 0;
+  let high = indices.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (indices[middle] < value) {
+      low = middle + 1;
+    } else {
+      high = middle;
+    }
+  }
+  return low;
+}
+function getHighlightAxisExtent(indices, prefixSums, start, end) {
+  const first = lowerBound(indices, start);
+  const afterLast = lowerBound(indices, end + 1);
+  if (first >= afterLast) {
+    return null;
+  }
+  return { start: prefixSums[first] ?? 0, end: prefixSums[afterLast] ?? 0 };
+}
+function getHighlightScrollOffset(start, end, frozenExtent, viewportExtent, currentOffset) {
+  if (end <= frozenExtent || viewportExtent <= frozenExtent) {
+    return currentOffset;
+  }
+  const scrollableStart = Math.max(start, frozenExtent);
+  const availableExtent = viewportExtent - frozenExtent;
+  if (scrollableStart < currentOffset + frozenExtent || end - scrollableStart > availableExtent) {
+    return Math.max(0, scrollableStart - frozenExtent);
+  }
+  return end > currentOffset + viewportExtent ? end - viewportExtent : currentOffset;
+}
+
 // src/chart-renderer.tsx
 var import_d3_hierarchy = require("d3-hierarchy");
 var import_d3_geo = require("d3-geo");
@@ -18607,6 +18808,17 @@ function resolveViewerPalette(isDark = false, headerBackgroundColor, headerTextC
 
 // src/XlsxViewer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var RANGE_HIGHLIGHT_STYLES = `
+:where(.react-xlsx-range-highlight) {
+  background: var(--xlsx-highlight-fill, rgb(59 130 246 / 8%));
+  border: var(--xlsx-highlight-border, var(--xlsx-highlight-default-border-width, 1px) solid #3b82f6);
+  border-radius: var(--xlsx-highlight-radius, 2px);
+}
+:where(.react-xlsx-range-highlight[data-dark="true"]) {
+  background: var(--xlsx-highlight-fill, rgb(147 197 253 / 12%));
+  border: var(--xlsx-highlight-border, var(--xlsx-highlight-default-border-width, 1px) solid #93c5fd);
+}
+`;
 var DEFAULT_ROW_HEIGHT2 = 24;
 var DEFAULT_COL_WIDTH2 = 80;
 var HEADER_HEIGHT = 24;
@@ -24098,6 +24310,7 @@ function XlsxGrid({
   errorState,
   fileTooLargeState,
   getCellStyle,
+  highlightClassName,
   loadingComponent,
   loadingState,
   onFormControlAction,
@@ -24142,6 +24355,7 @@ function XlsxGrid({
     getClipboardData,
     getCellDisplayValue: getControllerCellDisplayValue,
     getFormControlItems,
+    highlightedRanges,
     images,
     shapes,
     isLoadDeferred,
@@ -24188,6 +24402,7 @@ function XlsxGrid({
   ), [formControls, getFormControlItems]);
   const canResizeHeaders = !readOnly || allowResizeInReadOnly;
   const scrollRef = React4.useRef(null);
+  const scrolledHighlightRef = React4.useRef(null);
   const wrapperRef = React4.useRef(null);
   const tableRef = React4.useRef(null);
   const gridKeyboardActiveRef = React4.useRef(false);
@@ -24376,6 +24591,10 @@ function XlsxGrid({
   const resolveMergeAnchorCell = React4.useCallback((cell) => {
     return mergedSecondaryAnchorMap.get(`${cell.row}:${cell.col}`) ?? cell;
   }, [mergedSecondaryAnchorMap]);
+  const highlightedCellRanges = React4.useMemo(
+    () => highlightedRanges.flatMap((highlight, index) => activeSheet?.workbookSheetIndex === highlight.workbookSheetIndex ? [{ highlight, index, range: expandHighlightedRange(highlight.range, activeSheet?.mergedRanges ?? mergedRegions) }] : []),
+    [activeSheet?.mergedRanges, activeSheet?.workbookSheetIndex, highlightedRanges, mergedRegions]
+  );
   const normalizedSelection = React4.useMemo(() => selection ? normalizeRange2(selection) : null, [selection]);
   const zoomFactor = React4.useMemo(() => Math.max(0.1, zoomScale / 100), [zoomScale]);
   const previousZoomFactorRef = React4.useRef(zoomFactor);
@@ -24415,7 +24634,7 @@ function XlsxGrid({
       frozenPaneRight: liveFrozenPaneRight
     } = canvasLayoutMetricsRef.current;
     const currentLiveGestureZoom = liveGestureZoomRef.current;
-    const isLiveZooming2 = currentLiveGestureZoom !== null && zoomScale === currentLiveGestureZoom.baseZoomScale;
+    const isLiveZooming2 = experimentalCanvas && currentLiveGestureZoom !== null && zoomScale === currentLiveGestureZoom.baseZoomScale;
     const liveZoomScale2 = isLiveZooming2 ? Math.max(0.1, currentLiveGestureZoom.targetZoomScale / currentLiveGestureZoom.baseZoomScale) : 1;
     const scrollDeltaX = paintedViewport.left - nextLiveViewport.left;
     const scrollDeltaY = paintedViewport.top - nextLiveViewport.top;
@@ -25386,7 +25605,7 @@ function XlsxGrid({
   }, [shouldUseDomVirtualizer, syncDrawingViewport, zoomFactor]);
   React4.useLayoutEffect(() => {
     syncDrawingViewport(scrollRef.current, { immediate: true });
-  }, [activeSheet, activeTabIndex, displayColLimit, displayRowLimit, syncDrawingViewport, zoomFactor]);
+  }, [activeSheet, activeTabIndex, displayColLimit, displayRowLimit, highlightedCellRanges, syncDrawingViewport, zoomFactor]);
   React4.useLayoutEffect(() => {
     const scroller = scrollRef.current;
     if (!scroller) {
@@ -26530,11 +26749,11 @@ function XlsxGrid({
           if (textWidth > availableTextWidth) {
             const baseFontSizePx = resolveCanvasFontSizePx(nextData.style, 12 * zoomFactor);
             const minimumFontSizePx = Math.max(6 * zoomFactor, baseFontSizePx * 0.4);
-            let lowerBound = minimumFontSizePx;
+            let lowerBound2 = minimumFontSizePx;
             let upperBound = baseFontSizePx;
             let bestFontSizePx = minimumFontSizePx;
-            while (upperBound - lowerBound > 0.25) {
-              const candidateFontSizePx = (lowerBound + upperBound) / 2;
+            while (upperBound - lowerBound2 > 0.25) {
+              const candidateFontSizePx = (lowerBound2 + upperBound) / 2;
               const candidateStyle = {
                 ...nextData.style,
                 font: void 0,
@@ -26543,7 +26762,7 @@ function XlsxGrid({
               const candidateWidth = measureTextWidth(nextData.value, candidateStyle);
               if (candidateWidth <= availableTextWidth) {
                 bestFontSizePx = candidateFontSizePx;
-                lowerBound = candidateFontSizePx;
+                lowerBound2 = candidateFontSizePx;
               } else {
                 upperBound = candidateFontSizePx;
               }
@@ -26594,6 +26813,51 @@ function XlsxGrid({
     };
   }, [colIndexByActual, colPrefixSums, displayHeaderHeight, displayRowHeaderWidth, displayedSelection, rowIndexByActual, rowPrefixSums]);
   const resolvedSelectionOverlay = selectionOverlay;
+  const rangeHighlightRects = React4.useMemo(() => highlightedCellRanges.map(({ highlight, index, range }) => {
+    const rows = getHighlightAxisExtent(visibleRows, rowPrefixSums, range.start.row, range.end.row);
+    const cols = getHighlightAxisExtent(visibleCols, colPrefixSums, range.start.col, range.end.col);
+    return {
+      highlight,
+      index,
+      range,
+      rect: rows && cols ? {
+        height: rows.end - rows.start,
+        left: displayRowHeaderWidth + cols.start,
+        top: displayHeaderHeight + rows.start,
+        width: cols.end - cols.start
+      } : null
+    };
+  }), [colPrefixSums, displayHeaderHeight, displayRowHeaderWidth, highlightedCellRanges, rowPrefixSums, visibleCols, visibleRows]);
+  React4.useEffect(() => {
+    let requiredRows = 0;
+    let requiredCols = 0;
+    for (const { highlight, range } of highlightedCellRanges) {
+      if (highlight.kind !== "columns") {
+        requiredRows = Math.max(requiredRows, Math.min(XLSX_MAX_ROWS, range.end.row + OPEN_GRID_ROW_PADDING + 1));
+      }
+      if (highlight.kind !== "rows") {
+        requiredCols = Math.max(requiredCols, Math.min(XLSX_MAX_COLUMNS, range.end.col + OPEN_GRID_COL_PADDING + 1));
+      }
+    }
+    setDisplayRowLimit((current) => Math.max(current, requiredRows));
+    setDisplayColLimit((current) => Math.max(current, requiredCols));
+  }, [activeSheet?.maxUsedCol, activeSheet?.maxUsedRow, highlightedCellRanges, activeSheetIndex, isWorkerBacked]);
+  React4.useEffect(() => {
+    const scroller = scrollRef.current;
+    const target = rangeHighlightRects.find(({ highlight: highlight2 }) => highlight2.autoScroll);
+    if (!scroller || !target?.rect || scrolledHighlightRef.current === target.highlight || isLoading || scroller.clientWidth === 0 || scroller.clientHeight === 0 || target.highlight.kind !== "columns" && displayRowLimit <= target.range.end.row || target.highlight.kind !== "rows" && displayColLimit <= target.range.end.col) {
+      return;
+    }
+    const { highlight, rect } = target;
+    if (highlight.kind !== "columns") {
+      scroller.scrollTop = getHighlightScrollOffset(rect.top, rect.top + rect.height, frozenPaneBottom, scroller.clientHeight, scroller.scrollTop);
+    }
+    if (highlight.kind !== "rows") {
+      scroller.scrollLeft = getHighlightScrollOffset(rect.left, rect.left + rect.width, frozenPaneRight, scroller.clientWidth, scroller.scrollLeft);
+    }
+    scrolledHighlightRef.current = highlight;
+    syncDrawingViewport(scroller, { immediate: true });
+  }, [displayColLimit, displayRowLimit, drawingViewport.height, drawingViewport.width, frozenPaneBottom, frozenPaneRight, isLoading, rangeHighlightRects, syncDrawingViewport]);
   const { fill: selectionFill, header: selectionHeaderSurface, stroke: selectionStroke } = React4.useMemo(() => resolveSelectionColors({
     palette,
     selectionColor,
@@ -29609,6 +29873,7 @@ function XlsxGrid({
     backgroundColor: palette.headerSurface,
     borderBottom: "none",
     borderRight: "none",
+    boxSizing: "border-box",
     boxShadow: gutterSeparatorShadow,
     color: palette.headerText,
     fontSize: "11px",
@@ -31300,6 +31565,51 @@ function XlsxGrid({
       width: "100%"
     }
   };
+  const rangeHighlightNodes = rangeHighlightRects.flatMap(({ index, rect }) => rect ? [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: classNames("react-xlsx-range-highlight", highlightClassName),
+        "data-dark": paletteIsDark(palette) ? "true" : void 0,
+        "data-xlsx-range-highlight": index,
+        style: {
+          ...rect,
+          ["--xlsx-highlight-default-border-width"]: `${selectionBorderWidth}px`,
+          boxSizing: "border-box",
+          pointerEvents: "none",
+          position: "absolute",
+          zIndex: maxDrawingOverlayZIndex + 1
+        }
+      },
+      index
+    )
+  ] : []);
+  const drawingOverlayPanes = experimentalCanvas && hasCanvasDomDrawingOverlays || rangeHighlightNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...canvasBodyViewportLayerStyle, zIndex: experimentalCanvas ? 23 : 34 }, children: [
+    { pane: "scroll", style: canvasScrollOverlayPaneStyle, ref: canvasScrollOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -drawingViewport.top - frozenPaneBottom },
+    { pane: "top", style: canvasTopOverlayPaneStyle, ref: canvasTopOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -displayHeaderHeight },
+    { pane: "left", style: canvasLeftOverlayPaneStyle, ref: canvasLeftOverlayContentRef, left: -displayRowHeaderWidth, top: -drawingViewport.top - frozenPaneBottom },
+    { pane: "corner", style: canvasCornerOverlayPaneStyle, ref: canvasCornerOverlayContentRef, left: -displayRowHeaderWidth, top: -displayHeaderHeight }
+  ].map(({ pane, style, ref, left, top }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        height: sheetContentHeight,
+        left: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        transform: `translate(${left}px, ${top}px)`,
+        transformOrigin: "0 0",
+        width: totalWidth
+      },
+      children: [
+        experimentalCanvas ? paneDrawingNodes[pane] : null,
+        rangeHighlightNodes
+      ]
+    }
+  ) }, pane)) }) : null;
   const scrollerContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
@@ -31333,6 +31643,7 @@ function XlsxGrid({
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cornerOverlayStyle, children: paneDrawingNodes.corner }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: scrollOverlayStyle, children: paneDrawingNodes.scroll })
             ] }) : null,
+            drawingOverlayPanes,
             experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasBodyViewportLayerStyle, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -31374,77 +31685,7 @@ function XlsxGrid({
                     onPointerDown: handleCanvasBodyPointerDown,
                     style: canvasCornerBodyStyle
                   }
-                ),
-                hasCanvasDomDrawingOverlays ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasScrollOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasScrollOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.scroll
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasTopOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasTopOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.top
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasLeftOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasLeftOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.left
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasCornerOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasCornerOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-displayRowHeaderWidth}px, ${-displayHeaderHeight}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.corner
-                    }
-                  ) })
-                ] }) : null
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasHeaderViewportLayerStyle, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -31890,6 +32131,7 @@ function XlsxGrid({
 }
 function XlsxViewerInner({
   allowResizeInReadOnly = false,
+  autoScrollToHighlightedRanges = true,
   className,
   controller,
   emptyState,
@@ -31902,6 +32144,8 @@ function XlsxViewerInner({
   headerBackgroundColor,
   headerTextColor,
   height,
+  highlightClassName,
+  highlightedRanges,
   isDark = false,
   loadingComponent,
   loadingState,
@@ -31924,6 +32168,26 @@ function XlsxViewerInner({
 }) {
   const palette = useViewerPalette(isDark, headerBackgroundColor, headerTextColor);
   const { displayFileName, error } = controller;
+  const appliedHighlightRef = React4.useRef(null);
+  const { clearHighlightedRanges, file, highlightRanges, isLoading, sheets, src } = controller;
+  React4.useEffect(() => {
+    if (isLoading || highlightedRanges === void 0) {
+      appliedHighlightRef.current = null;
+      return;
+    }
+    if (highlightedRanges !== null && sheets.length === 0) {
+      return;
+    }
+    const referenceKey = JSON.stringify(typeof highlightedRanges === "string" ? [highlightedRanges] : highlightedRanges ?? []);
+    const previous = appliedHighlightRef.current;
+    if (previous && previous.referenceKey === referenceKey && previous.autoScroll === autoScrollToHighlightedRanges && previous.file === file && previous.src === src && previous.clear === clearHighlightedRanges) {
+      return;
+    }
+    appliedHighlightRef.current = { autoScroll: autoScrollToHighlightedRanges, clear: clearHighlightedRanges, file, referenceKey, src };
+    if (highlightedRanges === null || !highlightRanges(highlightedRanges, { autoScroll: autoScrollToHighlightedRanges })) {
+      clearHighlightedRanges();
+    }
+  }, [autoScrollToHighlightedRanges, clearHighlightedRanges, file, highlightRanges, highlightedRanges, isLoading, sheets.length, src]);
   const customFileTooLarge = error instanceof XlsxFileSizeLimitExceededError ? renderCustomFileTooLarge(
     fileTooLargeState,
     {
@@ -31956,6 +32220,7 @@ function XlsxViewerInner({
         width: "100%"
       },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: RANGE_HIGHLIGHT_STYLES }),
         resolveToolbar(toolbar, showDefaultToolbar, controller, palette),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           XlsxGrid,
@@ -31969,6 +32234,7 @@ function XlsxViewerInner({
             experimentalCanvas,
             fileTooLargeState,
             getCellStyle,
+            highlightClassName,
             loadingComponent,
             loadingState,
             onFormControlAction,
@@ -33126,6 +33392,7 @@ function DefaultXlsxToolbar() {
   XlsxViewer,
   XlsxViewerProvider,
   initWasm,
+  parseXlsxRange,
   setWasmSource,
   useXlsxViewer,
   useXlsxViewerCharts,