@vention/machine-ui 3.38.1 → 3.40.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, linearProgressClasses, LinearProgress, InputAdornment, TextField, Radio, FormControlLabel, FormControl, Select, MenuItem, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, ListItemIcon, ListItemText, Popover, MenuList, useTheme as useTheme$1, Drawer, Tooltip, Checkbox } from '@mui/material';
+import { Typography, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, InputAdornment, TextField, Radio, FormControlLabel, FormControl, Select, MenuItem, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, ListItemIcon, ListItemText, Popover, MenuList, useTheme as useTheme$1, Drawer, Tooltip, Checkbox } from '@mui/material';
 import { IconCheck, IconAlertTriangleFilled, IconAlertTriangle, IconExclamationMark, IconExternalLink, IconX, IconInfoCircleFilled, IconCircleCheckFilled, IconChevronUp, IconChevronDown, IconInfoCircle, IconInfoSmall, IconMinus, IconPlus, IconLoader2, IconCaretRightFilled, IconChevronsRight, IconChevronsLeft, IconChevronRight } from '@tabler/icons-react';
 import { forwardRef, useState, cloneElement, useRef, useEffect, useCallback, lazy, memo, Suspense, useMemo, createContext, useContext, useImperativeHandle, Children, Fragment as Fragment$1, useReducer } from 'react';
 import { tss } from 'tss-react/mui';
