@vention/machine-ui 5.14.1 → 5.15.0

package/index.esm.js

@@ -6,6 +6,7 @@ import { tss } from 'tss-react/mui';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { createTheme, useTheme } from '@mui/material/styles';
+import cx from 'classnames';
 import Draggable from 'react-draggable';
 import Slider from '@mui/material/Slider';
 import Typography$1 from '@mui/material/Typography';
@@ -1684,7 +1685,7 @@ function getButtonStylingPropertiesGivenProps(variant, size, theme) {
     button,
     border
   } = theme.palette;
-  const borderRadius = getBorderRadius$2();
+  const borderRadius = getBorderRadius$1();
   switch (variant) {
     case "simple":
       {
@@ -1786,7 +1787,7 @@ function getButtonHeight(size, theme) {
     // 80px
   }
 }
-function getBorderRadius$2() {
+function getBorderRadius$1() {
   return "4px";
 }
 
@@ -2132,6 +2133,25 @@ const TYPOGRAPHY = {
     fontSize: 12,
     lineHeight: "16px"
   },
+  // UI Text 18
+  uiText18SemiBold: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: "24px"
+  },
+  uiText18Medium: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontWeight: 500,
+    lineHeight: "24px"
+  },
+  uiText18Regular: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 18,
+    fontWeight: 400,
+    lineHeight: "24px"
+  },
   // UI Text 14
   uiText14SemiBold: {
     fontFamily: "Inter, sans-serif",
@@ -2186,7 +2206,8 @@ const TYPOGRAPHY = {
     fontWeight: 400,
     lineHeight: "normal"
   },
-  //HMI Text
+  // HMI Text
+  // DEPRECATED: use uiText* variants instead
   hmiText20Regular: {
     fontFamily: "Inter, sans-serif",
     fontSize: 20,
@@ -5406,6 +5427,40 @@ const getBackgroundColorFromState = (state, theme) => {
       return theme.palette.background.inputOutlined;
   }
 };
+const getLabelColor = (state, theme) => {
+  switch (state) {
+    case "warning":
+      return theme.palette.text.warning;
+    case "success":
+      return theme.palette.text.positive;
+    case "error":
+      return theme.palette.text.negative;
+    default:
+      return undefined;
+  }
+};
+const getFieldSetBackgroundColor = (state, theme, variant) => {
+  if (variant === "shaded" && state !== "disabled") {
+    return `${theme.palette.background.inputShaded}${state === "error" ? " !important" : ""}`;
+  }
+  return getBackgroundColorFromState(state, theme);
+};
+const getBorderWidth$1 = size => {
+  switch (size) {
+    case "x-small":
+      return "1px";
+    case "small":
+      return "1px";
+    case "medium":
+      return "1px";
+    case "large":
+      return "1px";
+    case "x-large":
+      return "1px";
+    case "xx-large":
+      return "2px";
+  }
+};
 const getInputHeight = (size, theme) => {
   switch (size) {
     case "x-small":
@@ -5444,41 +5499,82 @@ const getInputPaddingStyles = (size, theme) => {
       };
   }
 };
+/**
+ * Get the vertical padding style for multiline input
+ * @param size The size of the input
+ * @param theme Theme used by MUI
+ */
+const getMultilineVerticalPaddingStyles = (size, theme) => {
+  switch (size) {
+    case "x-small":
+      return {
+        paddingTop: 0,
+        paddingBottom: 0
+      };
+    case "small":
+    case "medium":
+      return {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1)
+      };
+    case "large":
+      return {
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2)
+      };
+    case "x-large":
+      return {
+        paddingTop: theme.spacing(3),
+        paddingBottom: theme.spacing(3)
+      };
+    case "xx-large":
+      return {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4)
+      };
+  }
+};
 const typographyNameFromSizeMap = {
   "x-small": {
     label: "uiText12SemiBold",
     labelDiminished: "uiText12Regular",
     text: "uiText12Regular",
+    textDiminished: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   small: {
     label: "uiText12SemiBold",
     labelDiminished: "uiText12Regular",
     text: "uiText12Regular",
+    textDiminished: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   medium: {
     label: "uiText14SemiBold",
     labelDiminished: "uiText14Regular",
     text: "uiText14Regular",
+    textDiminished: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   large: {
     label: "uiText14SemiBold",
     labelDiminished: "uiText14Regular",
     text: "uiText14Regular",
+    textDiminished: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   "x-large": {
     label: "heading18SemiBold",
     labelDiminished: "paragraph18Regular",
     text: "paragraph18Regular",
+    textDiminished: "uiText12Regular",
     helperText: "uiText12Regular"
   },
   "xx-large": {
     label: "hmiText20SemiBold",
     labelDiminished: "hmiText20Regular",
-    text: "hmiText22Regular",
+    text: "uiText18Regular",
+    textDiminished: "uiText12Regular",
     helperText: "paragraph18Regular"
   }
 };
@@ -5487,6 +5583,7 @@ const getTypography = (size, theme) => {
     label: theme.typography[typographyNameFromSizeMap[size].label],
     labelDiminished: theme.typography[typographyNameFromSizeMap[size].labelDiminished],
     text: theme.typography[typographyNameFromSizeMap[size].text],
+    textDiminished: theme.typography[typographyNameFromSizeMap[size].textDiminished],
     helperText: theme.typography[typographyNameFromSizeMap[size].helperText]
   };
 };
@@ -5497,28 +5594,39 @@ const VentionTextInput = _a => {
       variant,
       size,
       rightItemText,
-      leftItemText
+      leftItemText,
+      maxCharacters
     } = _a,
-    props = __rest(_a, ["state", "variant", "size", "rightItemText", "leftItemText"]);
+    props = __rest(_a, ["state", "variant", "size", "rightItemText", "leftItemText", "maxCharacters"]);
   const {
     classes
   } = useStyles$t({
     size,
     variant,
-    state
+    state,
+    multiline: props.multiline
   });
+  const [uncontrolledLength, setUncontrolledLength] = useState(countCharacters(props.defaultValue));
+  const showCharacterCount = maxCharacters !== undefined && state !== "disabled";
+  const characterCount = props.value === undefined || props.value === null ? uncontrolledLength : countCharacters(props.value);
+  function handleChange(event) {
+    var _a;
+    setUncontrolledLength(event.target.value.length);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  }
   const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({}, props.InputProps), {
     disabled: state === "disabled"
   }), leftItemText ? {
     startAdornment: jsx(InputAdornment, {
       position: "start",
-      className: classes.leftItem,
+      disablePointerEvents: true,
+      className: cx(classes.adornment, classes.adornmentLeft),
       children: jsx(Box$1, {
         display: "flex",
         alignItems: "center",
         height: "100%",
         children: jsx(Typography, {
-          className: classes.leftItemText,
+          className: classes.adornmentText,
           children: leftItemText
         })
       })
@@ -5526,13 +5634,14 @@ const VentionTextInput = _a => {
   } : {}), rightItemText ? {
     endAdornment: jsx(InputAdornment, {
       position: "end",
-      className: classes.rightItem,
+      disablePointerEvents: true,
+      className: cx(classes.adornment, classes.adornmentRight),
       children: jsx(Box$1, {
         display: "flex",
         alignItems: "center",
         height: "100%",
         children: jsx(Typography, {
-          className: classes.rightItemText,
+          className: classes.adornmentText,
           children: rightItemText
         })
       })
@@ -5546,7 +5655,19 @@ const VentionTextInput = _a => {
     value: (props.type === "number" || props.type === "tel") && (props.value === undefined || props.value === null) ? "" : props.value,
     variant: "outlined",
     error: state === "error",
-    helperText: state !== "disabled" && props.helperText,
+    helperText: showCharacterCount ? jsxs("span", {
+      className: classes.helperRow,
+      children: [jsx("span", {
+        children: props.helperText
+      }), jsxs("span", {
+        className: classes.characterCount,
+        children: [characterCount, "/", maxCharacters]
+      })]
+    }) : state !== "disabled" && props.helperText,
+    inputProps: maxCharacters === undefined ? props.inputProps : Object.assign(Object.assign({}, props.inputProps), {
+      maxLength: maxCharacters
+    }),
+    onChange: showCharacterCount ? handleChange : props.onChange,
     InputProps: inputProps
   }));
 };
@@ -5554,6 +5675,7 @@ const useStyles$t = tss.withParams().create(({
   size,
   variant,
   state,
+  multiline,
   theme
 }) => {
   const typographyVariants = getTypography(size, theme);
@@ -5561,44 +5683,54 @@ const useStyles$t = tss.withParams().create(({
     root: {
       gap: theme.spacing(1),
       display: "flex",
-      " & .MuiInputBase-root": {
-        minWidth: theme.spacing(9),
+      " & .MuiInputBase-root": Object.assign(Object.assign({
+        width: "100%",
+        minWidth: 0,
         margin: 0,
         padding: 0,
-        borderRadius: getBorderRadius$1(),
-        height: getInputHeight(size, theme),
+        borderRadius: theme.spacing(1)
+      }, getInputRootSizeStyles(size, theme, multiline)), {
         // Default state
         "& .MuiOutlinedInput-notchedOutline": {
+          borderWidth: getBorderWidth$1(size),
           borderColor: getBorderColorFromState(state, theme),
           backgroundColor: getFieldSetBackgroundColor(state, theme, variant)
         },
         // Hover state
         "&:hover .MuiOutlinedInput-notchedOutline": {
-          border: `1px solid ${getBorderColorFromState(state === "disabled" ? state : "hover", theme)}`,
+          borderWidth: getBorderWidth$1(size),
+          borderStyle: "solid",
+          borderColor: getBorderColorFromState(state === "disabled" ? state : "hover", theme),
           backgroundColor: getBackgroundColorFromState(state === "disabled" ? state : "hover", theme)
         },
         // Focused state
         "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          border: `1px solid ${getBorderColorFromState(state === "disabled" ? state : "focused", theme)}`,
+          borderWidth: getBorderWidth$1(size),
+          borderStyle: "solid",
+          borderColor: getBorderColorFromState(state === "disabled" ? state : "focused", theme),
           backgroundColor: getBackgroundColorFromState(state === "disabled" ? state : "focused", theme)
         },
         // Disabled state
         "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
-          border: `1px solid ${getBorderColorFromState("disabled", theme)}`,
+          borderWidth: getBorderWidth$1(size),
+          borderStyle: "solid",
+          borderColor: getBorderColorFromState("disabled", theme),
           backgroundColor: getBackgroundColorFromState("disabled", theme)
         }
-      },
-      " & .MuiInputBase-input": Object.assign(Object.assign(Object.assign({}, typographyVariants.text), {
+      }),
+      " & .MuiInputBase-input": Object.assign(Object.assign(Object.assign(Object.assign({}, typographyVariants.text), {
         zIndex: 1,
+        height: "100%",
         backgroundColor: "transparent"
-      }), getInputPaddingStyles(size, theme)),
+      }), getInputPaddingStyles(size, theme)), multiline ? getMultilineInputStyles(size, theme) : {}),
       " & .MuiInputBase-input::placeholder": {
         color: theme.palette.text.tertiary,
         opacity: 1
       },
       " & .MuiInputAdornment-root": {
         maxHeight: "none",
-        height: "100%"
+        height: "100%",
+        alignSelf: multiline ? "stretch" : undefined
       },
       " & .MuiInputLabel-root": Object.assign({
         marginBottom: 0
@@ -5612,58 +5744,78 @@ const useStyles$t = tss.withParams().create(({
         margin: 0
       }
     },
-    rightItem: {
+    adornment: {
+      flexShrink: 0,
       height: "100%",
       boxSizing: "border-box",
-      paddingRight: theme.spacing(2),
       paddingLeft: theme.spacing(2),
-      borderTopRightRadius: getBorderRadius$1(),
-      borderBottomRightRadius: getBorderRadius$1(),
-      backgroundColor: theme.palette.background.surface1,
-      border: `1px solid ${theme.palette.divider}`,
+      paddingRight: theme.spacing(2),
       margin: 0
     },
-    rightItemText: {
-      color: theme.palette.text.primary,
-      fontSize: 10
-    },
-    leftItem: {
-      height: "100%",
-      boxSizing: "border-box",
+    adornmentLeft: {
       paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2),
-      borderTopLeftRadius: getBorderRadius$1(),
-      borderBottomLeftRadius: getBorderRadius$1(),
-      backgroundColor: theme.palette.background.surface1,
-      border: `1px solid ${theme.palette.divider}`,
-      margin: 0
+      paddingRight: 0
     },
-    leftItemText: {
-      color: theme.palette.text.primary,
-      fontSize: 10
+    adornmentRight: {
+      paddingLeft: 0,
+      paddingRight: theme.spacing(2)
+    },
+    adornmentText: Object.assign({
+      color: theme.palette.text.tertiary
+    }, typographyVariants.textDiminished),
+    helperRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: theme.spacing(1),
+      width: "100%"
+    },
+    characterCount: {
+      flexShrink: 0,
+      color: theme.palette.text.tertiary
     }
   };
 });
-const getBorderRadius$1 = size => {
-  return "4px";
-};
-const getLabelColor = (state, theme) => {
-  switch (state) {
-    case "warning":
-      return theme.palette.text.warning;
-    case "success":
-      return theme.palette.text.positive;
-    case "error":
-      return theme.palette.text.negative;
-    default:
-      return undefined;
+/** A multiline input has to grow with its content, so the size becomes a floor rather than a fixed height. */
+const getInputRootSizeStyles = (size, theme, multiline) => {
+  if (!multiline) {
+    return {
+      height: getInputHeight(size, theme)
+    };
   }
+  return {
+    height: "auto",
+    minHeight: getInputHeight(size, theme),
+    alignItems: "flex-start"
+  };
+};
+const getMultilineInputStyles = (size, theme) => {
+  return Object.assign(Object.assign({}, getMultilineVerticalPaddingStyles(size, theme)), {
+    whiteSpace: "pre-wrap",
+    overflowWrap: "break-word",
+    overflowY: "auto",
+    "&::-webkit-scrollbar": {
+      width: theme.spacing(3),
+      cursor: "default"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      cursor: "default",
+      backgroundColor: theme.palette.border.subtleSlate,
+      border: `${theme.spacing(1)} solid transparent`,
+      backgroundClip: "content-box",
+      borderRadius: theme.spacing(2)
+    },
+    "&::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: theme.palette.border.hover
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "transparent",
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1)
+    }
+  });
 };
-const getFieldSetBackgroundColor = (state, theme, variant) => {
-  if (variant === "shaded" && state !== "disabled") {
-    return `${theme.palette.background.inputShaded}${state === "error" ? " !important" : ""}`;
-  }
-  return getBackgroundColorFromState(state, theme);
+const countCharacters = value => {
+  return typeof value === "string" || typeof value === "number" ? `${value}`.length : 0;
 };
 
 const radioColorMap = {

package/infinity.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/info-circle-filled.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/info-circle.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/input-output.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/io-link.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/ipad-horizontal.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/json.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/lan.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/language.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/layout-sidebar-right.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/legacy-axis.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/legacy-robot.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/letter-case.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/line.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/linear.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/link.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/list-check.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/load-balancer.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/lock.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/logout.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/machine-apps-headset.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';

package/machinelogic-2.esm.js

@@ -7,6 +7,7 @@ import 'tss-react/mui';
 import '@mui/material/Box';
 import '@mui/material/CircularProgress';
 import '@mui/material/styles';
+import 'classnames';
 import 'react-draggable';
 import '@mui/material/Slider';
 import '@mui/material/Typography';