@vention/machine-ui 5.22.0 → 5.23.0

package/index.esm.js

@@ -8878,7 +8878,7 @@ $$9({ target: 'Map', proto: true, real: true, forced: IS_PURE }, {
   }
 });
 
-const getChevronIconSize = size => {
+const getSelectIconSize = size => {
   switch (size) {
     case "small":
     case "medium":
@@ -8889,7 +8889,33 @@ const getChevronIconSize = size => {
       return 32;
   }
 };
+const MenuItemContent = ({
+  size,
+  icon,
+  children
+}) => jsxs(Box$1, {
+  display: "flex",
+  alignItems: "center",
+  gap: 2,
+  minWidth: 0,
+  children: [icon !== undefined && jsx(Box$1, {
+    display: "flex",
+    flexShrink: 0,
+    children: jsx(VentionIcon, {
+      type: icon,
+      size: getSelectIconSize(size),
+      color: "inherit"
+    })
+  }), children]
+});
+const MenuItemDivider = ({
+  className
+}) => jsx("li", {
+  role: "separator",
+  className: className
+});
 const VentionSelect = props => {
+  var _a;
   const {
     classes
   } = useStyles$q(props);
@@ -8902,13 +8928,16 @@ const VentionSelect = props => {
       isDisabled,
       onChange,
       errorText,
+      helperText,
       isMultiple,
       state = "default"
     } = props,
-    other = __rest(props, ["size", "placeholder", "value", "menuItems", "labelText", "isDisabled", "onChange", "errorText", "isMultiple", "state"]);
+    other = __rest(props, ["size", "placeholder", "value", "menuItems", "labelText", "isDisabled", "onChange", "errorText", "helperText", "isMultiple", "state"]);
   const theme = useTheme$1();
   const typographyVariants = typographyNameFromSizeMap[size];
-  const menuItemsMap = useMemo(() => new Map(menuItems.map(item => [item.value, item])), [menuItems]);
+  const menuItemsMap = useMemo(() => new Map(menuItems.filter(isMenuItem).map(item => [item.value, item])), [menuItems]);
+  const selectedHelperText = Array.isArray(value) ? undefined : (_a = menuItemsMap.get(value)) === null || _a === void 0 ? void 0 : _a.helperText;
+  const helperTextToDisplay = selectedHelperText !== null && selectedHelperText !== void 0 ? selectedHelperText : helperText;
   return jsx(FormControl, {
     fullWidth: true,
     error: Boolean(errorText),
@@ -8925,7 +8954,7 @@ const VentionSelect = props => {
           className: classes.chevronIconContainer,
           children: jsx(VentionIcon, {
             type: "chevron-down",
-            size: getChevronIconSize(size),
+            size: getSelectIconSize(size),
             color: theme.palette.icon.primary
           })
         }),
@@ -8952,8 +8981,8 @@ const VentionSelect = props => {
           if (isMultiple) {
             if (!Array.isArray(selected)) throw new Error("Selected value must be an array when isMultiple is true");
             const isOnlyText = selected.every(value => {
-              var _a;
-              return ((_a = menuItemsMap.get(value)) === null || _a === void 0 ? void 0 : _a.displayNode) === undefined;
+              const menuItem = menuItemsMap.get(value);
+              return (menuItem === null || menuItem === void 0 ? void 0 : menuItem.displayNode) === undefined && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.icon) === undefined;
             });
             if (isOnlyText) {
               const _inputValue = selected.map(value => {
@@ -8972,9 +9001,12 @@ const VentionSelect = props => {
               gap: theme.spacing(2),
               className: classes.inputValue,
               children: selected.map(value => {
+                var _a;
                 const menuItem = menuItemsMap.get(value);
-                return jsx(Box$1, {
-                  children: menuItem && "displayNode" in menuItem ? menuItem.displayNode : menuItem.displayText
+                return jsx(MenuItemContent, {
+                  size: size,
+                  icon: menuItem === null || menuItem === void 0 ? void 0 : menuItem.icon,
+                  children: menuItem && "displayNode" in menuItem ? menuItem.displayNode : (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.displayText) !== null && _a !== void 0 ? _a : value
                 }, toReactKey(value));
               })
             });
@@ -8984,19 +9016,30 @@ const VentionSelect = props => {
           const inputValue = (_b = (_a = menuItemSelected === null || menuItemSelected === void 0 ? void 0 : menuItemSelected.displayText) !== null && _a !== void 0 ? _a : menuItemSelected === null || menuItemSelected === void 0 ? void 0 : menuItemSelected.displayNode) !== null && _b !== void 0 ? _b : selected;
           return jsx("div", {
             className: classes.inputValue,
-            children: inputValue
+            children: jsx(MenuItemContent, {
+              size: size,
+              icon: menuItemSelected === null || menuItemSelected === void 0 ? void 0 : menuItemSelected.icon,
+              children: inputValue
+            })
           });
         }
       }, other, {
-        children: menuItems.map(item => jsxs(MenuItem, {
+        children: menuItems.map((item, index) => isMenuItem(item) ? jsx(MenuItem, {
           value: item.value,
           className: classes.menuItem,
           disableRipple: true,
-          children: ["displayText" in item && jsx(Typography, {
-            variant: typographyVariants.text,
-            children: item.displayText
-          }), "displayNode" in item && item.displayNode]
-        }, toReactKey(item.value)))
+          children: jsxs(MenuItemContent, {
+            size: size,
+            icon: item.icon,
+            children: ["displayText" in item && jsx(Typography, {
+              variant: typographyVariants.text,
+              children: item.displayText
+            }), "displayNode" in item && item.displayNode]
+          })
+        }, `select-menu-item-${toReactKey(item.value)}`) : jsx(MenuItemDivider, {
+          className: classes.divider,
+          disabled: true
+        }, `divider-${index}`))
       })), errorText && jsxs(FormHelperText, {
         error: Boolean(errorText),
         classes: {
@@ -9008,6 +9051,14 @@ const VentionSelect = props => {
           variant: typographyVariants.helperText,
           children: errorText
         })]
+      }), !errorText && helperTextToDisplay && jsx(FormHelperText, {
+        classes: {
+          root: classes.helperText
+        },
+        children: jsx(Typography, {
+          variant: typographyVariants.helperText,
+          children: helperTextToDisplay
+        })
       })]
     })
   });
