@datarobot/design-system 30.7.0 → 30.9.0

package/cjs/chat/chat-message-body.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChatMessageBody = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _slate = require("slate");
 var _slateReact = require("slate-react");
@@ -36,8 +37,9 @@ function ChatMessageBodyBase({
   editableContentClassName,
   mentionsPropmptText,
   autoFocus,
-  value = _constants.DEFAULT_VALUE
+  value
 }) {
+  const slateValue = (0, _react.useMemo)(() => (0, _cloneDeep.default)(value ?? _constants.DEFAULT_VALUE), [value]);
   const anchorRef = (0, _react.useRef)(null);
   const [target, setTarget] = (0, _react.useState)();
   const [search, setSearch] = (0, _react.useState)('');
@@ -54,10 +56,10 @@ function ChatMessageBodyBase({
       event.preventDefault();
       onSubmit({
         key: itemKey,
-        value
+        value: slateValue
       });
     }
-  }, [mentions, target, value, itemKey, onSubmit]);
+  }, [mentions, target, slateValue, itemKey, onSubmit]);
   const handleChange = (0, _react.useCallback)(val => {
     onChange({
       key: itemKey,
@@ -124,14 +126,14 @@ function ChatMessageBodyBase({
     });
   }, [search]);
   (0, _react.useEffect)(() => {
-    if (!(0, _isEqual.default)(editor.children, value)) {
-      (0, _utils.resetNodes)(editor, value);
+    if (!(0, _isEqual.default)(editor.children, slateValue)) {
+      (0, _utils.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_slateReact.Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: handleChange,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "test-id": `chat-item-body-editable-content-${itemKey}`,

package/cjs/chat/utils.js

@@ -7,7 +7,9 @@ exports.getMentionsCount = getMentionsCount;
 exports.isMentionElement = isMentionElement;
 exports.resetNodes = resetNodes;
 var _slate = require("slate");
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function isMentionElement(type) {
   return type === _constants.CUSTOM_ELEMENT_TYPES.mention;
 }
@@ -34,10 +36,12 @@ function resetNodes(editor, nodes) {
     path: [0],
     node
   }));
+
+  // Clone nodes before inserting so multiple editors never share Slate node refs.
   nodes.forEach((node, i) => editor.apply({
     type: 'insert_node',
     path: [i],
-    node
+    node: (0, _cloneDeep.default)(node)
   }));
   const point = _slate.Editor.end(editor, []);
   _slate.Transforms.select(editor, point);

package/cjs/index.d.ts

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/cjs/index.js

@@ -828,6 +828,17 @@ Object.keys(_scheduler).forEach(function (key) {
     }
   });
 });
+var _scopedTheme = require("./scoped-theme");
+Object.keys(_scopedTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _scopedTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _scopedTheme[key];
+    }
+  });
+});
 var _search = require("./search");
 Object.keys(_search).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/scoped-theme/index.d.ts

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme, } from './scoped-theme';

package/cjs/scoped-theme/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScopedTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.ScopedTheme;
+  }
+});
+Object.defineProperty(exports, "syncDesignSystemTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.syncDesignSystemTheme;
+  }
+});
+Object.defineProperty(exports, "useSyncDesignSystemTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.useSyncDesignSystemTheme;
+  }
+});
+var _scopedTheme = require("./scoped-theme");

package/cjs/scoped-theme/scoped-theme.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultThemeMapping: {
+    'midnight-gray': string;
+    'alpine-light': string;
+    dark: string;
+    light: string;
+};
+export declare const syncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare const useSyncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare function ScopedTheme(props: {
+    children: React.ReactNode;
+    theme: keyof typeof defaultThemeMapping;
+    className?: string;
+    themeMapping?: Record<string, string>;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/cjs/scoped-theme/scoped-theme.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScopedTheme = ScopedTheme;
+exports.useSyncDesignSystemTheme = exports.syncDesignSystemTheme = exports.defaultThemeMapping = void 0;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultThemeMapping = exports.defaultThemeMapping = {
+  'midnight-gray': 'midnight-gray',
+  'alpine-light': 'alpine-light',
+  dark: 'midnight-gray',
+  light: 'alpine-light'
+};
+const syncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  if (theme && theme in themeMapping) {
+    for (const container of document.querySelectorAll('[data-ds]')) {
+      container.setAttribute('data-theme', themeMapping[theme]);
+    }
+  }
+};
+exports.syncDesignSystemTheme = syncDesignSystemTheme;
+const useSyncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  (0, _react.useLayoutEffect)(() => {
+    syncDesignSystemTheme(theme, themeMapping);
+  }, [theme, themeMapping]);
+};
+exports.useSyncDesignSystemTheme = useSyncDesignSystemTheme;
+function ScopedTheme(props) {
+  const {
+    children,
+    theme,
+    className = '',
+    themeMapping = defaultThemeMapping,
+    ...rest
+  } = props;
+  const scopedTheme = themeMapping[theme] || theme;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-ds": true,
+    "data-theme": scopedTheme,
+    className: className,
+    ...rest,
+    children: children
+  });
+}

