@datarobot/design-system 30.4.0 → 30.6.0

package/esm/message/message.js

@@ -7,6 +7,7 @@ import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
 import { FontAwesomeIcon } from '../font-awesome-icon';
+import { ThinkingIcon } from './thinking-icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MESSAGE_TYPES = {
   DISABLED: 'disabled',
@@ -16,7 +17,8 @@ export const MESSAGE_TYPES = {
   SUCCESS: 'success',
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
-  EXPIRED: 'expired'
+  EXPIRED: 'expired',
+  THINKING: 'thinking'
 };
 export const MESSAGE_ICON_PLACEMENT = {
   LEFT: 'left',
@@ -80,6 +82,10 @@ function getMessageConfig(icons, type) {
         icon,
         className: 'expired'
       };
+    case MESSAGE_TYPES.THINKING:
+      return {
+        className: 'thinking'
+      };
     default:
       return {
         icon,
@@ -105,23 +111,33 @@ export function Message({
   icons = MESSAGE_ICONS
 }) {
   const messageConfig = getMessageConfig(icons, type);
-  const icon = /*#__PURE__*/_jsx(FontAwesomeIcon, {
-    icon: messageConfig.icon,
-    spin: type === MESSAGE_TYPES.IN_PROGRESS
-  });
+  const renderIcon = () => {
+    if (type === MESSAGE_TYPES.THINKING) {
+      return /*#__PURE__*/_jsx(ThinkingIcon, {
+        size: size
+      });
+    }
+    if (messageConfig.icon) {
+      return /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: messageConfig.icon,
+        spin: type === MESSAGE_TYPES.IN_PROGRESS
+      });
+    }
+    return null;
+  };
+  const icon = renderIcon();
+  const resolvedChildren = type === MESSAGE_TYPES.THINKING ? children ?? 'Thinking' : children;
   return /*#__PURE__*/_jsxs("p", {
     className: classNames('message-component', isStatus && 'status', messageConfig.className, {
       'center-status': isCentered,
       sm: size === MESSAGE_SIZES.SM
-    },
-    // global styles for now, should be moved into the components styles, once we message css usages to React
-    className, `with-${iconPlacement}-icon`),
+    }, className, `with-${iconPlacement}-icon`),
     "test-id": testId,
     id: id,
     "aria-live": "polite",
     role: messageConfig?.role,
     children: [iconPlacement === MESSAGE_ICON_PLACEMENT.LEFT && icon, /*#__PURE__*/_jsx("span", {
-      children: children
+      children: resolvedChildren
     }), iconPlacement === MESSAGE_ICON_PLACEMENT.RIGHT && icon]
   });
 }

package/esm/message/thinking-icon.d.ts

@@ -0,0 +1,12 @@
+import { ValueOf } from '../types';
+import './thinking-icon.less';
+export declare const THINKING_ICON_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type ThinkingIconSize = ValueOf<typeof THINKING_ICON_SIZES>;
+type ThinkingIconProps = {
+    size?: ThinkingIconSize;
+};
+export declare function ThinkingIcon({ size, }: ThinkingIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/message/thinking-icon.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const THINKING_ICON_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};
+// Bar geometry in natural SVG coordinates (viewBox 0 0 18.667 18).
+const BARS = [{
+  top: 0,
+  left: 0,
+  width: 9.334
+}, {
+  top: 2,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 4,
+  left: 0,
+  width: 9.334
+}, {
+  top: 6,
+  left: 14,
+  width: 4.667
+}, {
+  top: 8,
+  left: 0,
+  width: 14
+}, {
+  top: 10,
+  left: 14,
+  width: 4.667
+}, {
+  top: 12,
+  left: 0,
+  width: 9.334
+}, {
+  top: 14,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 16,
+  left: 0,
+  width: 9.334
+}];
+const BAR_HEIGHT = 2;
+
+// Staggered cascade: left backbone bars enter first, right accent bars follow.
+// Entry order: r1 → r7 → r3 → r9 → r5 → r8 → r2 → r4 → r6
+const DELAYS = [0.0, 0.62, 0.22, 0.7, 0.44, 0.76, 0.12, 0.54, 0.32];
+export function ThinkingIcon({
+  size = THINKING_ICON_SIZES.MD
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    className: classNames('thinking-icon', size),
+    viewBox: "0 0 18.667 18",
+    "aria-hidden": "true",
+    children: BARS.map((bar, i) => /*#__PURE__*/_jsx("rect", {
+      className: "bar",
+      x: bar.left,
+      y: bar.top,
+      width: bar.width,
+      height: BAR_HEIGHT
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        animationDelay: `${DELAYS[i]}s`
+      }
+    }, i))
+  });
+}

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

@@ -158,9 +158,7 @@ export default function TextEditorContent({
     useSlate
   } = slateReact;
   const editor = useSlate();
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   const ElementNode = elementRender;
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   const LeafNode = leafRender;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/expandable-content/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@datarobot/design-system/expandable-content",
+  "private": true,
+  "main": "../cjs/expandable-content",
+  "module": "../esm/expandable-content",
+  "types": "../esm/index.d.ts"
+}