@datarobot/design-system 29.6.0 → 29.7.0

package/js/bundle/index.d.ts

@@ -236,6 +236,8 @@ export { Tabs, TAB_GROUP_SIZE, TABS_ACCENT_TYPES };
 export type { TextEditorProps, TextEditorValue, TextEditorValueChild, MarkType, BlockType, TextEditorTool, };
 export { TextEditor, EditedText, InlineTextEditor, isEmptyTextEditorValue, isLongerTextEditorValueThan, hasGreaterTextEditorLinesThan, convertTextToTextEditorValue, TEXT_EDITOR_DEFAULT_VALUE, TEXT_EDITOR_DEFAULT_TOOLS, TEXT_EDITOR_TOOLS, INLINE_EDITOR_TYPES, BLOCK_TYPES, MARK_TYPES, TOOLBAR_POSITION, };
 
+export { TextMergeView, type TextMergeProps };
+
 export type { TextAreaProps, TextAreaResizeValues };
 export { TextArea, TEXTAREA_RESIZE_VALUES };
 
@@ -6671,6 +6673,28 @@ export function hasGreaterTextEditorLinesThan(value: TextEditorValue[], maxTextL
     */
 export function convertTextToTextEditorValue(text: string): TextEditorValue[];
 
+import './text-merge-view.less';
+export type TextMergeProps = {
+    className?: string;
+    testId?: string;
+    isDarkTheme?: boolean;
+    values: {
+        left: string;
+        right: string;
+    };
+    viewSettings?: {
+        showLineNumbers: boolean;
+        highlightActiveLine: boolean;
+    };
+};
+/**
+  * Merge view for 2 text versions
+  * Limited to read-only view.
+  * @midnight-gray-supported
+  * @alpine-light-supported
+  */
+export function TextMergeView({ className, testId, isDarkTheme, values, viewSettings, }: TextMergeProps): import("react/jsx-runtime").JSX.Element;
+
 import './text-with-hyperlinks.less';
 export type TextWithHyperlinksProps = {
     value?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "29.6.0",
+  "version": "29.7.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",
@@ -51,6 +51,9 @@
     "rheostat": "4.1.1"
   },
   "peerDependencies": {
+    "@codemirror/merge": "6.11.2",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.17.0",
     "@fortawesome/fontawesome-svg-core": "6.7.1",
     "@fortawesome/free-brands-svg-icons": "6.7.1",
     "@fortawesome/free-regular-svg-icons": "6.7.1",

package/styles/index.css

@@ -859,6 +859,14 @@
   --text-editor-background-hover-color: #20262A;
   --text-editor-active-color: transparent;
   /*#endregion */
+  /*#region TextMergeView component */
+  --deleted-main-color: #E64D4D;
+  --deleted-with-opacity-color: rgba(230, 77, 77, 0.5);
+  --deleted-line-color: rgba(230, 77, 77, 0.08);
+  --changed-main-color: #1FFF9A;
+  --changed-with-opacity-color: rgba(31, 255, 154, 0.5);
+  --changed-line-color: rgba(31, 255, 154, 0.08);
+  /*#endregion */
   /*#region ToggleSwitch */
   --toggle-bg: transparent;
   --toggle-area-border-color: #81868A;
@@ -13387,6 +13395,34 @@ table.simple-table.sublevel tr td {
   padding: 0.5rem 0;
 }
 
+/*!************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/text-merge-view/text-merge-view.less ***!
+  \************************************************************************************************************************************************************************************************************************************************************/
+/* stylelint-disable  dr-custom/only-kebab-case-class-names */
+.text-merge-view {
+  width: 100%;
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-a .cm-changedLineGutter {
+  background: var(--deleted-main-color);
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-a .cm-deletedLine .cm-changedText {
+  background: linear-gradient(var(--deleted-with-opacity-color), var(--deleted-with-opacity-color)) bottom / 100% 0.125rem no-repeat;
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-a .cm-changedLine,
+.text-merge-view .cm-mergeViewEditor .cm-merge-a .cm-deletedChunk {
+  background-color: var(--deleted-line-color);
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-b .cm-changedLineGutter {
+  background: var(--changed-main-color);
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-b .cm-changedLine {
+  background-color: var(--changed-line-color);
+}
+.text-merge-view .cm-mergeViewEditor .cm-merge-b .cm-insertedLine .cm-changedText {
+  background: linear-gradient(var(--changed-with-opacity-color), var(--changed-with-opacity-color)) bottom / 100% 0.125rem no-repeat;
+}
+/* stylelint-enable  dr-custom/only-kebab-case-class-names */
+
 /*!**********************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/toggler-switch/toggler-switch.less ***!
   \**********************************************************************************************************************************************************************************************************************************************************/