@canonical/react-ds-app-launchpad 0.9.0-experimental.9 → 0.9.0

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.js

@@ -1,56 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import { useGitDiffViewer } from "../../hooks/index.js";
+import { highlightDiffHunkLines } from "../../utils/index.js";
 import { DiffLine } from "./common/index.js";
-import "./styles.css";
-// TODO: decide where to put this once we provide an external syntax highlighter option
-import hljs from "highlight.js";
 import "./HighlighTheme.css";
+import "./styles.css";
+import * as icons from "./common/icons.js";
+import { AnnotatedDiffLine } from "./common/AnnotatedDiffLine/index.js";
+import { tableWidthCSSVar } from "./constants.js";
 const componentCssClassName = "ds code-diff-viewer";
-const tableWidthCSSVar = "--table-width";
 /**
  * Displays a diff in a table format with line numbers and syntax highlighting.
  * With option to add comments to specific lines and interactive gutter for adding comments.
  *
  * @returns {React.ReactElement} - Rendered CodeDiffViewer
  */
-const CodeDiffViewer = ({ id, AddComment, className, style, }) => {
-    const { isCollapsed, diff, addCommentEnabled, setAddCommentEnabled, addCommentOpenLocations, toggleAddCommentLocation, lineDecorations, } = useGitDiffViewer();
+const CodeDiffViewer = ({ id, AddComment, onLineClick, className, style, disableWidthCalculation = false, }, ref) => {
+    const { isCollapsed, diff } = useGitDiffViewer();
     const tableRef = useRef(null);
-    // TODO: temporary syntax highlighting
-    // replace with a proper syntax highlighter
-    // add support for option to have external syntax highlighter
-    const diffCodeLanguage = useMemo(() => {
-        const extension = diff?.newPath.split(".").pop();
-        const mapping = {
-            js: "javascript",
-            jsx: "javascript",
-            ts: "typescript",
-            tsx: "typescript",
-            css: "css",
-            scss: "scss",
-            html: "xml",
-            py: "python",
-            java: "java",
-            // Add more mappings as needed
-        };
-        return mapping[extension || ""] || "plaintext";
-    }, [diff?.newPath]);
-    const highlight = useCallback((code) => {
-        if (hljs.getLanguage(diffCodeLanguage)) {
-            return hljs.highlight(code, { language: diffCodeLanguage }).value;
-        }
-        return hljs.highlight(code, { language: "plaintext" }).value;
-    }, [diffCodeLanguage]);
     const highlightedLines = useMemo(() => {
         if (!diff)
             return [];
-        return diff.hunks.map((hunk) => {
-            return hunk.lines.map((line) => {
-                return highlight(line.content);
-            });
-        });
-    }, [diff, highlight]);
+        return diff.hunks.map((hunk) => highlightDiffHunkLines(diff.newPath, hunk.lines));
+    }, [diff]);
+    useImperativeHandle(ref, () => tableRef.current);
     /**
      * Observe the table for size changes and update the CSS variable
      */
@@ -58,62 +31,44 @@ const CodeDiffViewer = ({ id, AddComment, className, style, }) => {
         // SSR check
         if (typeof ResizeObserver === "undefined")
             return;
+        if (disableWidthCalculation || isCollapsed)
+            return;
         if (!tableRef.current)
             return;
         const resizeObserver = new ResizeObserver(() => {
             if (!tableRef.current)
                 return;
-            const tableWidth = tableRef.current?.clientWidth ?? 0;
-            tableRef.current.style.cssText = `${tableWidthCSSVar}: ${tableWidth}px`;
+            tableRef.current.style.cssText = `${tableWidthCSSVar}: ${tableRef.current.clientWidth}px`;
         });
-        // Observe the table for size changes
         resizeObserver.observe(tableRef.current);
-        // Cleanup on unmount
         return () => {
             resizeObserver.disconnect();
         };
-    }, []);
-    useEffect(() => {
-        if (AddComment && !addCommentEnabled) {
-            setAddCommentEnabled(true);
-        }
-        else if (!AddComment && addCommentEnabled) {
-            setAddCommentEnabled(false);
-        }
-    }, [AddComment, addCommentEnabled, setAddCommentEnabled]);
-    if (isCollapsed) {
+    }, [disableWidthCalculation, isCollapsed]);
+    if (isCollapsed)
         return null;
