@datarobot/design-system 29.5.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/key-value-pairs/key-value-inputs.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { Item } from './types';
+import { Item, ValueObject } from './types';
 import { FormFieldValidity } from '../form-field/validity-shape';
 type OnChangeEvent = Item;
 type KeyValueInputsProps = {
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
     value?: string | number;
     /** True to disable inputs, false to enable inputs */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     /** Change handler */
     onChange?: (event: OnChangeEvent) => void;
     /** Delete handler */

package/cjs/key-value-pairs/key-value-inputs.js

@@ -23,6 +23,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
     name,
     value = '',
     isDisabled = false,
+    disabledPairs,
     onChange = () => {},
     onDelete = () => {},
     validity = {},
@@ -40,6 +41,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
     id,
     validationValues
   });
+  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "kvp-inputs",
     "test-id": "kvp-inputs",
@@ -48,7 +50,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
         type: _formField.INPUT_TYPES.TEXT,
         value: name,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -67,7 +69,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
         type: _formField.INPUT_TYPES.TEXT,
         value: value,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -85,7 +87,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
         accentType: _button.ACCENT_TYPES.ROUND_ICON,
         onClick: onDelete,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         testId: "kvp-delete-button",
         "aria-label": deleteKeyValueText,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {

package/cjs/key-value-pairs/key-value-pairs.d.ts

@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
     /** Object that represents the key value pairs in this component */
     value: ValueObject;
     className?: string;
+    /** whether whole form is disabled */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     label?: string;
     /** Label for the key column */
     keyLabel?: string;
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
     @midnight-gray-supported
     @alpine-light-supported
  */
-export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, disabledPairs, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/cjs/key-value-pairs/key-value-pairs.js

@@ -65,6 +65,7 @@ const KeyValuePairs = ({
   helperText = '',
   placeholder: placeholderParams,
   isDisabled = false,
+  disabledPairs,
   onChange = () => {},
   hasWarning = false,
   emptyCheck = false,
@@ -197,6 +198,7 @@ const KeyValuePairs = ({
         name: item.name,
         value: item.value,
         isDisabled: isDisabled,
+        disabledPairs: disabledPairs,
         onChange: updatedOption => changeItem(index, updatedOption),
         onDelete: () => removeItem(index),
         deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,

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/key-value-pairs/key-value-inputs.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { Item } from './types';
+import { Item, ValueObject } from './types';
 import { FormFieldValidity } from '../form-field/validity-shape';
 type OnChangeEvent = Item;
 type KeyValueInputsProps = {
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
     value?: string | number;
     /** True to disable inputs, false to enable inputs */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     /** Change handler */
     onChange?: (event: OnChangeEvent) => void;
     /** Delete handler */

package/esm/key-value-pairs/key-value-inputs.js

@@ -16,6 +16,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
     name,
     value = '',
     isDisabled = false,
+    disabledPairs,
     onChange = () => {},
     onDelete = () => {},
     validity = {},
@@ -33,6 +34,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     validationValues
   });
+  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
   return /*#__PURE__*/_jsxs("div", {
     className: "kvp-inputs",
     "test-id": "kvp-inputs",
@@ -41,7 +43,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Input, {
         type: INPUT_TYPES.TEXT,
         value: name,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -60,7 +62,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Input, {
         type: INPUT_TYPES.TEXT,
         value: value,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -78,7 +80,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Button, {
         accentType: ACCENT_TYPES.ROUND_ICON,
         onClick: onDelete,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         testId: "kvp-delete-button",
         "aria-label": deleteKeyValueText,
         children: /*#__PURE__*/_jsx(FontAwesomeIcon, {

package/esm/key-value-pairs/key-value-pairs.d.ts

@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
     /** Object that represents the key value pairs in this component */
     value: ValueObject;
     className?: string;
+    /** whether whole form is disabled */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     label?: string;
     /** Label for the key column */
     keyLabel?: string;
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
     @midnight-gray-supported
     @alpine-light-supported
  */
-export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, disabledPairs, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/key-value-pairs/key-value-pairs.js

@@ -57,6 +57,7 @@ export const KeyValuePairs = ({
   helperText = '',
   placeholder: placeholderParams,
   isDisabled = false,
+  disabledPairs,
   onChange = () => {},
   hasWarning = false,
   emptyCheck = false,
@@ -189,6 +190,7 @@ export const KeyValuePairs = ({
         name: item.name,
         value: item.value,
         isDisabled: isDisabled,
+        disabledPairs: disabledPairs,
         onChange: updatedOption => changeItem(index, updatedOption),
         onDelete: () => removeItem(index),
         deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,

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"
+  });
+}