@vention/machine-ui 5.30.20 → 6.0.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography, useTheme, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, Skeleton, InputAdornment, TextField, MenuList, MenuItem, ListItemIcon, ListItemText, Popover, Popper, Radio, FormControlLabel, FormControl, Select, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, Drawer, Autocomplete, Tooltip, Checkbox } from '@mui/material';
+import { Typography, useTheme, Button, Stack, Box as Box$1, Grid, darken, alpha, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, Skeleton, InputAdornment, TextField, MenuList, MenuItem, ListItemIcon, ListItemText, Popover, Popper, Radio, FormControlLabel, FormControl, Select, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, Drawer, Autocomplete, 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 * as React from 'react';
 import { lazy, memo, Suspense, forwardRef, useState, cloneElement, useRef, useEffect, useCallback, createContext, useContext, useImperativeHandle, useMemo, Children, Fragment as Fragment$1, useReducer, useLayoutEffect } from 'react';
@@ -6086,6 +6086,8 @@ function getVentionAvatarColors(color, variant, theme) {
   return avatarStyleMap[color][variant](theme);
 }
 
+/** How much a clickable badge's background darkens on hover. */
+const HOVER_DARKEN_AMOUNT = 0.05;
 const VentionBadge = props => {
   const {
     classes,
@@ -6093,11 +6095,13 @@ const VentionBadge = props => {
   } = useStyles$I({
     size: props.size,
     color: props.color,
-    variant: props.variant
+    variant: props.variant,
+    clickable: !!props.onClick
   });
   return jsxs("div", {
     className: cx(classes.root, props.className),
     "data-testid": props["data-testid"],
+    onClick: props.onClick,
     children: [props.iconLeft, jsx(Typography, {
       textAlign: "center",
       variant: getBadgeTypographyVariant(props.size),
@@ -6113,6 +6117,7 @@ const useStyles$I = tss.withParams().create(({
   size,
   color,
   variant,
+  clickable,
   theme
 }) => {
   const height = getBadgeHeight(size);
@@ -6123,7 +6128,7 @@ const useStyles$I = tss.withParams().create(({
     textColor
   } = getVentionBadgeColors(color, variant, theme);
   return {
-    root: {
+    root: Object.assign({
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -6132,12 +6137,18 @@ const useStyles$I = tss.withParams().create(({
       padding,
       background,
       color: textColor,
-      border: borderColor && `0.5px solid ${borderColor}`,
+      border: `0.5px solid ${borderColor}`,
       borderRadius: size === "large" ? 6 : 4,
       maxWidth: "fit-content",
       whiteSpace: "nowrap",
       overflow: "hidden"
-    }
+    }, clickable && {
+      cursor: "pointer",
+      "&:hover": {
+        // Badges without a background (outlined) get a translucent black to match.
+        background: background ? darken(background, HOVER_DARKEN_AMOUNT) : alpha(theme.palette.common.black, HOVER_DARKEN_AMOUNT)
+      }
+    })
   };
 });
 const getBadgeTypographyVariant = size => {
@@ -6195,7 +6206,7 @@ const badgeStyleMap = {
   blue: {
     filled: theme => ({
       background: theme.palette.background.blue,
-      borderColor: null,
+      borderColor: theme.palette.background.blue,
       textColor: theme.palette.common.white
     }),
     subtle: theme => ({
@@ -6212,7 +6223,7 @@ const badgeStyleMap = {
   green: {
     filled: theme => ({
       background: theme.palette.background.success,
-      borderColor: null,
+      borderColor: theme.palette.background.success,
       textColor: theme.palette.common.white
     }),
     subtle: theme => ({
@@ -6229,7 +6240,7 @@ const badgeStyleMap = {
   yellow: {
     filled: theme => ({
       background: theme.palette.background.warning,
-      borderColor: null,
+      borderColor: theme.palette.background.warning,
       textColor: theme.palette.common.black
     }),
     subtle: theme => ({
@@ -6245,9 +6256,9 @@ const badgeStyleMap = {
   },
   slate: {
     filled: theme => ({
-      background: theme.palette.background.slate,
-      borderColor: null,
-      textColor: theme.palette.common.white
+      background: theme.palette.background.mutedSlate,
+      borderColor: theme.palette.background.mutedSlate,
+      textColor: theme.palette.text.primary
     }),
     subtle: theme => ({
       background: theme.palette.background.subtleSlate,
@@ -11723,7 +11734,7 @@ const useStyles$e = tss.withParams().create(({
   };
 });
 
-/** This is the default height of the tree item. This value only changes if you stack multiple captionRight elements.
+/** 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;
@@ -11738,6 +11749,7 @@ const defaultProps$2 = {
   isSelected: false,
   isExpanded: true,
   isRenaming: false,
+  captionsPosition: "right",
   classes: {},
   children: [],
   collapsible: true,
@@ -11752,7 +11764,8 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     classes: classesOverrides,
     hasWarning,
     isSelected,
-    captionsRight,
+    captions,
+    captionsPosition,
     onLabelChange,
     actionButtons,
     trailingElements,
@@ -11779,7 +11792,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     hasWarning: hasWarning,
     isSelected: isSelected,
     isExpanded,
-    captionsRight: captionsRight,
+    collapsible,
     indentLevel: indentLevel,
     selectable
   });
@@ -11812,6 +11825,25 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
   };
   const isCaretVisible = Children.count(children) > 0;
   const testId = dataTestid !== null && dataTestid !== void 0 ? dataTestid : "vention-tree-item";
+  const captionsElement = captions && captions.length > 0 && jsx("div", {
+    className: classes.captionsContainer,
+    "data-testid": `${testId}-captions`,
+    children: captions.map((caption, index) => {
+      var _a, _b;
+      return jsx(VentionBadge, {
+        variant: "filled",
+        size: "small",
+        color: (_a = caption.color) !== null && _a !== void 0 ? _a : "slate",
+        className: classes.caption,
+        text: caption.text,
+        onClick: caption.onClick ? event => {
+          event.stopPropagation();
+          caption.onClick(event);
+        } : undefined,
+        "data-testid": `${testId}-${(_b = caption.testId) !== null && _b !== void 0 ? _b : `caption-${index}`}`
+      }, index);
+    })
+  });
   return jsxs("div", {
     className: classes.root,
     onClick: handleOnClick,
@@ -11892,31 +11924,8 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
               children: button.component
             }, index);
           })]
-        })]
-      }), captionsRight && captionsRight.length > 0 && jsx("div", {
-        className: classes.captionRightContainer,
-        "data-testid": `${testId}-captionRightContainer`,
-        children: captionsRight.map((caption, index) => {
-          var _a;
-          return jsx("div", {
-            className: cx(classes.captionRight, !!caption.onClick && classes.clickableCaptionRight),
-            onClick: caption.onClick ? event => {
-              event.stopPropagation();
-              caption.onClick(event);
-            } : undefined,
-            style: {
-              color: caption.color
-            },
-            "data-testid": `${testId}-${(_a = caption.testId) !== null && _a !== void 0 ? _a : `captionRight-${index}`}`,
-            children: jsx(Typography, {
-              className: cx(classes.label, classes.captionRightLabel),
-              variant: "uiTableNumbers12Reg",
-              title: caption.text,
-              children: caption.text
-            })
-          }, index);
-        })
-      }), hasWarning && jsx(IconAlertTriangleFilled, {
+        }), captionsPosition === "below" && captionsElement]
+      }), captionsPosition === "right" && captionsElement, hasWarning && jsx(IconAlertTriangleFilled, {
         className: classes.alertIcon,
         size: 16,
         color: theme.palette.icon.warning
@@ -11933,7 +11942,7 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
   theme,
   classes,
   indentLevel,
-  captionsRight,
+  collapsible,
   selectable
 }) => {
   const getBackgroundColor = () => {
@@ -11945,8 +11954,9 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
   const invisibleBorder = `1px solid transparent`;
   // 22 is padding per indent
   const paddingLeft = indentLevel * 22 + 16;
-  // Check if we have multiple captions
-  const hasMultipleCaptions = captionsRight && captionsRight.length > 1;
+  // 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)`;
   return {
     root: {
       display: "flex",
@@ -11956,8 +11966,8 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       width: "100%"
     },
     mainContent: {
-      paddingTop: hasMultipleCaptions ? "5px" : "0px",
-      paddingBottom: hasMultipleCaptions ? "5px" : "0px",
+      paddingTop: "0px",
+      paddingBottom: "0px",
       paddingLeft: `${paddingLeft}px`,
       paddingRight: theme.spacing(3),
       border: invisibleBorder,
@@ -11977,15 +11987,45 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       overflow: "hidden",
       gap: theme.spacing(2),
       minHeight: DEFAULT_VENTION_TREE_ITEM_HEIGHT,
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      // Stacked content (multiple right captions or captions below the label) needs vertical breathing room.
+      [`&:has(${captionsBelow}), &:has(${multipleCaptionsRight})`]: {
+        paddingTop: "5px",
+        paddingBottom: "5px"
+      },
+      [`&:has(${multipleCaptionsRight}) > .${classes.singleLineContainer}`]: {
+        alignSelf: "flex-start"
+      },
+      [`& > .${classes.captionsContainer}`]: {
+        flexDirection: "column",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        gap: theme.spacing(2),
+        maxWidth: "80px"
+      }
     },
     singleLineContainer: {
       display: "flex",
       alignItems: "center",
       gap: theme.spacing(2),
       flex: 1,
-      alignSelf: hasMultipleCaptions ? "flex-start" : "center",
-      overflow: "hidden"
+      alignSelf: "center",
+      overflow: "hidden",
+      // With captions below, a grid keeps [caret] icon label [trailing items] on row 1 and puts the
+      // captions on row 2, starting under the icon. Trailing items land in an implicit column.
+      [`&:has(> .${classes.captionsContainer})`]: {
+        display: "grid",
+        gridTemplateColumns: collapsible ? "auto auto minmax(0, 1fr)" : "auto minmax(0, 1fr)",
+        gridAutoColumns: "auto",
+        rowGap: theme.spacing(1)
+      },
+      [`& > .${classes.captionsContainer}`]: {
+        gridRow: 2,
+        gridColumn: collapsible ? "2 / -1" : "1 / -1",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: theme.spacing(1)
+      }
     },
     iconContainer: {
       display: "flex",
@@ -12004,37 +12044,14 @@ const useStyles$d = tss.withParams().withNestedSelectors().create(({
       whiteSpace: "nowrap",
       userSelect: "none"
     },
-    captionRightContainer: {
+    captionsContainer: {
       display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-end",
-      justifyContent: "center",
-      overflow: "hidden",
-      gap: theme.spacing(2),
-      maxWidth: "80px"
+      overflow: "hidden"
     },
-    captionRight: {
-      padding: theme.spacing(0, 1),
-      borderRadius: "2px",
+    caption: {
       overflow: "hidden",
       textOverflow: "ellipsis",
-      maxWidth: "100%",
-      height: "16px",
-      color: theme.palette.text.secondary,
-      display: "flex",
-      alignItems: "center",
-      boxSizing: "border-box"
-    },
-    captionRightLabel: {
-      fontSize: "10px"
-    },
-    clickableCaptionRight: {
-      cursor: "pointer",
-      backgroundColor: COLORS.slate[200],
-      "&:hover": {
-        background: COLORS.slate[300],
-        color: theme.palette.text.primary
-      }
+      maxWidth: "100%"
     },
     actionButtonsContainer: {
       gap: theme.spacing(1),

package/package.json

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

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

@@ -1,4 +1,5 @@
 import { Theme } from "@mui/material";
+import { MouseEvent } from "react";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 type VentionBadgeSizes = StrictExtract<Sizes, "small" | "medium" | "large" | "xx-large">;
 export type VentionBadgeVariants = "filled" | "subtle" | "outlined";
@@ -11,11 +12,12 @@ interface VentionBadgeProps {
     iconLeft?: React.ReactNode;
     className?: string;
     "data-testid"?: string;
+    onClick?: ((event: MouseEvent) => void) | undefined;
 }
 export declare const VentionBadge: (props: VentionBadgeProps) => import("react/jsx-runtime").JSX.Element;
 type BadgeStyle = {
     background: string | null;
-    borderColor: string | null;
+    borderColor: string;
     textColor: string;
 };
 export declare const getVentionBadgeColors: (color: VentionBadgeColors, variant: VentionBadgeVariants, theme: Theme) => BadgeStyle;

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

@@ -1,5 +1,6 @@
 import { ReactElement, MouseEvent, ForwardRefExoticComponent, RefAttributes } from "react";
-/** This is the default height of the tree item. This value only changes if you stack multiple captionRight elements.
+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;
@@ -7,17 +8,20 @@ export interface TrailingElementItem {
     component: ReactElement;
     showOnHover?: boolean;
 }
+export interface VentionTreeItemCaption {
+    text: string;
+    color?: VentionBadgeColors | undefined;
+    testId?: string | undefined;
+    onClick?: (e: MouseEvent) => void;
+}
+export type VentionTreeItemCaptionsPosition = "right" | "below";
 interface VentionTreeItemProps {
     labelText: string;
     indentLevel?: number | undefined;
     hasWarning?: boolean | undefined;
     icon?: ReactElement | undefined;
-    captionsRight?: {
-        text: string;
-        color?: string;
-        onClick?: (e: MouseEvent) => void;
-        testId?: string;
-    }[] | undefined;
+    captions?: VentionTreeItemCaption[] | undefined;
+    captionsPosition?: VentionTreeItemCaptionsPosition | undefined;
     actionButtons?: {
         component: ReactElement;
         showOnHover?: boolean;
@@ -49,8 +53,8 @@ declare const useStyles: import("tss-react").Tss.UseStyles<{
     hasWarning: boolean;
     isSelected: boolean;
     isExpanded: boolean;
-    captionsRight: VentionTreeItemProps["captionsRight"];
+    collapsible: boolean;
     indentLevel: number;
     selectable: boolean;
-}, "label" | "root" | "iconContainer" | "labelContainer" | "actionButton" | "trailingElement" | "trailingElementShowOnHover" | "mainContent" | "singleLineContainer" | "captionRightContainer" | "captionRight" | "captionRightLabel" | "clickableCaptionRight" | "actionButtonsContainer" | "showOnHover" | "childrenItems" | "alertIcon", import("tss-react/mui").MuiThemeStyleOverridesPluginParams>;
+}, "caption" | "label" | "root" | "iconContainer" | "labelContainer" | "actionButton" | "trailingElement" | "trailingElementShowOnHover" | "singleLineContainer" | "captionsContainer" | "mainContent" | "actionButtonsContainer" | "showOnHover" | "childrenItems" | "alertIcon", import("tss-react/mui").MuiThemeStyleOverridesPluginParams>;
 export {};