-    }
-    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: diff.hunks.map((hunk, hunkIndex) => {
-            // We'll track the counters for old and new lines
-            // as we iterate through each hunk.
-            let oldLineCounter = hunk.oldStart;
-            let newLineCounter = hunk.newStart;
-            return (_jsx("div", { className: "diff-hunk", children: _jsx("table", { className: "diff-table", ref: tableRef, tabIndex: -1, children: _jsxs("tbody", { children: [_jsx(DiffLine, { type: "hunk", hunkHeader: hunk.header }), hunk.lines.map((line, lineIndex) => {
-                                let lineNum1 = null;
-                                let lineNum2 = null;
-                                if (line.type === "remove") {
-                                    // Only the old line number advances
-                                    lineNum1 = oldLineCounter++;
-                                }
-                                else if (line.type === "add") {
-                                    // Only the new line number advances
-                                    lineNum2 = newLineCounter++;
-                                }
-                                else {
-                                    // context line => both lines advance
-                                    lineNum1 = oldLineCounter++;
-                                    lineNum2 = newLineCounter++;
-                                }
-                                const lineNumber = lineNum2 || lineNum1 || 0;
-                                // For rendering, if lineNum1 or lineNum2 is null,
-                                // you can display e.g. '+' or '-' or an empty cell.
-                                return (_jsxs(Fragment, { children: [_jsx(DiffLine, { lineNum1: lineNum1, lineNum2: lineNum2, content: highlightedLines[hunkIndex][lineIndex], type: line.type }), lineNum2 && lineDecorations?.[lineNum2] && (_jsx("tr", { className: "line-decoration", children: _jsx("td", { className: "container", children: lineDecorations[lineNum2] }) })), lineNum2 &&
-                                            AddComment &&
-                                            addCommentOpenLocations.has(lineNum2) && (_jsx("tr", { className: "line-decoration", children: _jsx("td", { className: "container", children: _jsx(AddComment, { lineNumber: lineNumber, onClose: () => toggleAddCommentLocation(lineNumber) }) }) }))] }, `${diff.oldPath}-${hunkIndex}-${lineIndex}`));
-                            })] }) }) }, `${diff.oldPath}-${hunkIndex}`));
-        }) }));
+    return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: [_jsx("div", { className: "diff-hunk", children: _jsx("table", { className: "diff-table", ref: tableRef, tabIndex: -1, children: _jsx("tbody", { children: diff.hunks.map((hunk, hunkIndex) => {
+                            // We'll track the counters for old and new lines
+                            // as we iterate through each hunk.
+                            let oldLineCounter = hunk.positions.old.start;
+                            let newLineCounter = hunk.positions.new.start;
+                            return (_jsxs(Fragment, { children: [_jsx(DiffLine, { type: "hunk", hunkHeader: hunk.header, hunkIndex: hunkIndex }), hunk.lines.map((line, lineIndex) => {
+                                        const newLineNumber = newLineCounter;
+                                        const oldLineNumber = oldLineCounter;
+                                        if (line.type === "remove") {
+                                            oldLineCounter++;
+                                        }
+                                        else if (line.type === "add") {
+                                            newLineCounter++;
+                                        }
+                                        else {
+                                            oldLineCounter++;
+                                            newLineCounter++;
+                                        }
+                                        return (_jsx(AnnotatedDiffLine, { newLineNumber: newLineNumber, oldLineNumber: oldLineNumber, diffLineNumber: hunk.positions.diff.start + lineIndex, content: highlightedLines[hunkIndex][lineIndex], type: line.type, onLineClick: onLineClick, AddComment: AddComment }, `${diff.oldPath}-${hunkIndex}-${lineIndex}`));
+                                    })] }, `${diff.oldPath}-${hunkIndex}`));
+                        }) }) }) }), _jsx("div", { className: "svg-refs", children: icons.CommentIcon })] }));
 };
 CodeDiffViewer.displayName = "GitDiffViewer.CodeDiff";
