@vention/machine-ui 3.33.6 → 3.34.0

package/index.esm.js

@@ -7790,7 +7790,7 @@ const VentionSelect = props => {
                 const menuItem = menuItemsMap.get(value);
                 return jsx(Box$1, {
                   children: menuItem && "displayNode" in menuItem ? menuItem.displayNode : menuItem.displayText
-                }, value);
+                }, toReactKey(value));
               })
             });
           }
@@ -7811,7 +7811,7 @@ const VentionSelect = props => {
             variant: typographyVariants.text,
             children: item.displayText
           }), "displayNode" in item && item.displayNode]
-        }, item.value))
+        }, toReactKey(item.value)))
       })), errorText && jsxs(FormHelperText, {
         error: Boolean(errorText),
         classes: {
@@ -7979,6 +7979,12 @@ const getIconSize = size => {
       return 14;
   }
 };
+/**
+ * `undefined` is not a valid React key, so we'll format it to the string `"undefined"`
+ */
+function toReactKey(key) {
+  return key !== null && key !== void 0 ? key : "undefined";
+}
 
 const VentionStepper = props => {
   const {
@@ -9954,8 +9960,7 @@ const VentionBanner = ({
     classes
   } = useStyles$6({
     color,
-    accent: _accent,
-    hasIcon: !!startAdornment
+    accent: _accent
   });
   return jsxs(Box$1, {
     className: classes.banner,
@@ -9984,46 +9989,75 @@ const VentionBanner = ({
     })]
   });
 };
+const colorConfig = {
+  warning: {
+    strong: {
+      bg: COLORS.amber[400]
+    },
+    medium: {
+      bg: COLORS.amber[50],
+      icon: COLORS.amber[500],
+      outline: COLORS.amber[300]
+    }
+  },
+  negative: {
+    strong: {
+      bg: COLORS.red[500]
+    },
+    medium: {
+      bg: COLORS.red[50],
+      icon: COLORS.red[500],
+      outline: COLORS.red[400]
+    }
+  },
+  positive: {
+    strong: {
+      bg: COLORS.green[500]
+    },
+    medium: {
+      bg: COLORS.green[50],
+      icon: COLORS.green[500],
+      outline: COLORS.green[400]
+    }
+  },
+  operational: {
+    strong: {
+      bg: COLORS.blue[600]
+    },
+    medium: {
+      bg: COLORS.blue[50],
+      icon: COLORS.blue[600],
+      outline: COLORS.blue[300]
+    }
+  }
+};
 /**
  * Compute banner background and text color based on the `color` prop
  */
-function useBannerColorStyles(color, theme) {
-  let backgroundColor;
-  let textColor;
-  switch (color) {
-    case "negative":
-      backgroundColor = COLORS.red[500];
-      textColor = theme.palette.common.white;
-      break;
-    case "positive":
-      backgroundColor = COLORS.green[500];
-      textColor = theme.palette.common.white;
-      break;
-    case "operational":
-      backgroundColor = COLORS.blue[600];
-      textColor = theme.palette.common.white;
-      break;
-    case "warning":
-    default:
-      backgroundColor = COLORS.amber[400];
-      textColor = theme.palette.text.primary;
-      break;
-  }
+function useBannerColorStyles(color, accent, theme) {
+  const config = colorConfig[color];
+  const outlineColor = accent === "medium" ? config[accent].outline : "transparent";
+  const backgroundColor = config[accent].bg;
+  const textColor = color === "warning" || accent === "medium" ? theme.palette.text.primary : theme.palette.common.white;
+  const iconColor = accent === "medium" ? config[accent].icon : color === "warning" ? theme.palette.text.primary : theme.palette.common.white;
   return {
     backgroundColor,
+    outlineColor,
+    iconColor,
     textColor
   };
 }
 const useStyles$6 = tss.withParams().create(({
   theme,
   color,
-  accent,
-  hasIcon
+  accent
 }) => {
   const {
     backgroundColor,
-    textColor
-  } = useBannerColorStyles(color, theme);
+    outlineColor,
+    textColor,
+    iconColor
+  } = useBannerColorStyles(color, accent, theme);
   return {
     banner: {
       display: "flex",
@@ -10035,12 +10069,13 @@ const useStyles$6 = tss.withParams().create(({
       padding: theme.spacing(3),
       gap: theme.spacing(2),
       borderRadius: theme.shape.borderRadius,
-      outline: "none"
+      outline: `solid 1px ${outlineColor}`
     },
     bannerIconContainer: {
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      color: iconColor
     },
     bannerTitle: {
       color: textColor,
@@ -10084,7 +10119,6 @@ const VentionModalBanner = ({
   } = useStyles$5({
     color,
     accent: _accent,
-    hasIcon: !!icon,
     maxWidth: _maxWidth
   });
   const handleOpenModal = () => setIsModalOpen(true);
@@ -10134,13 +10168,12 @@ const useStyles$5 = tss.withParams().create(({
   theme,
   color,
   accent,
-  hasIcon,
   maxWidth
 }) => {
   const {
     backgroundColor,
     textColor
-  } = useBannerColorStyles(color, theme);
+  } = useBannerColorStyles(color, accent, theme);
   return {
     modal: {
       display: "flex",

package/package.json

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

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

@@ -1,8 +1,9 @@
 import React from "react";
+import { Theme } from "@mui/material";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 export interface VentionBannerProps {
     size?: StrictExtract<Sizes, "large">;
-    accent?: "strong";
+    accent?: "medium" | "strong";
     color: "warning" | "negative" | "positive" | "operational";
     startAdornment?: React.ReactNode;
     title: string;
@@ -14,7 +15,9 @@ export declare const VentionBanner: ({ size, accent, color, startAdornment, titl
 /**
  * Compute banner background and text color based on the `color` prop
  */
-export declare function useBannerColorStyles(color: "warning" | "negative" | "positive" | "operational", theme: any): {
+export declare function useBannerColorStyles(color: VentionBannerProps["color"], accent: VentionBannerProps["accent"], theme: Theme): {
     backgroundColor: string;
+    outlineColor: string;
+    iconColor: string;
     textColor: string;
 };

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

@@ -1,13 +1,12 @@
-import React from "react";
-import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
+import { VentionBannerProps } from "../vention-banner/vention-banner";
 export interface VentionModalBannerProps {
-    size?: StrictExtract<Sizes, "large">;
-    accent?: "strong";
-    color: "warning" | "negative" | "positive" | "operational";
-    icon?: React.ReactNode;
-    title: string;
-    description: string;
-    endAdornment?: React.ReactNode;
+    size?: VentionBannerProps["size"];
+    accent?: VentionBannerProps["accent"];
+    color: VentionBannerProps["color"];
+    icon?: VentionBannerProps["startAdornment"];
+    title: VentionBannerProps["title"];
+    description: VentionBannerProps["description"];
+    endAdornment?: VentionBannerProps["endAdornment"];
     maxWidth?: number;
 }
 /**

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

@@ -12,7 +12,7 @@ export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "s
     variant: "outlined";
     value: string | number | string[] | number[] | undefined;
     onChange: (event: SelectChangeEvent<VentionSelectProps["value"]>, child: ReactNode) => void;
-    menuItems: ReadonlyArray<VentionSelectMenuItem<string | number>>;
+    menuItems: ReadonlyArray<VentionSelectMenuItem<string | number | undefined>>;
     labelText?: string;
     isDisabled?: boolean;
     placeholder?: string;