@datarobot/design-system 29.6.0 → 29.7.0

package/cjs/index.d.ts

@@ -90,6 +90,7 @@ export * from './table-react';
 export * from './tabs';
 export * from './tabular-data-tooltip';
 export * from './text-editor';
+export * from './text-merge-view';
 export * from './text-with-hyperlinks';
 export * from './textarea';
 export * from './time-from-now';

package/cjs/index.js

@@ -1015,6 +1015,17 @@ Object.keys(_textEditor).forEach(function (key) {
     }
   });
 });
+var _textMergeView = require("./text-merge-view");
+Object.keys(_textMergeView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _textMergeView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textMergeView[key];
+    }
+  });
+});
 var _textWithHyperlinks = require("./text-with-hyperlinks");
 Object.keys(_textWithHyperlinks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/text-merge-view/index.d.ts

@@ -0,0 +1,2 @@
+import { TextMergeView, type TextMergeProps } from './text-merge-view';
+export { TextMergeView, type TextMergeProps };

package/cjs/text-merge-view/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextMergeView", {
+  enumerable: true,
+  get: function () {
+    return _textMergeView.TextMergeView;
+  }
+});
+var _textMergeView = require("./text-merge-view");

package/cjs/text-merge-view/text-merge-view.d.ts

@@ -0,0 +1,21 @@
+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 declare function TextMergeView({ className, testId, isDarkTheme, values, viewSettings, }: TextMergeProps): import("react/jsx-runtime").JSX.Element;

