@datarobot/design-system 30.4.0 → 30.6.0

package/js/bundle/index.d.ts

@@ -174,6 +174,9 @@ export { DropdownMenu, DropdownMenuContent, DropdownItem, DropdownTrigger, Dropd
 export type { EditableTextProps, EditableTextControlledProps, EditModeProps, TextModeProps, };
 export { EditableText, EditableTextControlled };
 
+export type { ExpandableContentProps };
+export { ExpandableContent };
+
 export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, FileTreeLoading, };
 export type { FileTreeItemContentComponent, FileTreeFileComponentProps, FileTreeFolderComponentProps, FileTreeItemProps, FileTreeProps, FileTreeItemActionsActions, FileTreeItemActionsProps, FileTreeItemContentType, FileTreeItemContentProps, FileNodeType, FileTreeType, };
 
@@ -2595,6 +2598,22 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
 }
 export {};
 
+import './expandable-content.less';
+export type ExpandableContentProps = {
+        /** Content to render */
+        children: React.ReactNode;
+        /** Maximum height in pixels. When content exceeds this height it is clipped and a Show more/Show less button appears */
+        maxHeight: number;
+        /** Additional CSS class applied to the wrapper */
+        className?: string;
+};
+/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
+    * @midnight-gray-supported
+    * @alpine-light-supported
+    */
+const ExpandableContent: React.FC<ExpandableContentProps>;
+export { ExpandableContent };
+
 type ExportButtonProps = ButtonProps & {
     onExport: () => void;
     exportText?: string;
@@ -3307,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: {
@@ -3329,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: {
@@ -3898,9 +3919,15 @@ export const LoadingIcon: ({ message, id, testId, className, }: LoadingIconProps
 
 import './markdown.less';
 type Props = {
-    className?: string;
-    children?: React.ReactNode;
+        className?: string;
+        children?: React.ReactNode;
+        /** If set, content will be clipped to this height and a Show more/Show less button will appear */
+        maxHeight?: number;
 };
+/** Renders markdown content as HTML with support for GFM, math, and syntax highlighting.
+    * @midnight-gray-supported
+    * @alpine-light-supported
+    */
 const Markdown: React.FC<Props>;
 export { Markdown };
 
@@ -3914,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";
@@ -3940,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.4.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);
 }
@@ -8440,6 +8494,13 @@ td.rdtYear {
   max-width: 40rem;
 }
 
+/*!******************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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/expandable-content/expandable-content.less ***!
+  \******************************************************************************************************************************************************************************************************************************************************************/
+.expandable-content .expandable-content-toggle {
+  margin-top: 0.5rem;
+}
+
 /*!************************************************************************************************************************************************************************************************************************************************!*\
   !*** 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/file-tree/file-tree.less ***!
   \************************************************************************************************************************************************************************************************************************************************/