react-diff-viewer-continued 4.2.0 → 4.2.2

package/lib/cjs/src/index.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from "classnames";
 import * as React from "react";
@@ -21,12 +12,13 @@ import { Fold } from "./fold.js";
  * the HTML and wrapping text portions based on character positions in the diff.
  */
 function applyDiffToHighlightedHtml(html, diffArray, styles) {
+    var _a;
     const ranges = [];
     let pos = 0;
     for (const diff of diffArray) {
         const value = typeof diff.value === "string" ? diff.value : "";
         if (value.length > 0) {
-            ranges.push({ start: pos, end: pos + value.length, type: diff.type });
+            ranges.push({ start: pos, end: pos + value.length, type: (_a = diff.type) !== null && _a !== void 0 ? _a : DiffType.DEFAULT });
             pos += value.length;
         }
     }
@@ -60,6 +52,7 @@ function applyDiffToHighlightedHtml(html, diffArray, styles) {
             .replace(/&/g, "&")
             .replace(/"/g, '"')
             .replace(/'/g, "'")
+            .replace(/'/g, "'")
             .replace(/ /g, "\u00A0");
     }
     // Helper to get the wrapper tag for a diff type
@@ -166,32 +159,28 @@ class DiffViewer extends React.Component {
         this.charMeasureRef = React.createRef();
         this.stickyHeaderRef = React.createRef();
         this.resizeObserver = null;
+        this.scrollDebounceTimer = null;
+        this.lastRenderedRange = { start: 0, end: Infinity };
         /**
          * Computes word diff on-demand for a line, with caching.
          * This is used when word diff was deferred during initial computation.
          */
         this.getWordDiffValues = (left, right, lineIndex) => {
-            // Handle empty left/right
+            var _a, _b;
             if (!left || !right) {
                 return { leftValue: left === null || left === void 0 ? void 0 : left.value, rightValue: right === null || right === void 0 ? void 0 : right.value };
             }
-            // If no raw values, word diff was already computed or disabled
-            // Use explicit undefined check since empty string is a valid raw value
             if (left.rawValue === undefined || right.rawValue === undefined) {
                 return { leftValue: left.value, rightValue: right.value };
             }
-            // Check cache
             const cacheKey = `${lineIndex}-${left.rawValue}-${right.rawValue}`;
             let cached = this.wordDiffCache.get(cacheKey);
             if (!cached) {
-                // Compute word diff on-demand
-                // Use CHARS method for on-demand computation since rawValue is always a string
-                // (JSON/YAML methods only work with objects, not the string lines we have here)
                 const compareMethod = (this.props.compareMethod === DiffMethod.JSON || this.props.compareMethod === DiffMethod.YAML)
                     ? DiffMethod.CHARS
                     : this.props.compareMethod;
                 const computed = computeDiff(left.rawValue, right.rawValue, compareMethod);
-                cached = { left: computed.left, right: computed.right };
+                cached = { left: (_a = computed.left) !== null && _a !== void 0 ? _a : [], right: (_b = computed.right) !== null && _b !== void 0 ? _b : [] };
                 this.wordDiffCache.set(cacheKey, cached);
             }
             return { leftValue: cached.left, rightValue: cached.right };
@@ -223,7 +212,7 @@ class DiffViewer extends React.Component {
          * Called on resize and when blocks are expanded/collapsed.
          */
         this.recalculateOffsets = () => {
-            var _a;
+            var _a, _b, _c;
             if (!this.props.infiniteLoading)
                 return;
             const columnWidth = this.measureContentColumnWidth();
@@ -234,7 +223,7 @@ class DiffViewer extends React.Component {
             const { lineInformation, lineBlocks, blocks } = (_a = this.state.computedDiffResult[cacheKey]) !== null && _a !== void 0 ? _a : {};
             if (!lineInformation)
                 return;
-            const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, this.props.showDiffOnly, charWidth, columnWidth, this.props.splitView);
+            const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, (_b = this.props.showDiffOnly) !== null && _b !== void 0 ? _b : true, charWidth, columnWidth, (_c = this.props.splitView) !== null && _c !== void 0 ? _c : true);
             this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
                 // Force a scroll position update to recalculate visible rows with new offsets
                 this.onScroll();
@@ -322,7 +311,6 @@ class DiffViewer extends React.Component {
                     content = wordDiff.value;
                 }
                 else {
-                    // If wordDiff.value is DiffInformation[], we don't handle it. See c0c99f5712.
                     content = undefined;
                 }
                 return wordDiff.type === DiffType.ADDED ? (_jsx("ins", { className: cn(this.styles.wordDiff, {
@@ -346,10 +334,12 @@ class DiffViewer extends React.Component {
          * @param additionalPrefix Similar to prefix but for additional line number.
          */
         this.renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
+            var _a;
             const lineNumberTemplate = `${prefix}-${lineNumber}`;
             const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
-            const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
-                this.props.highlightLines.includes(additionalLineNumberTemplate);
+            const highlightLines = (_a = this.props.highlightLines) !== null && _a !== void 0 ? _a : [];
+            const highlightLine = highlightLines.includes(lineNumberTemplate) ||
+                highlightLines.includes(additionalLineNumberTemplate);
             const added = type === DiffType.ADDED;
             const removed = type === DiffType.REMOVED;
             const changed = type === DiffType.CHANGED;
@@ -358,7 +348,7 @@ class DiffViewer extends React.Component {
             if (hasWordDiff) {
                 content = this.renderWordDiff(value, this.props.renderContent);
             }
-            else if (this.props.renderContent) {
+            else if (this.props.renderContent && typeof value === "string") {
                 content = this.props.renderContent(value);
             }
             else {
@@ -386,11 +376,11 @@ class DiffViewer extends React.Component {
                             [this.styles.highlightedGutter]: highlightLine,
                         }), children: _jsx("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
                         ? this.props.renderGutter({
-                            lineNumber,
-                            type,
+                            lineNumber: lineNumber !== null && lineNumber !== void 0 ? lineNumber : 0,
+                            type: type !== null && type !== void 0 ? type : DiffType.DEFAULT,
                             prefix,
-                            value,
-                            additionalLineNumber,
+                            value: value !== null && value !== void 0 ? value : "",
+                            additionalLineNumber: additionalLineNumber !== null && additionalLineNumber !== void 0 ? additionalLineNumber : undefined,
                             additionalPrefix,
                             styles: this.styles,
                         })
@@ -409,10 +399,18 @@ class DiffViewer extends React.Component {
                             left: prefix === LineNumberPrefix.LEFT,
                             right: prefix === LineNumberPrefix.RIGHT,
                         }), onMouseDown: () => {
-                            const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
-                            for (let i = 0; i < elements.length; i++) {
-                                const element = elements.item(i);
-                                element.classList.add(this.styles.noSelect);
+                            var _a, _b, _c;
+                            const rightElements = document.getElementsByClassName("right");
+                            for (let i = 0; i < rightElements.length; i++) {
+                                (_a = rightElements[i]) === null || _a === void 0 ? void 0 : _a.classList.remove(this.styles.noSelect);
+                            }
+                            const leftElements = document.getElementsByClassName("left");
+                            for (let i = 0; i < leftElements.length; i++) {
+                                (_b = leftElements[i]) === null || _b === void 0 ? void 0 : _b.classList.remove(this.styles.noSelect);
+                            }
+                            const opposite = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
+                            for (let i = 0; i < opposite.length; i++) {
+                                (_c = opposite[i]) === null || _c === void 0 ? void 0 : _c.classList.add(this.styles.noSelect);
                             }
                         }, title: added && !hasWordDiff
                             ? "Added line"
@@ -512,8 +510,8 @@ class DiffViewer extends React.Component {
          * It also computes hidden line blocks for collapsing unchanged sections,
          * and stores the result in the local component state.
          */
-        this.memoisedCompute = () => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+        this.memoisedCompute = async () => {
+            var _a, _b;
             const { oldValue, newValue, disableWordDiff, compareMethod, linesOffset } = this.props;
             const cacheKey = this.getMemoisedKey();
             if (!!this.state.computedDiffResult[cacheKey]) {
@@ -532,10 +530,9 @@ class DiffViewer extends React.Component {
                 !!this.props.infiniteLoading &&
                 containerHeightPx > 0 &&
                 containerHeightPx < 2000;
-            const { lineInformation, diffLines } = yield computeLineInformationWorker(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines, shouldDeferWordDiff);
-            const extraLines = this.props.extraLinesSurroundingDiff < 0
-                ? 0
-                : Math.round(this.props.extraLinesSurroundingDiff);
+            const { lineInformation, diffLines } = await computeLineInformationWorker(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines, shouldDeferWordDiff, this.props.disableWorker);
+            const rawExtraLines = (_b = this.props.extraLinesSurroundingDiff) !== null && _b !== void 0 ? _b : 3;
+            const extraLines = rawExtraLines < 0 ? 0 : Math.round(rawExtraLines);
             const { lineBlocks, blocks } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
             this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
             this.setState((prev) => (Object.assign(Object.assign({}, prev), { computedDiffResult: this.state.computedDiffResult, isLoading: false })), () => {
@@ -545,7 +542,7 @@ class DiffViewer extends React.Component {
                     requestAnimationFrame(() => this.recalculateOffsets());
                 }
             });
-        });
+        };
         /**
          * Handles scroll events on the scrollable container.
          *
@@ -562,16 +559,33 @@ class DiffViewer extends React.Component {
             const newStartRow = cumulativeOffsets
                 ? this.findLineAtOffset(contentScrollTop, cumulativeOffsets)
                 : Math.floor(contentScrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
-            // Only update state if the start row changed (avoid unnecessary re-renders)
+            const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+            const newEndRow = newStartRow + viewportRows;
+            const leavesRenderedRange = newStartRow < this.lastRenderedRange.start || newEndRow > this.lastRenderedRange.end;
+            if (this.scrollDebounceTimer) {
+                clearTimeout(this.scrollDebounceTimer);
+            }
+            const stateUpdate = {};
             if (newStartRow !== this.state.visibleStartRow) {
-                this.setState({ visibleStartRow: newStartRow });
+                stateUpdate.visibleStartRow = newStartRow;
+            }
+            if (leavesRenderedRange && !this.state.isScrolling) {
+                stateUpdate.isScrolling = true;
+            }
+            if (Object.keys(stateUpdate).length > 0) {
+                this.setState(stateUpdate);
+            }
+            if (this.state.isScrolling || leavesRenderedRange) {
+                this.scrollDebounceTimer = setTimeout(() => {
+                    this.setState({ isScrolling: false });
+                }, 150);
             }
         };
         /**
          * Generates the entire diff view with virtualization support.
          */
         this.renderDiff = () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const { splitView, infiniteLoading, showDiffOnly } = this.props;
             const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef, cumulativeOffsets } = this.state;
             const cacheKey = this.getMemoisedKey();
@@ -579,7 +593,7 @@ class DiffViewer extends React.Component {
             // Calculate visible range for virtualization
             let visibleRowStart = 0;
             let visibleRowEnd = Infinity;
-            const buffer = 5; // render extra rows above/below viewport
+            const buffer = (_b = infiniteLoading === null || infiniteLoading === void 0 ? void 0 : infiniteLoading.overscan) !== null && _b !== void 0 ? _b : 20;
             if (infiniteLoading && scrollableContainerRef.current) {
                 const container = scrollableContainerRef.current;
                 // Account for sticky header height in scroll calculations
@@ -677,7 +691,7 @@ class DiffViewer extends React.Component {
                         const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
                         if (!expandedBlocks.includes(blockIndex) &&
                             lastLineOfBlock) {
-                            diffNodes.push(_jsx(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                            diffNodes.push(_jsx(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, (_c = line.left.lineNumber) !== null && _c !== void 0 ? _c : 0, (_d = line.right.lineNumber) !== null && _d !== void 0 ? _d : 0) }, lineIndex));
                             continue;
                         }
                         if (!expandedBlocks.includes(blockIndex)) {
@@ -697,6 +711,7 @@ class DiffViewer extends React.Component {
             const bottomPadding = cumulativeOffsets && lastRenderedRowIndex >= 0
                 ? totalContentHeight - (cumulativeOffsets[lastRenderedRowIndex + 1] || totalContentHeight)
                 : 0;
+            this.lastRenderedRange = { start: visibleRowStart, end: visibleRowEnd };
             return {
                 diffNodes,
                 blocks,
@@ -706,24 +721,23 @@ class DiffViewer extends React.Component {
                 bottomPadding,
                 totalContentHeight,
                 renderedCount: diffNodes.length,
-                // Debug info
                 debug: {
                     visibleRowStart,
                     visibleRowEnd,
                     totalRows: totalRenderedRows,
-                    offsetsLength: (_b = cumulativeOffsets === null || cumulativeOffsets === void 0 ? void 0 : cumulativeOffsets.length) !== null && _b !== void 0 ? _b : 0,
+                    offsetsLength: (_e = cumulativeOffsets === null || cumulativeOffsets === void 0 ? void 0 : cumulativeOffsets.length) !== null && _e !== void 0 ? _e : 0,
                     renderedCount: diffNodes.length,
-                    scrollTop: (_d = (_c = scrollableContainerRef.current) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0,
+                    scrollTop: (_g = (_f = scrollableContainerRef.current) === null || _f === void 0 ? void 0 : _f.scrollTop) !== null && _g !== void 0 ? _g : 0,
                     headerHeight: this.getStickyHeaderHeight(),
                     contentScrollTop: scrollableContainerRef.current
                         ? Math.max(0, scrollableContainerRef.current.scrollTop - this.getStickyHeaderHeight())
                         : 0,
-                    clientHeight: (_f = (_e = scrollableContainerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0,
+                    clientHeight: (_j = (_h = scrollableContainerRef.current) === null || _h === void 0 ? void 0 : _h.clientHeight) !== null && _j !== void 0 ? _j : 0,
                 }
             };
         };
         this.render = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
             if (typeof compareMethod === "string" &&
                 compareMethod !== DiffMethod.JSON) {
@@ -731,7 +745,7 @@ class DiffViewer extends React.Component {
                     throw Error('"oldValue" and "newValue" should be strings');
                 }
             }
-            this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
+            this.styles = this.computeStyles((_a = this.props.styles) !== null && _a !== void 0 ? _a : {}, useDarkTheme !== null && useDarkTheme !== void 0 ? useDarkTheme : false, nonce !== null && nonce !== void 0 ? nonce : "");
             const nodes = this.renderDiff();
             let colSpanOnSplitView = 3;
             let colSpanOnInlineView = 4;
@@ -783,54 +797,52 @@ class DiffViewer extends React.Component {
             const tableElement = (_jsxs("table", { className: cn(this.styles.diffContainer, {
                     [this.styles.splitView]: splitView,
                     [this.styles.noWrap]: shouldNoWrap,
-                }), onMouseUp: () => {
-                    const elements = document.getElementsByClassName("right");
-                    for (let i = 0; i < elements.length; i++) {
-                        const element = elements.item(i);
-                        element.classList.remove(this.styles.noSelect);
-                    }
-                    const elementsLeft = document.getElementsByClassName("left");
-                    for (let i = 0; i < elementsLeft.length; i++) {
-                        const element = elementsLeft.item(i);
-                        element.classList.remove(this.styles.noSelect);
-                    }
-                }, children: [_jsxs("colgroup", { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), !splitView && !this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" }), splitView && (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" })] }))] }), _jsx("tbody", { children: nodes.diffNodes })] }));
-            return (_jsxs("div", { style: Object.assign(Object.assign({}, scrollDivStyle), { position: 'relative' }), onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { ref: this.stickyHeaderRef, className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
-                                            this.setState({
-                                                expandedBlocks: allExpanded
-                                                    ? []
-                                                    : nodes.blocks.map((b) => b.index),
-                                            }, () => this.recalculateOffsets());
-                                        }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: {
-                            height: nodes.totalContentHeight,
-                            position: 'relative',
-                        }, children: _jsx("div", { style: {
-                                position: 'absolute',
-                                top: nodes.topPadding,
-                                left: 0,
-                                right: 0,
-                            }, children: tableElement }) })) : (tableElement), _jsx("span", { ref: this.charMeasureRef, style: {
+                }), onMouseUp: () => { }, children: [_jsxs("colgroup", { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), !splitView && !this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" }), splitView && (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" })] }))] }), _jsx("tbody", { children: nodes.diffNodes })] }));
+            const showLoadingOverlay = (this.state.isLoading || this.state.isScrolling) && !!LoadingElement;
+            return (_jsxs("div", { style: { position: 'relative' }, children: [showLoadingOverlay && (_jsx("div", { style: {
                             position: 'absolute',
                             top: 0,
-                            left: '-9999px',
-                            visibility: 'hidden',
-                            whiteSpace: 'pre',
-                            fontFamily: 'monospace',
-                            fontSize: 12,
-                        }, "aria-hidden": "true", children: "M" }), this.props.infiniteLoading && this.props.showDebugInfo && (_jsxs("div", { style: {
-                            position: 'fixed',
-                            top: 10,
-                            right: 10,
-                            background: 'rgba(0,0,0,0.85)',
-                            color: '#0f0',
-                            padding: '10px',
-                            fontFamily: 'monospace',
-                            fontSize: '11px',
-                            zIndex: 9999,
-                            borderRadius: '4px',
-                            maxWidth: '300px',
-                            lineHeight: 1.4,
-                        }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '5px', color: '#fff' }, children: "Debug Info" }), _jsxs("div", { children: ["scrollTop: ", nodes.debug.scrollTop] }), _jsxs("div", { children: ["headerHeight: ", nodes.debug.headerHeight] }), _jsxs("div", { children: ["contentScrollTop: ", nodes.debug.contentScrollTop] }), _jsxs("div", { children: ["clientHeight: ", nodes.debug.clientHeight] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["visibleRowStart: ", nodes.debug.visibleRowStart] }), _jsxs("div", { children: ["visibleRowEnd: ", nodes.debug.visibleRowEnd] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["totalRows: ", nodes.debug.totalRows] }), _jsxs("div", { children: ["offsetsLength: ", nodes.debug.offsetsLength] }), _jsxs("div", { children: ["renderedCount: ", nodes.debug.renderedCount] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["topPadding: ", nodes.topPadding.toFixed(0)] }), _jsxs("div", { children: ["bottomPadding: ", nodes.bottomPadding.toFixed(0)] }), _jsxs("div", { children: ["totalContentHeight: ", nodes.totalContentHeight.toFixed(0)] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#ff0' }, children: [_jsxs("div", { children: ["cumulativeOffsets: ", this.state.cumulativeOffsets ? 'SET' : 'NULL'] }), _jsxs("div", { children: ["columnWidth: ", (_b = (_a = this.state.contentColumnWidth) === null || _a === void 0 ? void 0 : _a.toFixed(0)) !== null && _b !== void 0 ? _b : 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", (_d = (_c = this.state.charWidth) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : 'N/A', "px"] }), _jsxs("div", { children: ["charsPerRow: ", this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'] })] }), this.state.cumulativeOffsets && (_jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#0ff', fontSize: '10px' }, children: [_jsxs("div", { children: ["offsets[", nodes.debug.visibleRowEnd, "]: ", (_f = (_e = this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]) === null || _e === void 0 ? void 0 : _e.toFixed(0)) !== null && _f !== void 0 ? _f : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", (_h = (_g = this.state.cumulativeOffsets[nodes.debug.totalRows - 1]) === null || _g === void 0 ? void 0 : _g.toFixed(0)) !== null && _h !== void 0 ? _h : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", (_k = (_j = this.state.cumulativeOffsets[nodes.debug.totalRows]) === null || _j === void 0 ? void 0 : _j.toFixed(0)) !== null && _k !== void 0 ? _k : 'N/A'] }), _jsxs("div", { style: { marginTop: '3px' }, children: ["viewportEnd: ", (nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)] }), _jsxs("div", { style: { marginTop: '3px', color: '#f0f' }, children: ["scrollHeight: ", (_m = (_l = this.state.scrollableContainerRef.current) === null || _l === void 0 ? void 0 : _l.scrollHeight) !== null && _m !== void 0 ? _m : 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", ((_p = (_o = this.state.scrollableContainerRef.current) === null || _o === void 0 ? void 0 : _o.scrollHeight) !== null && _p !== void 0 ? _p : 0) - nodes.debug.clientHeight] })] }))] }))] }));
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 3,
+                        }, children: _jsx(LoadingElement, {}) })), _jsxs("div", { style: Object.assign(Object.assign({}, scrollDivStyle), { position: 'relative' }), onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { ref: this.stickyHeaderRef, className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
+                                                    this.setState({
+                                                        expandedBlocks: allExpanded
+                                                            ? []
+                                                            : nodes.blocks.map((b) => b.index),
+                                                    }, () => this.recalculateOffsets());
+                                                }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.props.infiniteLoading ? (_jsx("div", { style: {
+                                    height: nodes.totalContentHeight,
+                                    position: 'relative',
+                                }, children: _jsx("div", { style: {
+                                        position: 'absolute',
+                                        top: nodes.topPadding,
+                                        left: 0,
+                                        right: 0,
+                                        visibility: this.state.isScrolling ? 'hidden' : 'visible',
+                                    }, children: tableElement }) })) : (tableElement), _jsx("span", { ref: this.charMeasureRef, style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: '-9999px',
+                                    visibility: 'hidden',
+                                    whiteSpace: 'pre',
+                                    fontFamily: 'monospace',
+                                    fontSize: 12,
+                                }, "aria-hidden": "true", children: "M" }), this.props.infiniteLoading && this.props.showDebugInfo && (_jsxs("div", { style: {
+                                    position: 'fixed',
+                                    top: 10,
+                                    right: 10,
+                                    background: 'rgba(0,0,0,0.85)',
+                                    color: '#0f0',
+                                    padding: '10px',
+                                    fontFamily: 'monospace',
+                                    fontSize: '11px',
+                                    zIndex: 9999,
+                                    borderRadius: '4px',
+                                    maxWidth: '300px',
+                                    lineHeight: 1.4,
+                                }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '5px', color: '#fff' }, children: "Debug Info" }), _jsxs("div", { children: ["scrollTop: ", nodes.debug.scrollTop] }), _jsxs("div", { children: ["headerHeight: ", nodes.debug.headerHeight] }), _jsxs("div", { children: ["contentScrollTop: ", nodes.debug.contentScrollTop] }), _jsxs("div", { children: ["clientHeight: ", nodes.debug.clientHeight] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["visibleRowStart: ", nodes.debug.visibleRowStart] }), _jsxs("div", { children: ["visibleRowEnd: ", nodes.debug.visibleRowEnd] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["totalRows: ", nodes.debug.totalRows] }), _jsxs("div", { children: ["offsetsLength: ", nodes.debug.offsetsLength] }), _jsxs("div", { children: ["renderedCount: ", nodes.debug.renderedCount] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["topPadding: ", nodes.topPadding.toFixed(0)] }), _jsxs("div", { children: ["bottomPadding: ", nodes.bottomPadding.toFixed(0)] }), _jsxs("div", { children: ["totalContentHeight: ", nodes.totalContentHeight.toFixed(0)] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#ff0' }, children: [_jsxs("div", { children: ["cumulativeOffsets: ", this.state.cumulativeOffsets ? 'SET' : 'NULL'] }), _jsxs("div", { children: ["columnWidth: ", (_c = (_b = this.state.contentColumnWidth) === null || _b === void 0 ? void 0 : _b.toFixed(0)) !== null && _c !== void 0 ? _c : 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", (_e = (_d = this.state.charWidth) === null || _d === void 0 ? void 0 : _d.toFixed(2)) !== null && _e !== void 0 ? _e : 'N/A', "px"] }), _jsxs("div", { children: ["charsPerRow: ", this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'] })] }), this.state.cumulativeOffsets && (_jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#0ff', fontSize: '10px' }, children: [_jsxs("div", { children: ["offsets[", nodes.debug.visibleRowEnd, "]: ", (_g = (_f = this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]) === null || _f === void 0 ? void 0 : _f.toFixed(0)) !== null && _g !== void 0 ? _g : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", (_j = (_h = this.state.cumulativeOffsets[nodes.debug.totalRows - 1]) === null || _h === void 0 ? void 0 : _h.toFixed(0)) !== null && _j !== void 0 ? _j : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", (_l = (_k = this.state.cumulativeOffsets[nodes.debug.totalRows]) === null || _k === void 0 ? void 0 : _k.toFixed(0)) !== null && _l !== void 0 ? _l : 'N/A'] }), _jsxs("div", { style: { marginTop: '3px' }, children: ["viewportEnd: ", (nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)] }), _jsxs("div", { style: { marginTop: '3px', color: '#f0f' }, children: ["scrollHeight: ", (_o = (_m = this.state.scrollableContainerRef.current) === null || _m === void 0 ? void 0 : _m.scrollHeight) !== null && _o !== void 0 ? _o : 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", ((_q = (_p = this.state.scrollableContainerRef.current) === null || _p === void 0 ? void 0 : _p.scrollHeight) !== null && _q !== void 0 ? _q : 0) - nodes.debug.clientHeight] })] }))] }))] })] }));
         };
         this.state = {
             expandedBlocks: [],
@@ -842,6 +854,7 @@ class DiffViewer extends React.Component {
             contentColumnWidth: null,
             charWidth: null,
             cumulativeOffsets: null,
+            isScrolling: false,
         };
     }
     /**
@@ -983,6 +996,9 @@ class DiffViewer extends React.Component {
     componentWillUnmount() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.scrollDebounceTimer) {
+            clearTimeout(this.scrollDebounceTimer);
+        }
     }
 }
 DiffViewer.defaultProps = {

package/lib/cjs/src/styles.d.ts

@@ -1,37 +1,41 @@
 import type { Interpolation } from "@emotion/react";
 export interface ReactDiffViewerStyles {
-    diffContainer?: string;
-    diffRemoved?: string;
-    diffAdded?: string;
-    diffChanged?: string;
-    line?: string;
-    highlightedGutter?: string;
-    contentText?: string;
-    lineContent?: string;
-    gutter?: string;
-    highlightedLine?: string;
-    lineNumber?: string;
-    marker?: string;
-    wordDiff?: string;
-    wordAdded?: string;
-    wordRemoved?: string;
-    codeFoldGutter?: string;
-    codeFoldExpandButton?: string;
-    summary?: string;
-    codeFoldContentContainer?: string;
-    emptyGutter?: string;
-    emptyLine?: string;
-    codeFold?: string;
-    stickyHeader?: string;
-    columnHeaders?: string;
-    titleBlock?: string;
-    content?: string;
-    column?: string;
-    noSelect?: string;
-    noWrap?: string;
-    splitView?: string;
-    allExpandButton?: string;
-    [key: string]: string | undefined;
+    diffContainer: string;
+    diffRemoved: string;
+    diffAdded: string;
+    diffChanged: string;
+    line: string;
+    highlightedGutter: string;
+    contentText: string;
+    lineContent: string;
+    gutter: string;
+    highlightedLine: string;
+    lineNumber: string;
+    marker: string;
+    wordDiff: string;
+    wordAdded: string;
+    wordRemoved: string;
+    codeFoldGutter: string;
+    codeFoldExpandButton: string;
+    summary: string;
+    codeFoldContentContainer: string;
+    emptyGutter: string;
+    emptyLine: string;
+    codeFold: string;
+    codeFoldContent: string;
+    stickyHeader: string;
+    columnHeaders: string;
+    titleBlock: string;
+    content: string;
+    column: string;
+    noSelect: string;
+    noWrap: string;
+    splitView: string;
+    allExpandButton: string;
+    block: string;
+    blockAddition: string;
+    blockDeletion: string;
+    [key: string]: string;
 }
 export interface ReactDiffViewerStylesVariables {
     diffViewerBackground?: string;

package/lib/cjs/src/styles.js

@@ -407,12 +407,8 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         titleBlock,
         allExpandButton,
     };
-    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: css(styles[key]),
-    })), {});
-    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: computerOverrideStyles[key]
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: css(styles[key]) })), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: computerOverrideStyles[key]
             ? cx(defaultStyles[key], computerOverrideStyles[key])
-            : defaultStyles[key],
-    })), {});
+            : defaultStyles[key] })), {});
 };