react-diff-viewer-continued 4.1.3 → 4.2.2

package/lib/esm/src/index.js

@@ -17,7 +17,7 @@ function applyDiffToHighlightedHtml(html, diffArray, styles) {
     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: diff.type ?? DiffType.DEFAULT });
             pos += value.length;
         }
     }
@@ -51,6 +51,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
@@ -156,6 +157,8 @@ class DiffViewer extends React.Component {
     charMeasureRef = React.createRef();
     stickyHeaderRef = React.createRef();
     resizeObserver = null;
+    scrollDebounceTimer = null;
+    lastRenderedRange = { start: 0, end: Infinity };
     static defaultProps = {
         oldValue: "",
         newValue: "",
@@ -183,6 +186,7 @@ class DiffViewer extends React.Component {
             contentColumnWidth: null,
             charWidth: null,
             cumulativeOffsets: null,
+            isScrolling: false,
         };
     }
     /**
@@ -190,27 +194,20 @@ class DiffViewer extends React.Component {
      * This is used when word diff was deferred during initial computation.
      */
     getWordDiffValues = (left, right, lineIndex) => {
-        // Handle empty left/right
         if (!left || !right) {
             return { leftValue: left?.value, rightValue: 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: computed.left ?? [], right: computed.right ?? [] };
             this.wordDiffCache.set(cacheKey, cached);
         }
         return { leftValue: cached.left, rightValue: cached.right };
@@ -355,7 +352,7 @@ class DiffViewer extends React.Component {
         const { lineInformation, lineBlocks, blocks } = this.state.computedDiffResult[cacheKey] ?? {};
         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, this.props.showDiffOnly ?? true, charWidth, columnWidth, this.props.splitView ?? true);
         this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
             // Force a scroll position update to recalculate visible rows with new offsets
             this.onScroll();
@@ -442,7 +439,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, {
@@ -468,8 +464,9 @@ class DiffViewer extends React.Component {
     renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
         const lineNumberTemplate = `${prefix}-${lineNumber}`;
         const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
-        const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
-            this.props.highlightLines.includes(additionalLineNumberTemplate);
+        const highlightLines = this.props.highlightLines ?? [];
+        const highlightLine = highlightLines.includes(lineNumberTemplate) ||
+            highlightLines.includes(additionalLineNumberTemplate);
         const added = type === DiffType.ADDED;
         const removed = type === DiffType.REMOVED;
         const changed = type === DiffType.CHANGED;
@@ -478,7 +475,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 {
@@ -506,11 +503,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 ?? 0,
+                        type: type ?? DiffType.DEFAULT,
                         prefix,
-                        value,
-                        additionalLineNumber,
+                        value: value ?? "",
+                        additionalLineNumber: additionalLineNumber ?? undefined,
                         additionalPrefix,
                         styles: this.styles,
                     })
@@ -529,10 +526,17 @@ 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);
+                        const rightElements = document.getElementsByClassName("right");
+                        for (let i = 0; i < rightElements.length; i++) {
+                            rightElements[i]?.classList.remove(this.styles.noSelect);
+                        }
+                        const leftElements = document.getElementsByClassName("left");
+                        for (let i = 0; i < leftElements.length; i++) {
+                            leftElements[i]?.classList.remove(this.styles.noSelect);
+                        }
+                        const opposite = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
+                        for (let i = 0; i < opposite.length; i++) {
+                            opposite[i]?.classList.add(this.styles.noSelect);
                         }
                     }, title: added && !hasWordDiff
                         ? "Added line"
@@ -654,10 +658,9 @@ class DiffViewer extends React.Component {
             !!this.props.infiniteLoading &&
             containerHeightPx > 0 &&
             containerHeightPx < 2000;
-        const { lineInformation, diffLines } = await 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 = this.props.extraLinesSurroundingDiff ?? 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) => ({
@@ -690,9 +693,26 @@ 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);
         }
     };
     /**
@@ -706,7 +726,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 = infiniteLoading?.overscan ?? 20;
         if (infiniteLoading && scrollableContainerRef.current) {
             const container = scrollableContainerRef.current;
             // Account for sticky header height in scroll calculations
@@ -804,7 +824,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, line.left.lineNumber ?? 0, line.right.lineNumber ?? 0) }, lineIndex));
                         continue;
                     }
                     if (!expandedBlocks.includes(blockIndex)) {
@@ -824,6 +844,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,
@@ -833,7 +854,6 @@ class DiffViewer extends React.Component {
             bottomPadding,
             totalContentHeight,
             renderedCount: diffNodes.length,
-            // Debug info
             debug: {
                 visibleRowStart,
                 visibleRowEnd,
@@ -890,6 +910,9 @@ class DiffViewer extends React.Component {
     }
     componentWillUnmount() {
         this.resizeObserver?.disconnect();
+        if (this.scrollDebounceTimer) {
+            clearTimeout(this.scrollDebounceTimer);
+        }
     }
     render = () => {
         const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
@@ -899,7 +922,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(this.props.styles ?? {}, useDarkTheme ?? false, nonce ?? "");
         const nodes = this.renderDiff();
         let colSpanOnSplitView = 3;
         let colSpanOnInlineView = 4;
@@ -951,55 +974,54 @@ 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: { ...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: ", this.state.contentColumnWidth?.toFixed(0) ?? 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", this.state.charWidth?.toFixed(2) ?? '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, "]: ", this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? '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: ", this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", (this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight] })] }))] }))] }));
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 3,
+                    }, children: _jsx(LoadingElement, {}) })), _jsxs("div", { style: { ...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: ", this.state.contentColumnWidth?.toFixed(0) ?? 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", this.state.charWidth?.toFixed(2) ?? '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, "]: ", this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? '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: ", this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", (this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight] })] }))] }))] })] }));
     };
 }
 export default DiffViewer;
 export { DiffMethod };
+export { default as computeStyles } from "./styles.js";

package/lib/esm/src/styles.js

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