@datarobot/design-system 29.6.0 → 29.7.1

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.1",
   "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;
@@ -3148,7 +3156,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field textarea:-webkit-autofill:hover,
 .dr-form-field textarea[data-com-onepassword-filled]:hover {
@@ -3158,7 +3166,7 @@ popout[data-popper-placement^='right']::after,
 .dr-form-field textarea[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.sm input {
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3212,7 +3220,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.sm input:-webkit-autofill:hover,
 .dr-form-field.sm input[data-com-onepassword-filled]:hover {
@@ -3222,7 +3230,7 @@ popout[data-popper-placement^='right']::after,
 .dr-form-field.sm input[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.md input {
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3276,7 +3284,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.md input:-webkit-autofill:hover,
 .dr-form-field.md input[data-com-onepassword-filled]:hover {
@@ -3286,7 +3294,7 @@ popout[data-popper-placement^='right']::after,
 .dr-form-field.md input[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.lg input {
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3340,7 +3348,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.lg input:-webkit-autofill:hover,
 .dr-form-field.lg input[data-com-onepassword-filled]:hover {
@@ -3350,7 +3358,7 @@ popout[data-popper-placement^='right']::after,
 .dr-form-field.lg input[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.xl input {
   height: 3.125rem;
@@ -3406,7 +3414,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.875rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field.xl input:-webkit-autofill:hover,
 .dr-form-field.xl input[data-com-onepassword-filled]:hover {
@@ -3416,7 +3424,7 @@ popout[data-popper-placement^='right']::after,
 .dr-form-field.xl input[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.875rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dr-form-field textarea {
   font-family: inherit;
@@ -4168,7 +4176,7 @@ popout[data-popper-placement^='right']::after,
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dropdown-selectbox-trigger:-webkit-autofill:hover,
 .dropdown-selectbox-trigger[data-com-onepassword-filled]:hover {
@@ -4178,7 +4186,7 @@ popout[data-popper-placement^='right']::after,
 .dropdown-selectbox-trigger[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .dropdown-selectbox-trigger:hover {
   border: var(--dropdown-selectbox-trigger-border);
@@ -8830,7 +8838,7 @@ td.rdtYear {
   border: none;
   -webkit-text-fill-color: var(--input-color);
   -webkit-box-shadow: 0 0 0px 0.0625rem var(--input-border-color) inset, 0 0 0px 1.25rem var(--input-bg) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .file-upload-input .file-input-group:-webkit-autofill:hover,
 .file-upload-input .file-input-group[data-com-onepassword-filled]:hover {
@@ -8840,7 +8848,7 @@ td.rdtYear {
 .file-upload-input .file-input-group[data-com-onepassword-filled]:focus {
   -webkit-text-fill-color: var(--input-color-focused);
   -webkit-box-shadow: 0 0 0px var(--input-border-width) var(--input-focused-border-color) inset, 0 0 0px 1.25rem var(--input-bg-focused-autofill) inset;
-  transition-delay: calc(infinity * 1s);
+  transition: background-color calc(infinity * 1s);
 }
 .file-upload-input .file-input-group > label {
   flex: 1;
@@ -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 ***!
   \**********************************************************************************************************************************************************************************************************************************************************/