@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

package/dist/esm/components/Input/Input.js

@@ -1,10 +1,11 @@
-import React__default, { useRef, useState, useMemo, useCallback, useEffect, isValidElement } from "react";
+var _a;
+import React__default, { forwardRef, useRef, useState, useMemo, useCallback, isValidElement, useEffect } from "react";
+import { useForkRef } from "@mui/material";
 import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
-import { ClassNames } from "@emotion/react";
-import { styles } from "./Input.styles.js";
+import { useClasses } from "./Input.styles.js";
+import { staticClasses } from "./Input.styles.js";
 import validationState, { isInvalid, isValid } from "../Forms/FormElement/validationStates.js";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
-import inputClasses from "./inputClasses.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import useIsMounted from "../../hooks/useIsMounted.js";
@@ -34,60 +35,80 @@ const getFocusedElement = (event) => isBrowser("ie") ? document.activeElement :
 function eventTargetIsInsideContainer(container, event) {
   return container != null && container.contains(getFocusedElement(event));
 }
-const HvInput = ({
-  classes,
-  className,
-  id,
-  name,
-  value: valueProp,
-  defaultValue = "",
-  required = false,
-  readOnly = false,
-  disabled = false,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  description,
-  "aria-describedby": ariaDescribedBy,
-  onChange,
-  onEnter,
-  status,
-  statusMessage,
-  "aria-errormessage": ariaErrorMessage,
-  type = "text",
-  placeholder,
-  autoFocus = false,
-  labels: labelsProp,
-  validationMessages,
-  disableClear = false,
-  disableRevealPassword = false,
-  disableSearchButton = false,
-  endAdornment,
-  maxCharQuantity,
-  minCharQuantity,
-  validation,
-  showValidationIcon = false,
-  suggestionListCallback,
-  inputRef: inputRefProp,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  inputProps = {},
-  ...others
-}) => {
+const setInputValue = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a.set;
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", {
+    bubbles: true
+  });
+  setInputValue == null ? void 0 : setInputValue.call(input, value);
+  input == null ? void 0 : input.dispatchEvent(event);
+};
+const HvInput = forwardRef((props, ref) => {
+  var _a2;
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    value: valueProp,
+    defaultValue = "",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onEnter,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    type = "text",
+    placeholder,
+    autoFocus = false,
+    labels: labelsProp,
+    validationMessages,
+    disableClear = false,
+    disableRevealPassword = false,
+    disableSearchButton = false,
+    endAdornment,
+    maxCharQuantity,
+    minCharQuantity,
+    validation,
+    showValidationIcon = false,
+    suggestionListCallback,
+    inputRef: inputRefProp,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    inputProps = {},
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvinput");
-  const inputRef = useRef(inputRefProp || null);
+  const inputRef = useRef(null);
+  const forkedRef = useForkRef(ref, inputRef, inputRefProp);
+  const suggestionsRef = useRef(null);
   const [focused, setFocused] = useState(false);
   const isDirty = useRef(false);
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const isEmptyValue = value == null || value === "";
   const [validationState$1, setValidationState] = useControlled(status, validationState.standBy);
   const [validationMessage, setValidationMessage] = useControlled(statusMessage, "");
-  const errorMessages = useMemo(() => ({
-    ...DEFAULT_ERROR_MESSAGES,
-    ...validationMessages
-  }), [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]);
+  const errorMessages = useMemo(
+    () => ({
+      ...DEFAULT_ERROR_MESSAGES,
+      ...validationMessages
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]
+  );
   const validationType = useMemo(() => computeValidationType(type), [type]);
   const performValidation = useCallback(() => {
     const inputValidity = validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation);
@@ -110,16 +131,11 @@ const HvInput = ({
   const [suggestionValues, setSuggestionValues] = useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
-  const materialInputRef = useRef(null);
-  const suggestionRef = useRef(null);
-  useEffect(() => {
-    suggestionRef.current = document.getElementById(setId(elementId, "suggestions") || "");
-  }, [elementId]);
   const hasLabel = label != null;
   const hasDescription = description != null;
   const focusInput = () => {
-    var _a;
-    (_a = materialInputRef.current) == null ? void 0 : _a.focus();
+    var _a3;
+    (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
   };
   const isMounted = useIsMounted();
   const suggestionClearHandler = () => {
@@ -128,9 +144,9 @@ const HvInput = ({
     }
   };
   const suggestionHandler = (val) => {
-    var _a;
+    var _a3;
     const suggestionsArray = suggestionListCallback == null ? void 0 : suggestionListCallback(val);
-    if ((_a = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a.label) {
+    if ((_a3 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a3.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
@@ -138,8 +154,7 @@ const HvInput = ({
   };
   const suggestionSelectedHandler = (event, item) => {
     const newValue = item.value || item.label;
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(event, newValue);
+    changeInputValue(inputRef.current, newValue);
     focusInput();
     suggestionClearHandler();
     if (type === "search") {
@@ -155,7 +170,7 @@ const HvInput = ({
     }
   };
   const onInputBlurHandler = (event) => {
-    if (eventTargetIsInsideContainer(suggestionRef == null ? void 0 : suggestionRef.current, event))
+    if (eventTargetIsInsideContainer(suggestionsRef.current, event))
       return;
     setFocused(false);
     const inputValidity = performValidation();
@@ -167,9 +182,9 @@ const HvInput = ({
     onFocus == null ? void 0 : onFocus(event, value);
   };
   const getSuggestions = (li) => {
-    var _a;
+    var _a3;
     const listEl = document.getElementById(setId(elementId, "suggestions-list") || "");
-    return li != null ? (_a = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a[li] : listEl;
+    return li != null ? (_a3 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a3[li] : listEl;
   };
   const onSuggestionKeyDown = (event) => {
     if (isKeypress(event, keyboardCodes.Esc)) {
@@ -201,32 +216,28 @@ const HvInput = ({
   const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState$1 !== validationState.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
-  const handleClear = useCallback((event) => {
+  const handleClear = useCallback(() => {
     setValidationState(validationState.standBy);
-    setValue("");
-    onChange == null ? void 0 : onChange(event, "");
+    changeInputValue(inputRef.current, "");
     setTimeout(focusInput);
-  }, [onChange, setValidationState, setValue]);
+  }, [setValidationState]);
   const clearButton = useMemo(() => {
     if (!showClear) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(
-        HvAdornment,
-        {
-          className: cx(inputClasses.adornmentButton, !showSearchIcon && inputClasses.iconClear, css(styles.adornmentButton), !showSearchIcon && css(styles.iconClear), classes == null ? void 0 : classes.adornmentButton, !showSearchIcon && (classes == null ? void 0 : classes.iconClear)),
-          onClick: handleClear,
-          "aria-label": labels == null ? void 0 : labels.clearButtonLabel,
-          "aria-controls": setId(elementId, "input"),
-          icon: /* @__PURE__ */ jsx(CloseXS, {})
-        }
-      )
-    });
-  }, [showClear, classes == null ? void 0 : classes.adornmentButton, classes == null ? void 0 : classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId]);
+    return /* @__PURE__ */ jsx(
+      HvAdornment,
+      {
+        className: cx(classes.adornmentButton, {
+          [classes.iconClear]: !showSearchIcon
+        }),
+        onClick: handleClear,
+        "aria-label": labels == null ? void 0 : labels.clearButtonLabel,
+        "aria-controls": setId(elementId, "input"),
+        icon: /* @__PURE__ */ jsx(CloseXS, {})
+      }
+    );
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId, cx]);
   const handleSearch = useCallback((event) => {
     onEnter == null ? void 0 : onEnter(event, value);
   }, [onEnter, value]);
@@ -235,18 +246,13 @@ const HvInput = ({
     if (!reallyShowIt) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(HvAdornment, {
-        className: cx(inputClasses.adornmentButton, css(styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-        onClick: hasOnEnter ? handleSearch : void 0,
-        "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
-        icon: /* @__PURE__ */ jsx(Search, {})
-      })
+    return /* @__PURE__ */ jsx(HvAdornment, {
+      className: classes.adornmentButton,
+      onClick: hasOnEnter ? handleSearch : void 0,
+      "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
+      icon: /* @__PURE__ */ jsx(Search, {})
     });
-  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState$1, classes == null ? void 0 : classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
+  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState$1, classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
   const handleRevealPassword = useCallback(() => {
     setRevealPassword(!revealPassword);
   }, [revealPassword]);
@@ -254,26 +260,21 @@ const HvInput = ({
     if (!showRevealPasswordButton) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(HvTooltip, {
-        disableFocusListener: true,
-        disableTouchListener: true,
-        title: /* @__PURE__ */ jsx(HvTypography, {
-          children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
-        }),
-        children: /* @__PURE__ */ jsx(HvAdornment, {
-          className: cx(inputClasses.adornmentButton, css(styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-          onClick: handleRevealPassword,
-          "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
-          "aria-controls": setId(elementId, "input"),
-          icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {})
-        })
+    return /* @__PURE__ */ jsx(HvTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: /* @__PURE__ */ jsx(HvTypography, {
+        children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
+      }),
+      children: /* @__PURE__ */ jsx(HvAdornment, {
+        className: classes.adornmentButton,
+        onClick: handleRevealPassword,
+        "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
+        "aria-controls": setId(elementId, "input"),
+        icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {})
       })
     });
-  }, [showRevealPasswordButton, revealPassword, labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip, labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip, labels == null ? void 0 : labels.revealPasswordButtonLabel, classes == null ? void 0 : classes.adornmentButton, handleRevealPassword, elementId]);
+  }, [showRevealPasswordButton, revealPassword, labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip, labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip, labels == null ? void 0 : labels.revealPasswordButtonLabel, classes.adornmentButton, handleRevealPassword, elementId]);
   const validationIcon = useMemo(() => {
     if (!showValidationIcon) {
       return null;
@@ -281,141 +282,119 @@ const HvInput = ({
     if (!isValid(validationState$1)) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(Success, {
-        semantic: "positive",
-        className: cx(inputClasses.icon, css(styles.icon), classes == null ? void 0 : classes.icon)
-      })
+    return /* @__PURE__ */ jsx(Success, {
+      semantic: "positive",
+      className: classes.icon
     });
-  }, [showValidationIcon, validationState$1, classes == null ? void 0 : classes.icon]);
-  const customIconEl = useMemo(() => isValidElement(endAdornment) && /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => React__default.cloneElement(endAdornment, {
-      className: cx(inputClasses.icon, css(styles.icon), endAdornment.props.className, classes == null ? void 0 : classes.icon)
-    })
-  }), [classes == null ? void 0 : classes.icon, endAdornment]);
+  }, [showValidationIcon, validationState$1, classes.icon]);
+  const customIconEl = useMemo(() => isValidElement(endAdornment) && React__default.cloneElement(endAdornment, {
+    className: cx(endAdornment.props.className, classes.icon)
+  }), [classes.icon, endAdornment, cx]);
   const adornments = useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxs("div", {
-        className: cx(inputClasses.adornmentsBox, css(styles.adornmentsBox), classes == null ? void 0 : classes.adornmentsBox),
-        "aria-hidden": "true",
-        children: [clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl]
-      })
+    return /* @__PURE__ */ jsxs("div", {
+      className: classes.adornmentsBox,
+      "aria-hidden": "true",
+      children: [clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl]
     });
-  }, [classes == null ? void 0 : classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]);
+  }, [classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]);
   useEffect(() => {
     if (focused || !isDirty.current && isEmptyValue) {
       return;
     }
     performValidation();
   }, [focused, isEmptyValue, performValidation]);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-  }
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a;
-      return /* @__PURE__ */ jsxs(HvFormElement, {
-        id,
-        name,
-        status: validationState$1,
-        disabled,
-        required,
-        readOnly,
-        className: cx(inputClasses.root, hasSuggestions && inputClasses.hasSuggestions, css(styles.root), className, classes == null ? void 0 : classes.root, hasSuggestions && (classes == null ? void 0 : classes.hasSuggestions)),
-        onBlur: onContainerBlurHandler,
-        children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
-          className: cx(inputClasses.labelContainer, css(styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
-          children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
-            id: setId(elementId, "label"),
-            className: cx(inputClasses.label, css(styles.label), classes == null ? void 0 : classes.label),
-            htmlFor: setId(elementId, "input"),
-            label
-          }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
-            id: setId(elementId, "description"),
-            className: cx(inputClasses.description, classes == null ? void 0 : classes.description),
-            children: description
-          })]
-        }), /* @__PURE__ */ jsx(HvBaseInput, {
-          id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
-          name,
-          value,
-          required,
-          readOnly,
-          disabled,
-          onChange: onChangeHandler,
-          autoFocus,
-          onKeyDown: onKeyDownHandler,
-          onBlur: onInputBlurHandler,
-          onFocus: onFocusHandler,
-          placeholder,
-          type: realType,
-          classes: {
-            input: cx(inputClasses.input, css(styles.input), classes == null ? void 0 : classes.input),
-            inputRoot: cx(inputClasses.inputRoot, css(styles.inputRoot), classes == null ? void 0 : classes.inputRoot),
-            inputRootFocused: cx(inputClasses.inputRootFocused, css(styles.inputRootFocused), classes == null ? void 0 : classes.inputRootFocused),
-            inputRootDisabled: cx(inputClasses.inputRootDisabled, css(styles.inputRootDisabled), classes == null ? void 0 : classes.inputRootDisabled),
-            inputRootMultiline: cx(inputClasses.inputRootMultiline, css(styles.inputRootMultiline), classes == null ? void 0 : classes.inputRootMultiline),
-            inputBorderContainer: cx(inputClasses.inputBorderContainer, css(styles.inputBorderContainer), classes == null ? void 0 : classes.inputBorderContainer)
-          },
-          invalid: isStateInvalid,
-          inputProps: {
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-invalid": isStateInvalid ? true : void 0,
-            "aria-errormessage": errorMessageId,
-            "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId(elementId, "description") : void 0,
-            "aria-controls": canShowSuggestions ? setId(elementId, "suggestions") : void 0,
-            ref: materialInputRef,
-            // prevent browsers auto-fill/suggestions when we have our own
-            autoComplete: canShowSuggestions ? "off" : void 0,
-            ...inputProps
-          },
-          inputRef: inputRefProp || inputRef,
-          endAdornment: adornments,
-          ...others
-        }), canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, {
-          children: [hasSuggestions && /* @__PURE__ */ jsx("div", {
-            role: "presentation",
-            className: cx(inputClasses.inputExtension, css(styles.inputExtension), classes == null ? void 0 : classes.inputExtension)
-          }), /* @__PURE__ */ jsx(HvSuggestions, {
-            id: setId(elementId, "suggestions"),
-            classes: {
-              root: cx(inputClasses.suggestionsContainer, css(styles.suggestionsContainer), classes == null ? void 0 : classes.suggestionsContainer),
-              list: cx(inputClasses.suggestionList, css(styles.suggestionList), classes == null ? void 0 : classes.suggestionList)
-            },
-            expanded: hasSuggestions,
-            anchorEl: (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement,
-            onClose: suggestionClearHandler,
-            onKeyDown: onSuggestionKeyDown,
-            onSuggestionSelected: suggestionSelectedHandler,
-            suggestionValues
-          })]
-        }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
-          id: setId(elementId, "error"),
-          disableBorder: true,
-          className: cx(inputClasses.error, classes == null ? void 0 : classes.error),
-          children: validationMessage
-        })]
-      });
-    }
+  const errorMessageId = isStateInvalid ? canShowError ? setId(elementId, "error") : ariaErrorMessage : void 0;
+  return /* @__PURE__ */ jsxs(HvFormElement, {
+    id,
+    name,
+    status: validationState$1,
+    disabled,
+    required,
+    readOnly,
+    className: cx(className, classes.root, {
+      [classes.hasSuggestions]: hasSuggestions
+    }),
+    onBlur: onContainerBlurHandler,
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+        id: setId(elementId, "label"),
+        className: classes.label,
+        htmlFor: setId(elementId, "input"),
+        label
+      }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
+        id: setId(elementId, "description"),
+        className: classes.description,
+        children: description
+      })]
+    }), /* @__PURE__ */ jsx(HvBaseInput, {
+      id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
+      name,
+      value,
+      required,
+      readOnly,
+      disabled,
+      onChange: onChangeHandler,
+      autoFocus,
+      onKeyDown: onKeyDownHandler,
+      onBlur: onInputBlurHandler,
+      onFocus: onFocusHandler,
+      placeholder,
+      type: realType,
+      classes: {
+        input: classes.input,
+        inputRoot: classes.inputRoot,
+        inputRootFocused: classes.inputRootFocused,
+        inputRootDisabled: classes.inputRootDisabled,
+        inputRootMultiline: classes.inputRootMultiline,
+        inputBorderContainer: classes.inputBorderContainer
+      },
+      invalid: isStateInvalid,
+      inputProps: {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-invalid": isStateInvalid ? true : void 0,
+        "aria-errormessage": errorMessageId,
+        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId(elementId, "description") : void 0,
+        "aria-controls": canShowSuggestions ? setId(elementId, "suggestions") : void 0,
+        ref: inputRef,
+        // prevent browsers auto-fill/suggestions when we have our own
+        autoComplete: canShowSuggestions ? "off" : void 0,
+        ...inputProps
+      },
+      inputRef: forkedRef,
+      endAdornment: adornments,
+      ...others
+    }), canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, {
+      children: [hasSuggestions && /* @__PURE__ */ jsx("div", {
+        role: "presentation",
+        className: classes.inputExtension
+      }), /* @__PURE__ */ jsx(HvSuggestions, {
+        ref: suggestionsRef,
+        id: setId(elementId, "suggestions"),
+        classes: {
+          root: classes.suggestionsContainer,
+          list: classes.suggestionList
+        },
+        expanded: hasSuggestions,
+        anchorEl: (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement,
+        onClose: suggestionClearHandler,
+        onKeyDown: onSuggestionKeyDown,
+        onSuggestionSelected: suggestionSelectedHandler,
+        suggestionValues
+      })]
+    }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
   });
-};
+});
 export {
-  HvInput
+  HvInput,
+  staticClasses as inputClasses
 };
 //# sourceMappingURL=Input.js.map