package/cjs/text-editor/edited-text.js

@@ -7,6 +7,7 @@ exports.default = EditedText;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _slateHistory = require("slate-history");
 var _chat = require("../chat");
 var _textEditorContext = _interopRequireDefault(require("./text-editor-context"));
@@ -37,12 +38,19 @@ function EditedTextComponent({
     Slate
   } = slateReact;
   const editor = (0, _react.useMemo)(() => (0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor()))), []);
+
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing node references across editors (e.g. the same value bound to a
+  // form's TextEditor and a preview's EditedText at the same time) makes
+  // findPath throw "Unable to find the path for Slate node".
+  const slateValue = (0, _react.useMemo)(() => value ? (0, _cloneDeep.default)(value) : value, [value]);
   (0, _react.useEffect)(() => {
-    if (value && !(0, _isEqual.default)(editor.children, value)) {
+    if (slateValue && !(0, _isEqual.default)(editor.children, slateValue)) {
       // Update the cached value inside the editor
-      (0, _chat.resetNodes)(editor, value);
+      (0, _chat.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   const ariaAttrs = (0, _react.useMemo)(() => {
     return {
       'aria-label': ariaLabel
@@ -53,7 +61,7 @@ function EditedTextComponent({
     // Slate throws an error when no onChange is given, providing a noop func to avoid issues
     (0, _jsxRuntime.jsx)(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: () => undefined,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textEditorContent.default, {
         placeholder: placeholder,

package/cjs/text-editor/text-editor.js

@@ -7,6 +7,7 @@ exports.default = TextEditor;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _slateHistory = require("slate-history");
 var _formField = require("../form-field");
 var _chat = require("../chat");
@@ -79,7 +80,13 @@ function TextEditorComponent({
   }, [getCharactersCounterString]);
   const editor = (0, _react.useMemo)(() => (0, _chat.withMaxLength)(maxLength)((0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor())))), [maxLength]);
   const selection = (0, _react.useRef)(null);
-  const slateValue = value || initialValue || _textEditorConstants.TEXT_EDITOR_DEFAULT_VALUE;
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing the same node references across editors (e.g. several editors
+  // falling back to TEXT_EDITOR_DEFAULT_VALUE, or the same parent state being
+  // bound to multiple editors at once) makes findPath throw
+  // "Unable to find the path for Slate node".
+  const slateValue = (0, _react.useMemo)(() => (0, _cloneDeep.default)(value || initialValue || _textEditorConstants.TEXT_EDITOR_DEFAULT_VALUE), [value, initialValue]);
   (0, _react.useEffect)(() => {
     if (!(0, _isEqual.default)(editor.children, slateValue)) {
       // Update the cached value inside the editor

package/esm/chat/chat-message-body.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useCallback, useRef, useEffect, memo } from 'react';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import classNames from 'classnames';
 import { Editor, createEditor, Transforms, Range } from 'slate';
 import { Slate, Editable, ReactEditor, withReact } from 'slate-react';
@@ -28,8 +29,9 @@ function ChatMessageBodyBase({
   editableContentClassName,
   mentionsPropmptText,
   autoFocus,
-  value = DEFAULT_VALUE
+  value
 }) {
+  const slateValue = useMemo(() => cloneDeep(value ?? DEFAULT_VALUE), [value]);
   const anchorRef = useRef(null);
   const [target, setTarget] = useState();
   const [search, setSearch] = useState('');
@@ -46,10 +48,10 @@ function ChatMessageBodyBase({
       event.preventDefault();
       onSubmit({
         key: itemKey,
-        value
+        value: slateValue
       });
     }
-  }, [mentions, target, value, itemKey, onSubmit]);
+  }, [mentions, target, slateValue, itemKey, onSubmit]);
   const handleChange = useCallback(val => {
     onChange({
       key: itemKey,
@@ -116,14 +118,14 @@ function ChatMessageBodyBase({
     });
   }, [search]);
   useEffect(() => {
-    if (!isEqual(editor.children, value)) {
-      resetNodes(editor, value);
+    if (!isEqual(editor.children, slateValue)) {
+      resetNodes(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: handleChange,
       children: [/*#__PURE__*/_jsx("div", {
         "test-id": `chat-item-body-editable-content-${itemKey}`,

package/esm/chat/utils.js

@@ -1,4 +1,5 @@
 import { Editor, Transforms } from 'slate';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { CUSTOM_ELEMENT_TYPES } from './constants';
 export function isMentionElement(type) {
   return type === CUSTOM_ELEMENT_TYPES.mention;
@@ -26,10 +27,12 @@ export function resetNodes(editor, nodes) {
     path: [0],
     node
   }));
+
+  // Clone nodes before inserting so multiple editors never share Slate node refs.
   nodes.forEach((node, i) => editor.apply({
     type: 'insert_node',
     path: [i],
-    node
+    node: cloneDeep(node)
   }));
   const point = Editor.end(editor, []);
   Transforms.select(editor, point);

package/esm/index.d.ts

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/esm/index.js

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/esm/scoped-theme/index.d.ts

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme, } from './scoped-theme';

package/esm/scoped-theme/index.js

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme } from './scoped-theme';

package/esm/scoped-theme/scoped-theme.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultThemeMapping: {
+    'midnight-gray': string;
+    'alpine-light': string;
+    dark: string;
+    light: string;
+};
+export declare const syncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare const useSyncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare function ScopedTheme(props: {
+    children: React.ReactNode;
+    theme: keyof typeof defaultThemeMapping;
+    className?: string;
+    themeMapping?: Record<string, string>;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/esm/scoped-theme/scoped-theme.js

@@ -0,0 +1,37 @@
+import { useLayoutEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const defaultThemeMapping = {
+  'midnight-gray': 'midnight-gray',
+  'alpine-light': 'alpine-light',
+  dark: 'midnight-gray',
+  light: 'alpine-light'
+};
+export const syncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  if (theme && theme in themeMapping) {
+    for (const container of document.querySelectorAll('[data-ds]')) {
+      container.setAttribute('data-theme', themeMapping[theme]);
+    }
+  }
+};
+export const useSyncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  useLayoutEffect(() => {
+    syncDesignSystemTheme(theme, themeMapping);
+  }, [theme, themeMapping]);
+};
+export function ScopedTheme(props) {
+  const {
+    children,
+    theme,
+    className = '',
+    themeMapping = defaultThemeMapping,
+    ...rest
+  } = props;
+  const scopedTheme = themeMapping[theme] || theme;
+  return /*#__PURE__*/_jsx("div", {
+    "data-ds": true,
+    "data-theme": scopedTheme,
+    className: className,
+    ...rest,
+    children: children
+  });
+}

package/esm/text-editor/edited-text.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { withHistory } from 'slate-history';
 import { resetNodes } from '../chat';
 import TextEditorContext from './text-editor-context';
@@ -29,12 +30,19 @@ function EditedTextComponent({
     Slate
   } = slateReact;
   const editor = useMemo(() => withLinks(withHistory(withReact(createEditor()))), []);
+
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing node references across editors (e.g. the same value bound to a
+  // form's TextEditor and a preview's EditedText at the same time) makes
+  // findPath throw "Unable to find the path for Slate node".
+  const slateValue = useMemo(() => value ? cloneDeep(value) : value, [value]);
   useEffect(() => {
-    if (value && !isEqual(editor.children, value)) {
+    if (slateValue && !isEqual(editor.children, slateValue)) {
       // Update the cached value inside the editor
-      resetNodes(editor, value);
+      resetNodes(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   const ariaAttrs = useMemo(() => {
     return {
       'aria-label': ariaLabel
@@ -45,7 +53,7 @@ function EditedTextComponent({
     // Slate throws an error when no onChange is given, providing a noop func to avoid issues
     _jsx(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: () => undefined,
       children: /*#__PURE__*/_jsx(TextEditorContent, {
         placeholder: placeholder,

package/esm/text-editor/text-editor.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useContext, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { withHistory } from 'slate-history';
 import { ValidityMessages, getErrorAriaAttributes, useDefaultValidationValues } from '../form-field';
 import { resetNodes, CharactersCounter, withMaxLength } from '../chat';
@@ -71,7 +72,13 @@ function TextEditorComponent({
   }, [getCharactersCounterString]);
   const editor = useMemo(() => withMaxLength(maxLength)(withLinks(withHistory(withReact(createEditor())))), [maxLength]);
   const selection = useRef(null);
-  const slateValue = value || initialValue || TEXT_EDITOR_DEFAULT_VALUE;
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing the same node references across editors (e.g. several editors
+  // falling back to TEXT_EDITOR_DEFAULT_VALUE, or the same parent state being
+  // bound to multiple editors at once) makes findPath throw
+  // "Unable to find the path for Slate node".
+  const slateValue = useMemo(() => cloneDeep(value || initialValue || TEXT_EDITOR_DEFAULT_VALUE), [value, initialValue]);
   useEffect(() => {
     if (!isEqual(editor.children, slateValue)) {
       // Update the cached value inside the editor