package/cjs/text-merge-view/text-merge-view.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextMergeView = TextMergeView;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _merge = require("@codemirror/merge");
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const readOnlyExtensions = [
+// only read-only is supported
+_view.EditorView.editable.of(false), _state.EditorState.readOnly.of(true)];
+const viewSettingsDefault = {
+  showLineNumbers: true,
+  highlightActiveLine: false
+};
+
+/**
+ * Merge view for 2 text versions
+ * Limited to read-only view.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+function TextMergeView({
+  className,
+  testId = 'text-merge-view-container',
+  isDarkTheme = true,
+  values,
+  viewSettings = viewSettingsDefault
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const mergeViewParentRef = (0, _react.useRef)(null);
+  const mergeViewRef = (0, _react.useRef)(null);
+  const ariaLabelForSection = t('Text merge view - read only');
+  const allExtensionsMemo = (0, _react.useMemo)(() => {
+    const extentions = [...readOnlyExtensions, _view.EditorView.contentAttributes.of({
+      'aria-label': ariaLabelForSection
+    })];
+    if (viewSettings.showLineNumbers) {
+      extentions.push((0, _view.lineNumbers)());
+    }
+    if (viewSettings.highlightActiveLine) {
+      extentions.push((0, _view.highlightActiveLine)());
+    }
+    extentions.push(_view.EditorView.theme({}, {
+      dark: isDarkTheme
+    }));
+    return extentions;
+  }, [viewSettings, isDarkTheme, ariaLabelForSection]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      mergeViewRef.current?.destroy();
+      mergeViewRef.current = null;
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    mergeViewRef.current = new _merge.MergeView({
+      a: {
+        doc: values.left,
+        extensions: [...allExtensionsMemo]
+      },
+      b: {
+        doc: values.right,
+        extensions: [...allExtensionsMemo]
+      },
+      // @ts-expect-error because parent: Element | DocumentFragment | undefined allows undefined and ref does not allow
+      parent: mergeViewParentRef.current
+    });
+  }, [allExtensionsMemo]);
+  (0, _react.useEffect)(() => {
+    const mv = mergeViewRef.current;
+    if (!mv || !values) {
+      return;
+    }
+    const replaceDoc = (view, text) => {
+      const current = view.state.doc.toString();
+      if (current === text) {
+        return;
+      }
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: text
+        }
+      });
+    };
+    // Update only if content changed
+    replaceDoc(mv.a, values.left);
+    replaceDoc(mv.b, values.right);
+  }, [values]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('text-merge-view', className),
+    "test-id": testId,
+    ref: mergeViewParentRef,
+    "aria-label": t('Comparison of two text view'),
+    "aria-readonly": true,
+    tabIndex: 0,
+    role: "textbox"
+  });
+}

package/esm/index.d.ts

@@ -90,6 +90,7 @@ export * from './table-react';
 export * from './tabs';
 export * from './tabular-data-tooltip';
 export * from './text-editor';
+export * from './text-merge-view';
 export * from './text-with-hyperlinks';
 export * from './textarea';
 export * from './time-from-now';

package/esm/index.js

@@ -90,6 +90,7 @@ export * from './table-react';
 export * from './tabs';
 export * from './tabular-data-tooltip';
 export * from './text-editor';
+export * from './text-merge-view';
 export * from './text-with-hyperlinks';
 export * from './textarea';
 export * from './time-from-now';

package/esm/text-merge-view/index.d.ts

@@ -0,0 +1,2 @@
+import { TextMergeView, type TextMergeProps } from './text-merge-view';
+export { TextMergeView, type TextMergeProps };

package/esm/text-merge-view/index.js

@@ -0,0 +1,2 @@
+import { TextMergeView } from './text-merge-view';
+export { TextMergeView };

package/esm/text-merge-view/text-merge-view.d.ts

@@ -0,0 +1,21 @@
+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 declare function TextMergeView({ className, testId, isDarkTheme, values, viewSettings, }: TextMergeProps): import("react/jsx-runtime").JSX.Element;

package/esm/text-merge-view/text-merge-view.js

@@ -0,0 +1,101 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { MergeView } from '@codemirror/merge';
+import { EditorState } from '@codemirror/state';
+import { lineNumbers, highlightActiveLine, EditorView } from '@codemirror/view';
+import { useTranslation } from '../hooks/use-translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const readOnlyExtensions = [
+// only read-only is supported
+EditorView.editable.of(false), EditorState.readOnly.of(true)];
+const viewSettingsDefault = {
+  showLineNumbers: true,
+  highlightActiveLine: false
+};
+
+/**
+ * Merge view for 2 text versions
+ * Limited to read-only view.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export function TextMergeView({
+  className,
+  testId = 'text-merge-view-container',
+  isDarkTheme = true,
+  values,
+  viewSettings = viewSettingsDefault
+}) {
+  const {
+    t
+  } = useTranslation();
+  const mergeViewParentRef = useRef(null);
+  const mergeViewRef = useRef(null);
+  const ariaLabelForSection = t('Text merge view - read only');
+  const allExtensionsMemo = useMemo(() => {
+    const extentions = [...readOnlyExtensions, EditorView.contentAttributes.of({
+      'aria-label': ariaLabelForSection
+    })];
+    if (viewSettings.showLineNumbers) {
+      extentions.push(lineNumbers());
+    }
+    if (viewSettings.highlightActiveLine) {
+      extentions.push(highlightActiveLine());
+    }
+    extentions.push(EditorView.theme({}, {
+      dark: isDarkTheme
+    }));
+    return extentions;
+  }, [viewSettings, isDarkTheme, ariaLabelForSection]);
+  useEffect(() => {
+    return () => {
+      mergeViewRef.current?.destroy();
+      mergeViewRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    mergeViewRef.current = new MergeView({
+      a: {
+        doc: values.left,
+        extensions: [...allExtensionsMemo]
+      },
+      b: {
+        doc: values.right,
+        extensions: [...allExtensionsMemo]
+      },
+      // @ts-expect-error because parent: Element | DocumentFragment | undefined allows undefined and ref does not allow
+      parent: mergeViewParentRef.current
+    });
+  }, [allExtensionsMemo]);
+  useEffect(() => {
+    const mv = mergeViewRef.current;
+    if (!mv || !values) {
+      return;
+    }
+    const replaceDoc = (view, text) => {
+      const current = view.state.doc.toString();
+      if (current === text) {
+        return;
+      }
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: text
+        }
+      });
+    };
+    // Update only if content changed
+    replaceDoc(mv.a, values.left);
+    replaceDoc(mv.b, values.right);
+  }, [values]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('text-merge-view', className),
+    "test-id": testId,
+    ref: mergeViewParentRef,
+    "aria-label": t('Comparison of two text view'),
+    "aria-readonly": true,
+    tabIndex: 0,
+    role: "textbox"
+  });
+}