@datarobot/design-system 30.5.0 → 30.6.0

package/js/bundle/index.d.ts

@@ -3326,6 +3326,7 @@ export const VALIDATION_RULE_TYPES: {
     readonly IN_PROGRESS: "in-progress";
     readonly EXPIRED: "expired";
     readonly DISABLED: "disabled";
+    readonly THINKING: "thinking";
 };
 export type ValidationRuleTypes = ValueOf<typeof VALIDATION_RULE_TYPES>;
 export const MESSAGE_DISPLAY_LOCATION: {
@@ -3348,6 +3349,7 @@ export type VALIDATION_VALUES = {
     [VALIDATION_RULE_TYPES.IN_PROGRESS]?: string;
     [VALIDATION_RULE_TYPES.EXPIRED]?: string;
     [VALIDATION_RULE_TYPES.DISABLED]?: string;
+    [VALIDATION_RULE_TYPES.THINKING]?: string;
 };
 export const useDefaultValidationValues: () => VALIDATION_VALUES;
 export const INPUT_TYPES: {
@@ -3939,6 +3941,7 @@ export const MESSAGE_TYPES: {
         readonly SUCCESS_INFO: "success-info";
         readonly IN_PROGRESS: "in-progress";
         readonly EXPIRED: "expired";
+        readonly THINKING: "thinking";
 };
 export const MESSAGE_ICON_PLACEMENT: {
         readonly LEFT: "left";
@@ -3965,7 +3968,7 @@ type Icons = {
         [key: string]: IconLookup;
 };
 export type MessageProps = {
-        children: ReactNode;
+        children?: ReactNode;
         className?: string;
         testId?: string;
         /** Identifies the type of the message */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "30.5.0",
+  "version": "30.6.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -522,6 +522,7 @@
   --message-color-in-progress: var(--text-secondary);
   --message-color-expired: var(--text-secondary);
   --message-color-disabled: var(--text-secondary);
+  --message-color-thinking: var(--text-secondary);
   /*#endregion */
   /*#region Modal */
   --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
@@ -3043,6 +3044,56 @@ popout[data-popper-placement^='right']::after,
   margin-left: 0.25rem;
 }
 
+/*!**************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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/message/thinking-icon.less ***!
+  \**************************************************************************************************************************************************************************************************************************************************/
+.thinking-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.thinking-icon.md {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.thinking-icon.sm {
+  height: 1rem;
+  width: 1rem;
+}
+.thinking-icon .bar {
+  fill: currentColor;
+  transform-box: fill-box;
+  transform-origin: left center;
+  animation-name: thinking-wipe;
+  animation-duration: 2.4s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-iteration-count: infinite;
+  animation-fill-mode: backwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .thinking-icon .bar {
+    animation: none;
+    transform: scaleX(1);
+  }
+}
+@keyframes thinking-wipe {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+  20% {
+    transform: translateX(0) scaleX(1);
+  }
+  65% {
+    transform: translateX(0) scaleX(1);
+  }
+  83% {
+    transform: translateX(100%) scaleX(0);
+  }
+  100% {
+    transform: translateX(100%) scaleX(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/message/message.less ***!
   \********************************************************************************************************************************************************************************************************************************************/
@@ -3052,7 +3103,7 @@ popout[data-popper-placement^='right']::after,
   font-weight: var(--message-font-weight);
   line-height: 1.25rem;
 }
-.message-component * + * {
+.message-component > * + * {
   margin-left: 0.5rem;
 }
 .message-component.with-right-icon {
@@ -3083,6 +3134,9 @@ popout[data-popper-placement^='right']::after,
 .message-component.disabled {
   color: var(--message-color-disabled);
 }
+.message-component.thinking {
+  color: var(--message-color-thinking);
+}
 .message-component.status span {
   color: var(--message-text-color);
 }