@@ -4178,7 +4178,9 @@ const VentionModal = props => {
             "data-testid": ventionModalTestIds.positiveIcon
           })), props.type === "info" && jsx(IconInfoSmall, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.infoIcon
-          })), props.type === "warning" && jsx(IconAlertTriangle, Object.assign({}, iconProps, {
+          })), props.type === "loading" && jsx(CircularProgress$1, {
+            "data-testid": ventionModalTestIds.loading
+          }), props.type === "warning" && jsx(IconAlertTriangle, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.warningIcon
           })), props.type === "negative" && jsx(IconAlertTriangle, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.negativeIcon
@@ -4197,6 +4199,7 @@ const VentionModal = props => {
         "data-testid": ventionModalTestIds.modalActions,
         children: [props.secondaryButton && jsx(VentionButton, {
           size: buttonSize,
+          "data-testid": props.secondaryButton.dataTestId,
           onClick: props.secondaryButton.onClick,
           variant: props.secondaryButton.variant || "outline",
           loading: props.secondaryButton.loading,
@@ -4204,6 +4207,7 @@ const VentionModal = props => {
           fullWidth: props.buttonPosition === undefined ? true : false,
           children: props.secondaryButton.text
         }), props.primaryButton && jsx(VentionButton, {
+          "data-testid": props.primaryButton.dataTestId,
           size: buttonSize,
           onClick: props.primaryButton.onClick,
           variant: props.primaryButton.variant || "filled",
@@ -4251,7 +4255,7 @@ const useStyles$w = tss.withParams().create(({
     statusCircle: {
       width: status.containerSize,
       height: status.containerSize,
-      display: "flex",
+      display: type === "loading" ? "block" : "flex",
       justifyContent: "center",
       alignItems: "center",
       borderRadius: "50%",
@@ -4303,7 +4307,7 @@ const getColors$2 = (type, theme) => {
         statusContainerColor: theme.palette.background.destructive,
         statusGlowColor: theme.palette.background.subtleDestructive
       };
-    case "none":
+    default:
       return {
         statusContainerColor: "transparent",
         statusGlowColor: "transparent"
@@ -4339,6 +4343,7 @@ const getBodyTextTypography = (modalSize, isTouchDevice) => {
 const ventionModalTestIds = {
   positiveIcon: "vention-modal-positive-icon",
   infoIcon: "vention-modal-info-icon",
+  loading: "vention-modal-loading-icon",
   warningIcon: "vention-modal-warning-icon",
   negativeIcon: "vention-modal-negative-icon",
   modalActions: "vention-modal-actions"
@@ -4928,7 +4933,7 @@ const VentionSteps = props => {
     classes,
     cx
   } = useStyles$u(props);
-  const typographyVariants = getTypographyVariants$1(props.size);
+  const typographyVariants = getTypographyVariants(props.size);
   let variant = props.variant;
   if (props.size === "small" && variant === "number") {
     console.warn("The design system doesn't support vention-steps bullet numbering for the requested size. Defaulting to dots style.");
@@ -5121,7 +5126,7 @@ const ElementTestIds = {
   Description: "step-description",
   CheckIcon: "step-check-icon"
 };
-const getTypographyVariants$1 = size => {
+const getTypographyVariants = size => {
   switch (size) {
     case "small":
       return {
@@ -5302,31 +5307,37 @@ const getInputPaddingStyles = (size, theme) => {
 const typographyNameFromSizeMap = {
   "x-small": {
     label: "uiText12SemiBold",
+    labelDiminished: "uiText12Regular",
     text: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   small: {
     label: "uiText12SemiBold",
+    labelDiminished: "uiText12Regular",
     text: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   medium: {
     label: "uiText14SemiBold",
+    labelDiminished: "uiText14Regular",
     text: "uiText14Regular",
     helperText: "uiText12Regular"
   },
   large: {
     label: "uiText14SemiBold",
+    labelDiminished: "uiText14Regular",
     text: "uiText14Regular",
     helperText: "uiText12Regular"
   },
   "x-large": {
     label: "heading18SemiBold",
+    labelDiminished: "paragraph18Regular",
     text: "paragraph18Regular",
     helperText: "uiText12Regular"
   },
   "xx-large": {
     label: "hmiText20SemiBold",
+    labelDiminished: "hmiText20Regular",
     text: "hmiText22Regular",
     helperText: "paragraph18Regular"
   }
@@ -5334,6 +5345,7 @@ const typographyNameFromSizeMap = {
 const getTypography = (size, theme) => {
   return {
     label: theme.typography[typographyNameFromSizeMap[size].label],
+    labelDiminished: theme.typography[typographyNameFromSizeMap[size].labelDiminished],
     text: theme.typography[typographyNameFromSizeMap[size].text],
     helperText: theme.typography[typographyNameFromSizeMap[size].helperText]
   };
@@ -9417,6 +9429,10 @@ const useStyles$a = tss.withParams().create(({
  * This is needed for Machinebuilder for virtualization.
  */
 const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
+const hasAnyVisibleItem = (items, isHovering) => {
+  if (items === undefined || items.length === 0) return false;
+  return items.some(item => !item.showOnHover) || isHovering && items.some(item => item.showOnHover);
+};
 const defaultProps$2 = {
   indentLevel: 0,
   hasWarning: false,
@@ -9440,6 +9456,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     captionsRight,
     onLabelChange,
     actionButtons,
+    trailingElements,
     onClick,
     indentLevel,
     onContextMenu,
@@ -9484,10 +9501,10 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const handleRename = newLabel => {
     onLabelChange === null || onLabelChange === void 0 ? void 0 : onLabelChange(newLabel);
   };
-  const showActionButtonContainer = useCallback(() => {
-    if (actionButtons === undefined) return false;
-    return actionButtons.some(button => !button.showOnHover) || isHovering && actionButtons.some(button => button.showOnHover);
-  }, [actionButtons, isHovering]);
+  const hasVisibleTrailingOrActionItems = hasAnyVisibleItem(trailingElements, isHovering) || hasAnyVisibleItem(actionButtons, isHovering);
+  const handleTrailingElementClick = event => {
+    event.stopPropagation();
+  };
   const handleOnClick = event => {
     event.stopPropagation();
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -9551,10 +9568,15 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
               }
             }) : label
           })
-        }), showActionButtonContainer() && jsx("div", {
+        }), hasVisibleTrailingOrActionItems && jsxs("div", {
           className: classes.actionButtonsContainer,
           "data-testid": "actionButtonContainer",
-          children: actionButtons.map((button, index) => {
+          children: [trailingElements === null || trailingElements === void 0 ? void 0 : trailingElements.map((trailingElement, index) => jsx("div", {
+            className: cx(classes.trailingElement, trailingElement.showOnHover && classes.trailingElementShowOnHover),
+            "data-testid": `trailingElement-${index}`,
+            onClick: handleTrailingElementClick,
+            children: trailingElement.component
+          }, index)), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((button, index) => {
             const handleButtonOnClick = event => {
               event.stopPropagation();
               button.onClick(event);
@@ -9566,7 +9588,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
               onClick: handleButtonOnClick,
               children: button.component
             }, index);
-          })
+          })]
         })]
       }), captionsRight && captionsRight.length > 0 && jsx("div", {
         className: classes.captionRightContainer,
@@ -9640,6 +9662,9 @@ const useStyles$9 = tss.withParams().withNestedSelectors().create(({
       [`&:hover .${classes.actionButton}`]: {
         visibility: "visible"
       },
+      [`&:hover .${classes.trailingElementShowOnHover}`]: {
+        visibility: "visible"
+      },
       [`&:hover`]: {
         border: isSelected ? invisibleBorder : `1px solid ${theme.palette.border.blueSelected}`
       },
@@ -9718,6 +9743,17 @@ const useStyles$9 = tss.withParams().withNestedSelectors().create(({
       height: "24px",
       flexShrink: 0
     },
+    trailingElement: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      flexShrink: 0
+    },
+    trailingElementShowOnHover: {
+      visibility: "hidden"
+    },
     showOnHover: {
       visibility: "hidden",
       [`${classes.actionButton}:hover &`]: {
@@ -11286,6 +11322,7 @@ const useStyles$1 = tss.withParams().create(({
 const defaultProps = {
   variant: "outlined",
   checkboxSize: "large",
+  labelVariant: "default",
   checkboxPosition: "left",
   textAlign: "left",
   disabled: false,
@@ -11295,7 +11332,8 @@ const defaultProps = {
 const VentionCheckbox = checkboxProps => {
   const props = applyDefaultProps(checkboxProps, defaultProps);
   const {
-    classes
+    classes,
+    cx
   } = useStyles({
     variant: props.variant,
     checkboxSize: props.checkboxSize,
@@ -11303,37 +11341,31 @@ const VentionCheckbox = checkboxProps => {
     textAlign: props.textAlign,
     checkboxPosition: props.checkboxPosition
   });
-  // removing props that would be unknown to FormControlLabel Component
-  const {
-      labelText,
-      helperText,
-      checkboxSize,
-      checkboxPosition,
-      variant,
-      textAlign
-    } = props;
-    __rest(props, ["labelText", "helperText", "checkboxSize", "checkboxPosition", "variant", "textAlign"]);
+  const typographyVariant = props.labelVariant === "default" ? typographyNameFromSizeMap[props.checkboxSize].labelDiminished : typographyNameFromSizeMap[props.checkboxSize].label;
   const sizeStyle = getSizeStyles(props.checkboxSize);
   const renderLabel = () => {
     if (!props.labelText && !props.helperText) {
       return null;
     }
-    const typography = getTypographyVariants(props.checkboxSize);
     return jsxs(Stack, {
       className: classes.textContainer,
       children: [props.labelText && jsx(Typography, {
-        variant: typography.labelVariant,
-        className: `${classes.labelText} ${props.disabled ? "Mui-disabled" : ""}`,
+        variant: typographyVariant,
+        className: cx(classes.labelText, {
+          "Mui-disabled": props.disabled
+        }),
         children: props.labelText
       }), props.labelText && props.helperText && jsx(Typography, {
-        variant: typography.helperVariant,
-        className: `${classes.helperText} ${props.disabled ? "Mui-disabled" : ""}`,
+        variant: typographyVariant,
+        className: cx(classes.helperText, {
+          "Mui-disabled": props.disabled
+        }),
         children: props.helperText
       })]
     });
   };
   return jsxs(Stack, {
-    className: `${classes.root} ${props.className || ""}`,
+    className: cx(classes.root, props.className),
     children: [jsx(Box$1, {
       className: classes.checkboxContainer,
       children: jsx(Checkbox, {
@@ -11371,7 +11403,6 @@ const useStyles = tss.withParams().create(({
 }) => {
   const checkboxColors = getCheckboxColors(variant, disabled);
   const sizeStyle = getSizeStyles(checkboxSize);
-  getTypographyVariants(checkboxSize);
   return {
     root: {
       width: "100%",
@@ -11517,26 +11548,6 @@ const getCheckboxColors = (variant, disabled) => {
       };
   }
 };
-const getTypographyVariants = checkboxSize => {
-  switch (checkboxSize) {
-    case "small":
-      return {
-        labelVariant: "uiText12Regular",
-        helperVariant: "uiText12Regular"
-      };
-    case "medium":
-      return {
-        labelVariant: "uiText14Regular",
-        helperVariant: "uiText12Regular"
-      };
-    case "large":
-    default:
-      return {
-        labelVariant: "uiText14Regular",
-        helperVariant: "uiText12Regular"
-      };
-  }
-};
 
 const SIZE_CONFIG = {
   large: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "3.38.1",
+  "version": "3.40.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/shared/styles/input-styles.d.ts

@@ -8,9 +8,10 @@ export declare const getInputPaddingStyles: (size: Sizes, theme: Theme) => {
     paddingLeft: string;
     paddingRight: string;
 };
-export declare const typographyNameFromSizeMap: Record<"x-small" | "small" | "medium" | "large" | "x-large" | "xx-large", Record<"label" | "text" | "helperText", TypographyOwnProps["variant"]>>;
+export declare const typographyNameFromSizeMap: Record<"x-small" | "small" | "medium" | "large" | "x-large" | "xx-large", Record<"label" | "labelDiminished" | "text" | "helperText", TypographyOwnProps["variant"]>>;
 export declare const getTypography: (size: Sizes, theme: Theme) => {
     label: any;
+    labelDiminished: any;
     text: any;
     helperText: any;
 };

package/src/lib/components/vention-checkbox/vention-checkbox.d.ts

@@ -2,6 +2,7 @@
 import { FormControlLabelProps } from "@mui/material";
 import "../../theme/machine-ui-theme";
 export type VentionCheckboxSizes = "small" | "medium" | "large";
+export type VentionCheckboxLabelVariant = "default" | "bold";
 export type VentionCheckboxVariantStyle = "outlined";
 export type VentionCheckboxPosition = "left" | "right";
 export type VentionCheckboxTextAlign = "left" | "center" | "right";
@@ -9,6 +10,7 @@ export interface VentionCheckboxProps extends Omit<FormControlLabelProps, "contr
     labelText?: string;
     helperText?: string;
     variant?: VentionCheckboxVariantStyle;
+    labelVariant?: VentionCheckboxLabelVariant;
     checkboxSize?: VentionCheckboxSizes;
     checkboxPosition?: VentionCheckboxPosition;
     textAlign?: VentionCheckboxTextAlign;

package/src/lib/components/vention-modal/vention-modal.d.ts

@@ -8,7 +8,7 @@ export interface VentionModalProps {
      * This can be a simple string or your own React Component.
      */
     body: string | React.ReactElement;
-    type: "positive" | "info" | "warning" | "negative" | "none";
+    type: "positive" | "info" | "warning" | "negative" | "loading" | "none";
     modalSize?: VentionModalBaseProps["modalSize"];
     isTouchDevice?: boolean;
     isOpen: VentionModalBaseProps["isOpen"];
@@ -20,6 +20,7 @@ export interface VentionModalProps {
         variant?: VentionButtonProps["variant"];
         loading?: VentionButtonProps["loading"];
         disabled?: VentionButtonProps["disabled"];
+        dataTestId?: string;
     };
     secondaryButton?: {
         text: string;
@@ -27,6 +28,7 @@ export interface VentionModalProps {
         variant?: VentionButtonProps["variant"];
         loading?: VentionButtonProps["loading"];
         disabled?: VentionButtonProps["disabled"];
+        dataTestId?: string;
     };
     backDropClickClosable?: boolean;
     /**
@@ -44,6 +46,7 @@ export declare const VentionModal: (props: VentionModalProps) => import("react/j
 export declare const ventionModalTestIds: {
     positiveIcon: string;
     infoIcon: string;
+    loading: string;
     warningIcon: string;
     negativeIcon: string;
     modalActions: string;

package/src/lib/components/vention-tree-item/vention-tree-item.d.ts

@@ -3,6 +3,10 @@ import { ReactElement, MouseEvent, ForwardRefExoticComponent, RefAttributes } fr
  * This is needed for Machinebuilder for virtualization.
  */
 export declare const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
+export interface TrailingElementItem {
+    component: ReactElement;
+    showOnHover?: boolean;
+}
 interface VentionTreeItemProps {
     labelText: string;
     indentLevel?: number | undefined;
@@ -18,6 +22,8 @@ interface VentionTreeItemProps {
         showOnHover?: boolean;
         onClick: (e: MouseEvent) => void;
     }[] | undefined;
+    /** React elements (e.g. icons with tooltips) rendered in the same area as action buttons but without button styling. */
+    trailingElements?: TrailingElementItem[] | undefined;
     onClick?: ((e: MouseEvent) => void) | undefined;
     onExpansionChange?: ((isExpanded: boolean) => void) | undefined;
     onLabelChange?: ((newLabel: string) => void) | undefined;
@@ -42,5 +48,5 @@ declare const useStyles: import("tss-react").Tss.UseStyles<{
     isExpanded: boolean;
     captionsRight: VentionTreeItemProps["captionsRight"];
     indentLevel: number;
-}, "actionButton" | "root" | "mainContent" | "singleLineContainer" | "iconContainer" | "labelContainer" | "label" | "captionRightContainer" | "captionRight" | "captionRightLabel" | "clickableCaptionRight" | "actionButtonsContainer" | "showOnHover" | "childrenItems" | "alertIcon", import("tss-react/mui").MuiThemeStyleOverridesPluginParams>;
+}, "actionButton" | "trailingElement" | "trailingElementShowOnHover" | "root" | "mainContent" | "singleLineContainer" | "iconContainer" | "labelContainer" | "label" | "captionRightContainer" | "captionRight" | "captionRightLabel" | "clickableCaptionRight" | "actionButtonsContainer" | "showOnHover" | "childrenItems" | "alertIcon", import("tss-react/mui").MuiThemeStyleOverridesPluginParams>;
 export {};