@vention/machine-ui 6.0.4 → 6.1.0

package/index.esm.js

@@ -4771,6 +4771,7 @@ const useStyles$L = tss.withParams().create(({
 const getDefaultProps = (severity, setVisible) => {
   return {
     size: "medium",
+    appearance: "subtle",
     leftIcon: getAlertIcon(severity),
     onCloseButtonClick: () => setVisible(false)
   };
@@ -4870,24 +4871,25 @@ function getRootMaxWidth(isSingleLine, isFullWidth) {
   if (isSingleLine) return "inherit";
   return "560px";
 }
+function getLeftIconMarginRight(size, appearance) {
+  if (appearance === "elevated") return "16px";
+  return size === "small" ? "8px" : "12px";
+}
 const useStyles$K = tss.withParams().create(({
   isSingleLine,
   severity,
   size,
   isFullWidth,
+  appearance,
   theme,
   hasControlProps
 }) => {
   const {
-    backgroundColor,
-    borderColor,
     iconColor
   } = getAlertColors(severity, theme);
   const textSize = getFontSize$1(size);
   return {
-    root: {
-      backgroundColor: backgroundColor,
-      border: `${size === "large" ? 2 : 1}px solid var(--Border-Default-border-default, ${borderColor})`,
+    root: Object.assign(Object.assign({}, getSurfaceStyles(appearance, severity, size, theme)), {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -4899,12 +4901,11 @@ const useStyles$K = tss.withParams().create(({
       width: isFullWidth ? "100%" : "fit-content",
       minWidth: "inherit",
       maxWidth: getRootMaxWidth(isSingleLine, isFullWidth),
-      borderRadius: "4px",
       padding: getAlertPadding({
         isSingleLine,
         size
       })
-    },
+    }),
     alertGridContainer: {
       flexWrap: "nowrap",
       lineHeight: "0px",
@@ -4957,7 +4958,7 @@ const useStyles$K = tss.withParams().create(({
       item: true,
       size: size === "small" ? 16 : 24,
       width: "fit-content",
-      marginRight: size === "small" ? "8px" : "12px",
+      marginRight: getLeftIconMarginRight(size, appearance),
       alignSelf: isSingleLine ? "center" : "normal"
     },
     rightIcon: {
@@ -4986,6 +4987,25 @@ const getRootHeight = alertProps => {
   };
   return heights[alertProps.size];
 };
+const getSurfaceStyles = (appearance, severity, size, theme) => {
+  if (appearance === "elevated") {
+    return {
+      backgroundColor: theme.palette.background.surface1,
+      border: `1px solid ${theme.palette.border.default}`,
+      borderRadius: "8px",
+      boxShadow: theme.shadows[4]
+    };
+  }
+  const {
+    backgroundColor,
+    borderColor
+  } = getAlertColors(severity, theme);
+  return {
+    backgroundColor,
+    border: `${size === "large" ? 2 : 1}px solid var(--Border-Default-border-default, ${borderColor})`,
+    borderRadius: "4px"
+  };
+};
 const getAlertColors = (severity, theme) => {
   switch (severity) {
     case "warn":
@@ -11693,17 +11713,24 @@ $$5({ target: 'Iterator', proto: true, real: true, forced: someWithoutClosingOnE
   }
 });
 
+/** This is the default height of the tree item. This value only changes if you stack multiple right captions or show captions below.
+ * This is needed for Machinebuilder for virtualization.
+ */
+const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
 const VentionCollapsibleCaretButton = ({
   isVisible,
   isExpanded,
   onClick,
-  dataTestid
+  dataTestid,
+  size,
+  iconSize
 }) => {
   const {
     classes
   } = useStyles$e({
     isVisible,
-    isExpanded
+    isExpanded,
+    size
   });
   return jsx(Box$1, {
     component: "div",
@@ -11712,13 +11739,14 @@ const VentionCollapsibleCaretButton = ({
     "data-testid": dataTestid,
     "aria-expanded": isExpanded,
     children: jsx(IconCaretRightFilled, {
-      size: 16
+      size: iconSize
     })
   });
 };
 const useStyles$e = tss.withParams().create(({
   isVisible,
   isExpanded,
+  size,
   theme
 }) => {
   return {
@@ -11727,6 +11755,9 @@ const useStyles$e = tss.withParams().create(({
       cursor: "pointer",
       visibility: isVisible ? "visible" : "hidden",
       alignItems: "center",
+      justifyContent: "center",
+      width: size,
+      height: size,
       transition: "transform 0.2s",
       transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
       color: theme.palette.icon.tertiaryHover
@@ -11734,10 +11765,11 @@ const useStyles$e = tss.withParams().create(({
   };
 });
 
-/** This is the default height of the tree item. This value only changes if you stack multiple right captions or show captions below.
- * This is needed for Machinebuilder for virtualization.
- */
-const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
+/** Fixed minimum row height per size. Rows only grow past it for stacked right captions or captions below. */
+const MIN_HEIGHT_BY_SIZE = {
+  medium: DEFAULT_VENTION_TREE_ITEM_HEIGHT,
+  "xx-large": 64
+};
 const hasAnyVisibleItem = (items, isHovering) => {
   if (items === undefined || items.length === 0) return false;
   return items.some(item => !item.showOnHover) || isHovering && items.some(item => item.showOnHover);
@@ -11753,7 +11785,8 @@ const defaultProps$2 = {
   classes: {},
   children: [],
   collapsible: true,
-  selectable: true
+  selectable: true,
+  size: "medium"
 };
 const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const theme = useTheme();
@@ -11780,7 +11813,8 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     isRenaming,
     onRenaming,
     collapsible,
-    selectable
+    selectable,
+    size
   } = applyDefaultProps(inputProps, defaultProps$2);
   const [isHovering, setIsHovering] = useState(false);
   const [label, setLabel] = useState(labelText);
@@ -11789,12 +11823,13 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     cx
   } = useStyles$d({
     classesOverrides,
-    hasWarning: hasWarning,
-    isSelected: isSelected,
+    hasWarning,
+    isSelected,
     isExpanded,
     collapsible,
-    indentLevel: indentLevel,
-    selectable
+    indentLevel,
+    selectable,
+    size
   });
   const handleRenaming = () => {
     if (onRenaming) {
@@ -11832,7 +11867,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
       var _a, _b;
       return jsx(VentionBadge, {
         variant: "filled",
-        size: "small",
+        size: size === "xx-large" ? "medium" : "small",
         color: (_a = caption.color) !== null && _a !== void 0 ? _a : "slate",
         className: classes.caption,
         text: caption.text,
@@ -11871,7 +11906,9 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
           isVisible: isCaretVisible,
           isExpanded: isExpanded,
           onClick: handleIsExpandedToggle,
-          dataTestid: `${testId}-collapseButton`
+          dataTestid: `${testId}-collapseButton`,
+          size: DEFAULT_VENTION_TREE_ITEM_HEIGHT,
+          iconSize: size === "xx-large" ? 18 : 16
         }), jsx("div", {
           "data-testid": `${testId}-icon`,
           className: classes.iconContainer,
@@ -11882,7 +11919,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
           onDoubleClick: handleRenaming,
           children: jsx(Typography, {
             className: classes.label,
-            variant: "uiText12Regular",
+            variant: size === "xx-large" ? "uiText18SemiBold" : "uiText12Regular",
             title: label,
             children: isRenaming ? jsx(VentionTextInput, {
               autoFocus: true,
@@ -11927,8 +11964,9 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
         }), captionsPosition === "below" && captionsElement]
       }), captionsPosition === "right" && captionsElement, hasWarning && jsx(IconAlertTriangleFilled, {
         className: classes.alertIcon,
-        size: 16,
-        color: theme.palette.icon.warning
+        size: size === "xx-large" ? 24 : 16,
+        color: theme.palette.icon.warning,
+        "data-testid": `${testId}-alertIcon`
       })]
     }), jsx("div", {
       className: classes.childrenItems,
@@ -11943,17 +11981,13 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
   classes,
   indentLevel,
   collapsible,
-  selectable
+  selectable,
+  size
 }) => {
-  const getBackgroundColor = () => {
-    if (isSelected) return theme.palette.button.shaded;
-    return "white";
-  };
-  const backgroundColor = getBackgroundColor();
   // We use an invisible border to avoid the content from shifting when the border is shown on hover
   const invisibleBorder = `1px solid transparent`;
-  // 22 is padding per indent
-  const paddingLeft = indentLevel * 22 + 16;
+  // xx-large: 40px per indent (32px caret + 8px gap), so a child's caret sits under its parent's icon.
+  const paddingLeft = size === "xx-large" ? indentLevel * 40 + 8 : indentLevel * 22 + 16;
   // Captions render inside singleLineContainer when below the label, and directly in mainContent when on the right.
   const captionsBelow = `> .${classes.singleLineContainer} > .${classes.captionsContainer}`;
   const multipleCaptionsRight = `> .${classes.captionsContainer} > :nth-child(2)`;
@@ -11962,7 +11996,6 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       display: "flex",
       flexDirection: "column",
       cursor: selectable ? "pointer" : "default",
-      backgroundColor: theme.palette.background.default,
       width: "100%"
     },
     mainContent: {
@@ -11973,7 +12006,7 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       border: invisibleBorder,
       display: "flex",
       alignItems: "center",
-      backgroundColor: backgroundColor,
+      backgroundColor: isSelected ? theme.palette.button.shaded : "transparent",
       color: theme.palette.text.primary,
       [`&:hover .${classes.actionButton}`]: {
         visibility: "visible"
@@ -11986,7 +12019,7 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       },
       overflow: "hidden",
       gap: theme.spacing(2),
-      minHeight: DEFAULT_VENTION_TREE_ITEM_HEIGHT,
+      minHeight: MIN_HEIGHT_BY_SIZE[size],
       boxSizing: "border-box",
       // Stacked content (multiple right captions or captions below the label) needs vertical breathing room.
       [`&:has(${captionsBelow}), &:has(${multipleCaptionsRight})`]: {

package/package.json

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

package/src/lib/components/vention-alert/vention-alert-utils.d.ts

@@ -18,5 +18,6 @@ export interface VentionAlertProps {
     isCloseable?: boolean;
     isSingleLine?: boolean;
     isFullWidth?: boolean;
+    appearance?: "subtle" | "elevated";
 }
 export declare function getGapSpaceForContent(isSingleLine: boolean, size: VentionAlertProps["size"]): "0px" | "12px" | "8px";

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

@@ -1,4 +1,8 @@
 import { FC } from "react";
+/** This is the default height of the tree item. This value only changes if you stack multiple right captions or show captions below.
+ * This is needed for Machinebuilder for virtualization.
+ */
+export declare const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
 /**
  * Caret button that is used to collapse and expand the tree item
  */
@@ -7,6 +11,10 @@ interface VentionCollapsibleCaretButtonProps {
     isVisible: boolean;
     onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
     dataTestid?: string | undefined;
+    /** Width and height of the clickable box, in px. */
+    size: number;
+    /** Size of the caret icon, in px. */
+    iconSize: number;
 }
 export declare const VentionCollapsibleCaretButton: FC<VentionCollapsibleCaretButtonProps>;
 export {};

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

@@ -1,9 +1,8 @@
 import { ReactElement, MouseEvent, ForwardRefExoticComponent, RefAttributes } from "react";
+import { DEFAULT_VENTION_TREE_ITEM_HEIGHT } from "./vention-collapsible-caret-button";
 import { VentionBadgeColors } from "../vention-badge/vention-badge";
-/** This is the default height of the tree item. This value only changes if you stack multiple right captions or show captions below.
- * This is needed for Machinebuilder for virtualization.
- */
-export declare const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
+export { DEFAULT_VENTION_TREE_ITEM_HEIGHT };
 export interface TrailingElementItem {
     component: ReactElement;
     showOnHover?: boolean;
@@ -15,6 +14,7 @@ export interface VentionTreeItemCaption {
     onClick?: (e: MouseEvent) => void;
 }
 export type VentionTreeItemCaptionsPosition = "right" | "below";
+export type VentionTreeItemSize = StrictExtract<Sizes, "medium" | "xx-large">;
 interface VentionTreeItemProps {
     labelText: string;
     indentLevel?: number | undefined;
@@ -45,6 +45,8 @@ interface VentionTreeItemProps {
     collapsible?: boolean | undefined;
     /** When false, a row does not select and shows no hover highlight. The caret still works. Defaults to true. */
     selectable?: boolean | undefined;
+    /** Defaults to "medium". */
+    size?: VentionTreeItemSize | undefined;
 }
 export declare const VentionTreeItem: ForwardRefExoticComponent<VentionTreeItemProps & RefAttributes<HTMLDivElement>>;
 declare const useStyles: import("tss-react").Tss.UseStyles<{
@@ -56,5 +58,5 @@ declare const useStyles: import("tss-react").Tss.UseStyles<{
     collapsible: boolean;
     indentLevel: number;
     selectable: boolean;
+    size: VentionTreeItemSize;
 }, "caption" | "label" | "root" | "iconContainer" | "labelContainer" | "actionButton" | "trailingElement" | "trailingElementShowOnHover" | "singleLineContainer" | "captionsContainer" | "mainContent" | "actionButtonsContainer" | "showOnHover" | "childrenItems" | "alertIcon", import("tss-react/mui").MuiThemeStyleOverridesPluginParams>;
-export {};