-export default CodeDiffViewer;
+export default forwardRef(CodeDiffViewer);
 //# sourceMappingURL=CodeDiffViewer.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDiffViewer.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeDiffViewer.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,cAAc,GAAG,CACrB,EACE,EAAE,EACF,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,uBAAuB,GAAG,KAAK,GACX,EACtB,GAAgC,EACL,EAAE;IAC7B,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACjD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,gBAAgB,GAAe,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC7B,sBAAsB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CACjD,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CACvB,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,YAAY;QACZ,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAClD,IAAI,uBAAuB,IAAI,WAAW;YAAE,OAAO;QACnD,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE,OAAO;YAC9B,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,gBAAgB,KAAK,QAAQ,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC;QAC5F,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAEzC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,IAAI,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,CACL,eACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEvE,cAAK,SAAS,EAAC,WAAW,YACxB,gBAAO,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,YACvD,0BACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;4BAClC,iDAAiD;4BACjD,mCAAmC;4BACnC,IAAI,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;4BAC9C,IAAI,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;4BAE9C,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,IAAI,CAAC,MAAM,EACvB,SAAS,EAAE,SAAS,GACpB,EAED,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;wCAClC,MAAM,aAAa,GAAG,cAAc,CAAC;wCACrC,MAAM,aAAa,GAAG,cAAc,CAAC;wCAErC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;4CAC3B,cAAc,EAAE,CAAC;wCACnB,CAAC;6CAAM,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;4CAC/B,cAAc,EAAE,CAAC;wCACnB,CAAC;6CAAM,CAAC;4CACN,cAAc,EAAE,CAAC;4CACjB,cAAc,EAAE,CAAC;wCACnB,CAAC;wCAED,OAAO,CACL,KAAC,iBAAiB,IAEhB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,EACrD,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,IAPjB,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,IAAI,SAAS,EAAE,CAQhD,CACH,CAAC;oCACJ,CAAC,CAAC,KAhCW,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,CAiClC,CACZ,CAAC;wBACJ,CAAC,CAAC,GACI,GACF,GACJ,EACN,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,CAAC,WAAW,GAAO,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAEtD,eAAe,UAAU,CAAC,cAAc,CAAC,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/HighlighTheme.css

