@vention/machine-ui 3.38.1 → 3.39.0

package/index.esm.js

@@ -4197,6 +4197,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 +4205,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",
@@ -4928,7 +4930,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 +5123,7 @@ const ElementTestIds = {
   Description: "step-description",
   CheckIcon: "step-check-icon"
 };
-const getTypographyVariants$1 = size => {
+const getTypographyVariants = size => {
   switch (size) {
     case "small":
       return {
@@ -5302,31 +5304,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 +5342,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 +9426,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 +9453,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     captionsRight,
     onLabelChange,
     actionButtons,
+    trailingElements,
     onClick,
     indentLevel,
     onContextMenu,
@@ -9484,10 +9498,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 +9565,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 +9585,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
               onClick: handleButtonOnClick,
               children: button.component
             }, index);
-          })
+          })]
         })]
       }), captionsRight && captionsRight.length > 0 && jsx("div", {
         className: classes.captionRightContainer,
@@ -9640,6 +9659,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 +9740,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 +11319,7 @@ const useStyles$1 = tss.withParams().create(({
 const defaultProps = {
   variant: "outlined",
   checkboxSize: "large",
+  labelVariant: "default",
   checkboxPosition: "left",
   textAlign: "left",
   disabled: false,
@@ -11295,7 +11329,8 @@ const defaultProps = {
 const VentionCheckbox = checkboxProps => {
   const props = applyDefaultProps(checkboxProps, defaultProps);
   const {
-    classes
+    classes,
+    cx
   } = useStyles({
     variant: props.variant,
     checkboxSize: props.checkboxSize,
@@ -11303,37 +11338,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 +11400,6 @@ const useStyles = tss.withParams().create(({
 }) => {
   const checkboxColors = getCheckboxColors(variant, disabled);
   const sizeStyle = getSizeStyles(checkboxSize);
-  getTypographyVariants(checkboxSize);
   return {
     root: {
       width: "100%",
@@ -11517,26 +11545,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.39.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

@@ -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;
     /**

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 {};