@vention/machine-ui 5.14.2 → 5.15.0

package/index.esm.js

@@ -1685,7 +1685,7 @@ function getButtonStylingPropertiesGivenProps(variant, size, theme) {
     button,
     border
   } = theme.palette;
-  const borderRadius = getBorderRadius$2();
+  const borderRadius = getBorderRadius$1();
   switch (variant) {
     case "simple":
       {
@@ -1787,7 +1787,7 @@ function getButtonHeight(size, theme) {
     // 80px
   }
 }
-function getBorderRadius$2() {
+function getBorderRadius$1() {
   return "4px";
 }
 
@@ -5427,9 +5427,6 @@ const getBackgroundColorFromState = (state, theme) => {
       return theme.palette.background.inputOutlined;
   }
 };
-const getBorderRadius$1 = _size => {
-  return "4px";
-};
 const getLabelColor = (state, theme) => {
   switch (state) {
     case "warning":
@@ -5502,6 +5499,41 @@ 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",
@@ -5562,16 +5594,26 @@ 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 ? {
@@ -5613,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
   }));
 };
@@ -5621,6 +5675,7 @@ const useStyles$t = tss.withParams().create(({
   size,
   variant,
   state,
+  multiline,
   theme
 }) => {
   const typographyVariants = getTypography(size, theme);
@@ -5628,13 +5683,13 @@ const useStyles$t = tss.withParams().create(({
     root: {
       gap: theme.spacing(1),
       display: "flex",
-      " & .MuiInputBase-root": {
+      " & .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),
@@ -5662,19 +5717,20 @@ const useStyles$t = tss.withParams().create(({
           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
@@ -5706,9 +5762,61 @@ const useStyles$t = tss.withParams().create(({
     },
     adornmentText: Object.assign({
       color: theme.palette.text.tertiary
-    }, typographyVariants.textDiminished)
+    }, typographyVariants.textDiminished),
+    helperRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: theme.spacing(1),
+      width: "100%"
+    },
+    characterCount: {
+      flexShrink: 0,
+      color: theme.palette.text.tertiary
+    }
   };
 });
+/** 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 countCharacters = value => {
+  return typeof value === "string" || typeof value === "number" ? `${value}`.length : 0;
+};
 
 const radioColorMap = {
   checked: {

package/package.json

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

package/src/lib/components/shared/styles/input-styles.d.ts

@@ -4,7 +4,6 @@ import { Sizes } from "../../../theme/machine-ui-theme";
 export type InputFieldVariant = "outlined" | "shaded";
 export declare const getBorderColorFromState: (state: AllInputStates, theme: Theme) => string;
 export declare const getBackgroundColorFromState: (state: AllInputStates, theme: Theme) => string;
-export declare const getBorderRadius: (_size?: Sizes) => string;
 export declare const getLabelColor: (state: InputStates | undefined, theme: Theme) => string;
 export declare const getFieldSetBackgroundColor: (state: InputStates, theme: Theme, variant: InputFieldVariant | undefined) => string;
 export declare const getBorderWidth: (size: Sizes) => "2px" | "1px";
@@ -13,6 +12,18 @@ export declare const getInputPaddingStyles: (size: Sizes, theme: Theme) => {
     paddingLeft: string;
     paddingRight: string;
 };
+/**
+ * Get the vertical padding style for multiline input
+ * @param size The size of the input
+ * @param theme Theme used by MUI
+ */
+export declare const getMultilineVerticalPaddingStyles: (size: Sizes, theme: Theme) => {
+    paddingTop: number;
+    paddingBottom: number;
+} | {
+    paddingTop: string;
+    paddingBottom: string;
+};
 export declare const typographyNameFromSizeMap: Record<"x-small" | "small" | "medium" | "large" | "x-large" | "xx-large", Record<"label" | "labelDiminished" | "text" | "textDiminished" | "helperText", TypographyOwnProps["variant"]>>;
 export declare const getTypography: (size: Sizes, theme: Theme) => {
     label: any;

package/src/lib/components/vention-text-input/vention-text-input.d.ts

@@ -18,6 +18,7 @@ export interface VentionTextInputProps extends Omit<TextFieldProps, "variant" |
     size?: StrictExtract<Sizes, "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large">;
     rightItemText?: string;
     leftItemText?: string;
+    maxCharacters?: number;
 }
-export declare const VentionTextInput: ({ state, variant, size, rightItemText, leftItemText, ...props }: VentionTextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VentionTextInput: ({ state, variant, size, rightItemText, leftItemText, maxCharacters, ...props }: VentionTextInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};