@@ -1,172 +1,171 @@
-.ds.code-diff-viewer {
-  .hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 0.5em;
-
-    color: #000000;
-    background: #0d1117;
-  }
-
-  .hljs-comment,
-  .hljs-prolog,
-  .hljs-doctype,
-  .hljs-cdata {
-    color: #8b949e;
-  }
-
-  .hljs-punctuation {
-    color: #000000;
-  }
-
-  .hljs-namespace {
-    opacity: 0.7;
-  }
-
-  .hljs-property,
-  .hljs-tag,
-  .hljs-boolean,
-  .hljs-number,
-  .hljs-constant,
-  .hljs-symbol,
-  .hljs-deleted {
-    color: #77216f;
-  }
-
-  .hljs-selector,
-  .hljs-attr-name,
-  .hljs-string,
-  .hljs-char,
-  .hljs-builtin,
-  .hljs-inserted {
-    color: #0e811f;
-  }
-
-  .hljs-operator,
-  .hljs-entity,
-  .hljs-url,
-  .language-css .hljs-string,
-  .style .hljs-string {
-    color: #a86500;
-  }
-
-  .hljs-atrule,
-  .hljs-attr-value,
-  .hljs-keyword {
-    color: #06c;
-  }
-
-  .hljs-function,
-  .hljs-class-name {
-    color: #c7162b;
-  }
-
-  .hljs-regexp,
-  .hljs-important,
-  .hljs-variable {
-    color: #dc3023;
-  }
-
-  .hljs-important,
-  .hljs-bold {
-    font-weight: bold;
-  }
-
-  .hljs-italic {
-    font-style: italic;
-  }
-
-  .hljs-entity {
-    cursor: help;
-  }
-
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-meta,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    color: #77216f;
-  }
-
-  .hljs-variable,
-  .hljs-literal,
-  .hljs-number,
-  .hljs-doctag {
-    color: #77216f;
-  }
-
-  .hljs-params {
-    color: #000000;
-  }
-
-  .hljs-class,
-  .hljs-tag,
-  .hljs-title,
-  .hljs-built_in {
-    color: #0e811f;
-  }
-
-  .hljs-keyword,
-  .hljs-type,
-  .hljs-builtin-name,
-  .hljs-meta-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable {
-    color: #06c;
-  }
-
-  .hljs-string,
-  .hljs-undefined {
-    color: #0e811f;
-  }
-
-  .hljs-regexp {
-    color: #dc3023;
-  }
-
-  .hljs-symbol {
-    color: #77216f;
-  }
-
-  .hljs-bullet {
-    color: #a86500;
-  }
-
-  .hljs-section {
-    color: #77216f;
-    font-weight: bold;
-  }
-
-  .hljs-quote,
-  .hljs-name,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    color: #0e811f;
-  }
-
-  .hljs-emphasis {
-    color: #06c;
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    color: #06c;
-    font-weight: bold;
-  }
-
-  .hljs-deletion {
-    color: #dc3023;
-    background-color: #490202;
-  }
-
-  .hljs-addition {
-    color: #0e811f;
-    background-color: #04260f;
-  }
-
-  .hljs-link {
-    color: #a86500;
-    font-style: underline;
-  }
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+
+  color: #000000;
+  background: #f7f7f7;
+  font-family: var(--font-family-mono);
+}
+
+.hljs-comment,
+.hljs-prolog,
+.hljs-doctype,
+.hljs-cdata {
+  color: #8b949e;
+}
+
+.hljs-punctuation {
+  color: #000000;
+}
+
+.hljs-namespace {
+  opacity: 0.7;
+}
+
+.hljs-property,
+.hljs-tag,
+.hljs-boolean,
+.hljs-number,
+.hljs-constant,
+.hljs-symbol,
+.hljs-deleted {
+  color: #77216f;
+}
+
+.hljs-selector,
+.hljs-attr-name,
+.hljs-string,
+.hljs-char,
+.hljs-builtin,
+.hljs-inserted {
+  color: #0e811f;
+}
+
+.hljs-operator,
+.hljs-entity,
+.hljs-url,
+.language-css .hljs-string,
+.style .hljs-string {
+  color: #a86500;
+}
+
+.hljs-atrule,
+.hljs-attr-value,
+.hljs-keyword {
+  color: #06c;
+}
+
+.hljs-function,
+.hljs-class-name {
+  color: #c7162b;
+}
+
+.hljs-regexp,
+.hljs-important,
+.hljs-variable {
+  color: #dc3023;
+}
+
+.hljs-important,
+.hljs-bold {
+  font-weight: bold;
+}
+
+.hljs-italic {
+  font-style: italic;
+}
+
+.hljs-entity {
+  cursor: help;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-meta,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: #77216f;
+}
+
+.hljs-variable,
+.hljs-literal,
+.hljs-number,
+.hljs-doctag {
+  color: #77216f;
+}
+
+.hljs-params {
+  color: #000000;
+}
+
+.hljs-class,
+.hljs-tag,
+.hljs-title,
+.hljs-built_in {
+  color: #0e811f;
+}
+
+.hljs-keyword,
+.hljs-type,
+.hljs-builtin-name,
+.hljs-meta-keyword,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #06c;
+}
+
+.hljs-string,
+.hljs-undefined {
+  color: #0e811f;
+}
+
+.hljs-regexp {
+  color: #dc3023;
+}
+
+.hljs-symbol {
+  color: #77216f;
+}
+
+.hljs-bullet {
+  color: #a86500;
+}
+
+.hljs-section {
+  color: #77216f;
+  font-weight: bold;
+}
+
+.hljs-quote,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: #0e811f;
+}
+
+.hljs-emphasis {
+  color: #06c;
+  font-style: italic;
+}
+
+.hljs-strong {
+  color: #06c;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: #dc3023;
+  background-color: #490202;
+}
+
+.hljs-addition {
+  color: #0e811f;
+  background-color: #04260f;
+}
+
+.hljs-link {
+  color: #a86500;
+  font-style: underline;
 }

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useGitDiffViewer } from "../../../../hooks/index.js";
+import DiffLine from "../DiffLine/DiffLine.js";
+import "./styles.css";
+const componentCssClassName = "ds annotated-diff-line";
+/**
+ * A component that displays a diff line content, line decorations and AddComment component.
+ * @returns {React.ReactElement} - Rendered AnnotatedDiffLine
+ */
+const AnnotatedDiffLine = ({ newLineNumber, oldLineNumber, diffLineNumber, AddComment, onLineClick, type, ...rest }) => {
+    const { addCommentOpenLocations, toggleAddCommentLocation, lineDecorations } = useGitDiffViewer();
+    const diffLineIsInteractive = Boolean(onLineClick || AddComment);
+    const hunkLineNumber = useMemo(() => {
+        return type === "add" ? newLineNumber : oldLineNumber;
+    }, [type, newLineNumber, oldLineNumber]);
+    const handleLineClick = useCallback(() => {
+        if (diffLineIsInteractive) {
+            onLineClick?.({
+                hunkLineNumber,
+                diffLineNumber,
+            });
+            toggleAddCommentLocation(diffLineNumber);
+        }
+    }, [
+        onLineClick,
+        diffLineNumber,
+        hunkLineNumber,
+        toggleAddCommentLocation,
+        diffLineIsInteractive,
+    ]);
+    const handleCloseComment = useCallback(() => {
+        toggleAddCommentLocation(diffLineNumber);
+    }, [toggleAddCommentLocation, diffLineNumber]);
+    return (_jsxs(_Fragment, { children: [_jsx(DiffLine, { ...rest, type: type, addLineNumber: newLineNumber, removeLineNumber: oldLineNumber, onLineClick: diffLineIsInteractive ? handleLineClick : undefined }), lineDecorations?.[diffLineNumber] && (_jsx("tr", { className: componentCssClassName, children: _jsx("td", { className: "container", children: lineDecorations[diffLineNumber] }) })), AddComment && addCommentOpenLocations.has(diffLineNumber) && (_jsx("tr", { className: componentCssClassName, children: _jsx("td", { className: "container", children: _jsx(AddComment, { hunkLineNumber: hunkLineNumber, diffLineNumber: diffLineNumber, onClose: handleCloseComment }) }) }))] }));
+};
+export default AnnotatedDiffLine;
+//# sourceMappingURL=AnnotatedDiffLine.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotatedDiffLine.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,MAAM,iBAAiB,GAAG,CAAC,EACzB,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,IAAI,EACJ,GAAG,IAAI,EACgB,EAAsB,EAAE;IAC/C,MAAM,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,eAAe,EAAE,GAC1E,gBAAgB,EAAE,CAAC;IAErB,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,IAAI,UAAU,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;IACxD,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,qBAAqB,EAAE,CAAC;YAC1B,WAAW,EAAE,CAAC;gBACZ,cAAc;gBACd,cAAc;aACf,CAAC,CAAC;YACH,wBAAwB,CAAC,cAAc,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE;QACD,WAAW;QACX,cAAc;QACd,cAAc;QACd,wBAAwB;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,wBAAwB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,8BACE,KAAC,QAAQ,OACH,IAAI,EACR,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,aAAa,EAC/B,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,GAChE,EACD,eAAe,EAAE,CAAC,cAAc,CAAC,IAAI,CACpC,aAAI,SAAS,EAAE,qBAAqB,YAClC,aAAI,SAAS,EAAC,WAAW,YAAE,eAAe,CAAC,cAAc,CAAC,GAAM,GAC7D,CACN,EAEA,UAAU,IAAI,uBAAuB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAC5D,aAAI,SAAS,EAAE,qBAAqB,YAClC,aAAI,SAAS,EAAC,WAAW,YACvB,KAAC,UAAU,IACT,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,kBAAkB,GAC3B,GACC,GACF,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+export { default as AnnotatedDiffLine } from "./AnnotatedDiffLine.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,cAAc,YAAY,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/styles.css

@@ -0,0 +1,15 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+
+.ds.annotated-diff-line {
+  display: flex;
+  position: sticky;
+  left: 0;
+  width: var(--table-width);
+  .container {
+    width: 100%;
+    border: 1px solid var(--git-diff-viewer-border-color-tinted);
+    border-width: 1px 0;
+    border-radius: 1px;
+    padding: 0;
+  }
+}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}