@@ -9110,6 +9161,16 @@ const useStyles$q = tss.withParams().create(({
       gap: theme.spacing(1),
       alignItems: "center"
     },
+    helperText: {
+      marginLeft: 0,
+      color: theme.palette.text.secondary
+    },
+    divider: {
+      height: 0,
+      listStyle: "none",
+      margin: `${theme.spacing(2)} ${theme.spacing(3)}`,
+      borderTop: `1px solid ${theme.palette.border.default}`
+    },
     placeholder: {
       color: theme.palette.text.tertiary,
       overflow: "hidden",
@@ -9164,6 +9225,9 @@ const getIconSize = size => {
       return 14;
   }
 };
+function isMenuItem(item) {
+  return item.type !== "divider";
+}
 /**
  * `undefined` is not a valid React key, so we'll format it to the string `"undefined"`
  */

package/package.json

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

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

@@ -2,21 +2,30 @@ import { SelectChangeEvent, SelectProps } from "@mui/material";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 import { ReactNode } from "react";
 import { InputStates } from "../shared/types/input-types";
+import { DuotoneIconType, IconType } from "../vention-icon/vention-icon";
 export type VentionSelectMenuItem<T> = {
+    type?: never;
     value: T;
     displayText?: string;
     displayNode?: ReactNode;
+    icon?: IconType | DuotoneIconType;
+    helperText?: string;
 };
+export type VentionSelectDivider = {
+    type: "divider";
+};
+export type VentionSelectItem<T> = VentionSelectMenuItem<T> | VentionSelectDivider;
 export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "size" | "defaultValue" | "label"> {
     size: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">;
     variant: "outlined";
     value: string | number | string[] | number[] | undefined;
     onChange: (event: SelectChangeEvent<VentionSelectProps["value"]>, child: ReactNode) => void;
-    menuItems: ReadonlyArray<VentionSelectMenuItem<string | number | undefined>>;
+    menuItems: ReadonlyArray<VentionSelectItem<string | number | undefined>>;
     labelText?: string;
     isDisabled?: boolean;
     placeholder?: string;
     errorText?: string;
+    helperText?: string;
     isMultiple?: boolean;
     state?: StrictExtract<InputStates, "default" | "warning">;
 }