@hitachivantara/uikit-react-core 3.52.5

package/dist/legacy/Input/Input.js

@@ -0,0 +1,910 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "required", "readOnly", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onEnter", "status", "statusMessage", "aria-errormessage", "type", "placeholder", "autoFocus", "labels", "validationMessages", "disableClear", "disableRevealPassword", "disableSearchButton", "endAdornment", "maxCharQuantity", "minCharQuantity", "validation", "showValidationIcon", "suggestionListCallback", "inputRef", "onBlur", "onFocus", "onKeyDown", "inputProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import React, { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { CloseXS, PreviewOff, Preview, Search, Success } from "@hitachivantara/uikit-react-icons";
+import { HvTypography, HvTooltip, HvAdornment, HvBaseInput, HvFormElement, HvLabel, HvSuggestions, HvWarningText, HvInfoMessage, useUniqueId, useIsMounted } from "..";
+import { isBrowser, isKeypress, KeyboardCodes, refType, setId, useControlled, useLabels } from "../utils";
+import validationStates, { isValid, isInvalid } from "../Forms/FormElement/validationStates";
+import { DEFAULT_ERROR_MESSAGES, computeValidationType, hasBuiltInValidations, validateInput, computeValidationState, computeValidationMessage } from "../BaseInput/validations";
+import styles from "./styles";
+var DEFAULT_LABELS = {
+  clearButtonLabel: "Clear the text",
+  revealPasswordButtonLabel: "Reveal password",
+  revealPasswordButtonClickToShowTooltip: "Click to show password.",
+  revealPasswordButtonClickToHideTooltip: "Click to hide password.",
+  searchButtonLabel: "Search"
+};
+/**
+ * Find the focused element onBlur.
+ */
+
+var getFocusedElement = function getFocusedElement(event) {
+  return isBrowser("ie") ? document.activeElement : event.relatedTarget;
+};
+
+function eventTargetIsInsideContainer(container, event) {
+  return container != null && container.contains(getFocusedElement(event));
+}
+/**
+ * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
+ */
+
+
+var HvInput = function HvInput(props) {
+  var _inputRef$current;
+
+  var classes = props.classes,
+      className = props.className,
+      id = props.id,
+      name = props.name,
+      valueProp = props.value,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      label = props.label,
+      ariaLabel = props["aria-label"],
+      ariaLabelledBy = props["aria-labelledby"],
+      description = props.description,
+      ariaDescribedBy = props["aria-describedby"],
+      onChange = props.onChange,
+      onEnter = props.onEnter,
+      status = props.status,
+      statusMessage = props.statusMessage,
+      ariaErrorMessage = props["aria-errormessage"],
+      _props$type = props.type,
+      type = _props$type === void 0 ? "text" : _props$type,
+      placeholder = props.placeholder,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      labelsProp = props.labels,
+      validationMessages = props.validationMessages,
+      _props$disableClear = props.disableClear,
+      disableClear = _props$disableClear === void 0 ? false : _props$disableClear,
+      _props$disableRevealP = props.disableRevealPassword,
+      disableRevealPassword = _props$disableRevealP === void 0 ? false : _props$disableRevealP,
+      _props$disableSearchB = props.disableSearchButton,
+      disableSearchButton = _props$disableSearchB === void 0 ? false : _props$disableSearchB,
+      endAdornment = props.endAdornment,
+      maxCharQuantity = props.maxCharQuantity,
+      minCharQuantity = props.minCharQuantity,
+      validation = props.validation,
+      _props$showValidation = props.showValidationIcon,
+      showValidationIcon = _props$showValidation === void 0 ? false : _props$showValidation,
+      suggestionListCallback = props.suggestionListCallback,
+      inputRefProp = props.inputRef,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onKeyDown = props.onKeyDown,
+      _props$inputProps = props.inputProps,
+      inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var labels = useLabels(DEFAULT_LABELS, labelsProp);
+  var elementId = useUniqueId(id, "hvinput");
+  var inputRef = useRef(inputRefProp || null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focused = _React$useState2[0],
+      setFocused = _React$useState2[1]; // signals that the user has manually edited the input value
+
+
+  var isDirty = useRef(false); // value related state
+
+  var _useControlled = useControlled(valueProp, defaultValue),
+      _useControlled2 = _slicedToArray(_useControlled, 2),
+      value = _useControlled2[0],
+      setValue = _useControlled2[1];
+
+  var isEmptyValue = value == null || value === ""; // validation related state
+
+  var _useControlled3 = useControlled(status, validationStates.standBy),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      validationState = _useControlled4[0],
+      setValidationState = _useControlled4[1];
+
+  var _useControlled5 = useControlled(statusMessage, ""),
+      _useControlled6 = _slicedToArray(_useControlled5, 2),
+      validationMessage = _useControlled6[0],
+      setValidationMessage = _useControlled6[1]; // validationMessages reference tends to change, as users will not memoize/useState for it;
+  // dependencies must be more explicit so we set
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var errorMessages = useMemo(function () {
+    return _objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGES), validationMessages);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.error, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.requiredError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.minCharError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.maxCharError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.typeMismatchError]);
+  var validationType = useMemo(function () {
+    return computeValidationType(type);
+  }, [type]); // validates the input, sets the status and the statusMessage accordingly (if uncontrolled)
+  // and returns the validity state of the input.
+
+  var performValidation = useCallback(function () {
+    var inputValidity = validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation); // this will only run if status is uncontrolled
+
+    setValidationState(computeValidationState(inputValidity, isEmptyValue)); // this will only run if statusMessage is uncontrolled
+
+    setValidationMessage(computeValidationMessage(inputValidity, errorMessages));
+    return inputValidity;
+  }, [errorMessages, isEmptyValue, maxCharQuantity, minCharQuantity, required, setValidationMessage, setValidationState, validation, validationType, value]); // the error message area will only be created if:
+  // - an external element that provides an error message isn't identified via aria-errormessage AND
+  //   - both status and statusMessage properties are being controlled OR
+  //   - status is uncontrolled and any of the built-in validations are active
+
+  var canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && hasBuiltInValidations(required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps));
+  var isStateInvalid = isInvalid(validationState); // input type related state
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      revealPassword = _useState2[0],
+      setRevealPassword = _useState2[1];
+
+  var realType = useMemo(function () {
+    if (type === "password") {
+      return revealPassword ? "text" : "password";
+    }
+
+    if (type === "search") {
+      return "search";
+    }
+
+    return "text";
+  }, [revealPassword, type]); // suggestions related state
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      suggestionValues = _useState4[0],
+      setSuggestionValues = _useState4[1];
+
+  var canShowSuggestions = suggestionListCallback != null;
+  var hasSuggestions = !!suggestionValues;
+  var materialInputRef = useRef(null);
+  var suggestionRef = useRef({});
+  useEffect(function () {
+    // TODO Replace with ref
+    suggestionRef.current = document.getElementById(setId(elementId, "suggestions"));
+  }, [elementId]); // miscellaneous state
+
+  var hasLabel = label != null;
+  var hasDescription = description != null;
+  /**
+   * Looks for the node that represent the input inside the material tree and focus it.
+   */
+
+  var focusInput = function focusInput() {
+    materialInputRef.current.focus();
+  };
+
+  var isMounted = useIsMounted();
+  /**
+   * Clears the suggestion array.
+   */
+
+  var suggestionClearHandler = function suggestionClearHandler() {
+    if (isMounted.current) {
+      setSuggestionValues(null);
+    }
+  };
+  /**
+   * Fills of the suggestion array.
+   */
+
+
+  var suggestionHandler = function suggestionHandler(val) {
+    var _suggestionsArray$;
+
+    var suggestionsArray = suggestionListCallback === null || suggestionListCallback === void 0 ? void 0 : suggestionListCallback(val);
+
+    if (suggestionsArray !== null && suggestionsArray !== void 0 && (_suggestionsArray$ = suggestionsArray[0]) !== null && _suggestionsArray$ !== void 0 && _suggestionsArray$.label) {
+      setSuggestionValues(suggestionsArray);
+    } else {
+      suggestionClearHandler();
+    }
+  };
+  /**
+   * Executes the user callback adds the selection to the state and clears the suggestions.
+   */
+
+
+  var suggestionSelectedHandler = function suggestionSelectedHandler(event, item) {
+    var newValue = item.value || item.label; // set the input value (only when value is uncontrolled)
+
+    setValue(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+    focusInput();
+    suggestionClearHandler();
+
+    if (type === "search") {
+      // trigger the onEnter callback when the user selects an option in a search box
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, newValue);
+    }
+  };
+
+  var onChangeHandler = function onChangeHandler(event, newValue) {
+    isDirty.current = true; // set the input value (only when value is uncontrolled)
+
+    setValue(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+
+    if (canShowSuggestions) {
+      // an edge case might be a controlled input whose onChange callback
+      // doesn't change the value (or sets another): the suggestionListCallback
+      // callback will still receive the original rejected value.
+      // a refactor is needed so the suggestionListCallback might be called only
+      // when the input is uncontrolled, providing a way to externally control
+      // the suggestion values.
+      suggestionHandler(newValue);
+    }
+  };
+  /**
+   * Validates the input updating the state and modifying the info text, also executes
+   * the user provided onBlur passing the current validation status and value.
+   *
+   * @returns {undefined}
+   */
+
+
+  var onInputBlurHandler = function onInputBlurHandler(event) {
+    // If the blur is executed when choosing an suggestion it should be ignored.
+    if (eventTargetIsInsideContainer(suggestionRef === null || suggestionRef === void 0 ? void 0 : suggestionRef.current, event)) return;
+    setFocused(false);
+    var inputValidity = performValidation();
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, value, inputValidity);
+  };
+  /**
+   * Updates the state putting again the value from the state because the input value is
+   * not automatically manage, it also executes the onFocus function from the user passing the value
+   */
+
+
+  var onFocusHandler = function onFocusHandler(event) {
+    setFocused(true); // reset validation status to standBy (only when status is uncontrolled)
+
+    setValidationState(validationStates.standBy);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, value);
+  };
+
+  var getSuggestions = function getSuggestions(li) {
+    var _listEl$getElementsBy;
+
+    // TODO Replace with ref
+    var listEl = document.getElementById(setId(elementId, "suggestions-list"));
+    return li != null ? listEl === null || listEl === void 0 ? void 0 : (_listEl$getElementsBy = listEl.getElementsByTagName("li")) === null || _listEl$getElementsBy === void 0 ? void 0 : _listEl$getElementsBy[li] : listEl;
+  };
+
+  var onSuggestionKeyDown = function onSuggestionKeyDown(event) {
+    if (isKeypress(event, KeyboardCodes.Esc)) {
+      suggestionClearHandler();
+      focusInput();
+    } else if (isKeypress(event, KeyboardCodes.Tab)) {
+      suggestionClearHandler();
+    }
+  };
+  /**
+   * Focus the suggestion list when the arrow down is pressed.
+   *
+   * @param {Object} event - The event provided by the material ui input
+   */
+
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    if (isKeypress(event, KeyboardCodes.ArrowDown) && hasSuggestions) {
+      var li = getSuggestions(0);
+      li === null || li === void 0 ? void 0 : li.focus();
+    } else if (isKeypress(event, KeyboardCodes.Enter)) {
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, value);
+    }
+
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, value);
+  };
+  /**
+   * Clears the suggestion list on blur.
+   *
+   * @param {Object} event - The event provided by the material ui input.
+   */
+
+
+  var onContainerBlurHandler = function onContainerBlurHandler(event) {
+    if (event.relatedTarget) {
+      setTimeout(function () {
+        var list = getSuggestions();
+        if (!(list !== null && list !== void 0 && list.contains(document.activeElement))) suggestionClearHandler();
+      }, 10);
+    }
+  };
+
+  var hasOnEnter = onEnter != null; // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty
+  // also, don't show it when the input type is "search" and the input is active (standBy)
+
+  var showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
+  var showSearchIcon = type === "search" && !disableSearchButton;
+  var showRevealPasswordButton = type === "password" && !disableRevealPassword;
+  /**
+   * Clears the input value from the state and refocus the input.
+   */
+
+  var handleClear = useCallback(function (event) {
+    // reset validation status to standBy (only when status is uncontrolled)
+    setValidationState(validationStates.standBy); // clear the input value (only when value is uncontrolled)
+
+    setValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, ""); // we wan't to focus the input when clicked and not active
+
+    setTimeout(focusInput);
+  }, [onChange, setValidationState, setValue]);
+  var clearButton = useMemo(function () {
+    if (!showClear) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(HvAdornment // don't control visibility when the search icon is enabled
+    , {
+      className: clsx(classes.adornmentButton, !showSearchIcon && classes.iconClear),
+      onClick: handleClear,
+      "aria-label": labels.clearButtonLabel,
+      "aria-controls": setId(elementId, "input"),
+      icon: /*#__PURE__*/React.createElement(CloseXS, null)
+    });
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels.clearButtonLabel, elementId]);
+  /**
+   * Calls the onEnter callback and refocus the input.
+   */
+
+  var handleSearch = useCallback(function (event) {
+    onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, value);
+  }, [onEnter, value]);
+  var searchButton = useMemo(function () {
+    // if the search icon is not actionable, only show it when the input is empty or active
+    var reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState === validationStates.standBy);
+
+    if (!reallyShowIt) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(HvAdornment, {
+      className: clsx(classes.adornmentButton),
+      onClick: hasOnEnter ? handleSearch : undefined,
+      "aria-label": labels.searchButtonLabel,
+      icon: /*#__PURE__*/React.createElement(Search, null)
+    });
+  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState, classes.adornmentButton, handleSearch, labels.searchButtonLabel]);
+  /**
+   * Changes input type and refocus the input.
+   */
+
+  var handleRevealPassword = useCallback(function () {
+    setRevealPassword(!revealPassword);
+  }, [revealPassword]);
+  var revealPasswordButton = useMemo(function () {
+    if (!showRevealPasswordButton) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(HvTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: /*#__PURE__*/React.createElement(HvTypography, null, revealPassword ? labels.revealPasswordButtonClickToHideTooltip : labels.revealPasswordButtonClickToShowTooltip)
+    }, /*#__PURE__*/React.createElement(HvAdornment, {
+      className: classes.adornmentButton,
+      onClick: handleRevealPassword,
+      "aria-label": labels.revealPasswordButtonLabel,
+      "aria-controls": setId(elementId, "input"),
+      icon: revealPassword ? /*#__PURE__*/React.createElement(PreviewOff, null) : /*#__PURE__*/React.createElement(Preview, null)
+    }));
+  }, [showRevealPasswordButton, revealPassword, labels.revealPasswordButtonClickToHideTooltip, labels.revealPasswordButtonClickToShowTooltip, labels.revealPasswordButtonLabel, classes.adornmentButton, handleRevealPassword, elementId]);
+  var validationIcon = useMemo(function () {
+    if (!showValidationIcon) {
+      return null;
+    }
+
+    if (!isValid(validationState)) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(Success, {
+      semantic: "sema1",
+      className: classes.icon
+    });
+  }, [showValidationIcon, validationState, classes.icon]); // useMemo to avoid repetitive cloning of the custom icon
+
+  var customIconEl = useMemo(function () {
+    return /*#__PURE__*/isValidElement(endAdornment) && /*#__PURE__*/React.cloneElement(endAdornment, {
+      className: clsx(classes.icon, endAdornment.props.className)
+    });
+  }, [classes.icon, endAdornment]);
+  var adornments = useMemo(function () {
+    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl) return null; // note: specification implies that the custom icon should be hidden when
+    // a validation feedback icon is being shown.
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.adornmentsBox,
+      "aria-hidden": "true"
+    }, clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl);
+  }, [classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]); // run initial validation after first render
+  // and also when any validation condition changes
+
+  useEffect(function () {
+    if (focused || !isDirty.current && isEmptyValue) {
+      // skip validation if currently focused or if empty and
+      // the user never manually edited the input value
+      return;
+    }
+
+    performValidation();
+  }, [focused, isEmptyValue, performValidation]);
+  var errorMessageId;
+
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+  }
+
+  return /*#__PURE__*/React.createElement(HvFormElement, {
+    id: id,
+    name: name,
+    status: validationState,
+    disabled: disabled,
+    required: required,
+    readOnly: readOnly,
+    className: clsx(classes.root, className, hasSuggestions && classes.hasSuggestions),
+    onBlur: onContainerBlurHandler
+  }, (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(elementId, "label"),
+    className: classes.label,
+    htmlFor: setId(elementId, "input"),
+    label: label
+  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
+    id: setId(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/React.createElement(HvBaseInput, _extends({
+    id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
+    name: name,
+    value: value,
+    required: required,
+    readOnly: readOnly,
+    disabled: disabled,
+    onChange: onChangeHandler,
+    autoFocus: autoFocus,
+    onKeyDown: onKeyDownHandler,
+    onBlur: onInputBlurHandler,
+    onFocus: onFocusHandler,
+    placeholder: 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: _objectSpread({
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": isStateInvalid ? true : undefined,
+      "aria-errormessage": errorMessageId,
+      "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description"),
+      "aria-controls": canShowSuggestions ? setId(elementId, "suggestions") : undefined,
+      ref: materialInputRef,
+      // prevent browsers auto-fill/suggestions when we have our own
+      autoComplete: canShowSuggestions ? "off" : undefined
+    }, inputProps),
+    inputRef: inputRefProp || inputRef,
+    endAdornment: adornments
+  }, others)), canShowSuggestions && /*#__PURE__*/React.createElement(React.Fragment, null, hasSuggestions && /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: classes.inputExtension
+  }), /*#__PURE__*/React.createElement(HvSuggestions, {
+    id: setId(elementId, "suggestions"),
+    classes: {
+      root: classes.suggestionsContainer,
+      list: classes.suggestionList
+    },
+    expanded: hasSuggestions,
+    anchorEl: inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.parentElement,
+    onClose: suggestionClearHandler,
+    onKeyDown: onSuggestionKeyDown,
+    onSuggestionSelected: suggestionSelectedHandler,
+    suggestionValues: suggestionValues
+  })), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
+};
+
+HvInput.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the root container of the input.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the root container when the suggestion list is open.
+     */
+    hasSuggestions: PropTypes.string,
+
+    /**
+     * Styles applied to input root which is comprising of everything but the labels and descriptions.
+     */
+    inputRoot: PropTypes.string,
+
+    /**
+     * Styles applied to the base input border element.
+     */
+    inputBorderContainer: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is focused.
+     */
+    inputRootFocused: PropTypes.string,
+
+    /**
+     * Styles applied to input html element when it is disabled.
+     */
+    inputRootDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to input html element when it is multiline mode.
+     */
+    inputRootMultiline: PropTypes.string,
+
+    /**
+     * Styles applied to input html element.
+     */
+    input: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the labels elements.
+     */
+    labelContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    label: PropTypes.string,
+
+    /**
+     * Styles applied to the icon information text.
+     */
+    description: PropTypes.string,
+
+    /**
+     * Styles applied to the error area.
+     */
+    error: PropTypes.string,
+
+    /**
+     * Styles applied to the div around the adornment.
+     */
+    adornmentsBox: PropTypes.string,
+
+    /**
+     * Styles applied to the the adornment when behaving as a button.
+     */
+    adornmentButton: PropTypes.string,
+
+    /**
+     * Styles applied to the input adornment icons.
+     */
+    icon: PropTypes.string,
+
+    /**
+     * Styles applied to the icon used to clean the input.
+     */
+    iconClear: PropTypes.string,
+
+    /**
+     * Styles applied to the input extension shown when the suggestions list is visible.
+     */
+    inputExtension: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the suggestions list.
+     */
+    suggestionsContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the suggestions list.
+     */
+    suggestionList: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The form element name.
+   */
+  name: PropTypes.string,
+
+  /**
+   * The value of the form element.
+   */
+  value: PropTypes.string,
+
+  /**
+   * When uncontrolled, defines the initial input value.
+   */
+  defaultValue: PropTypes.string,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.
+   */
+  label: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": PropTypes.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": PropTypes.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Indicates that the form element is not editable.
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: PropTypes.bool,
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`.
+   */
+  status: PropTypes.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage: PropTypes.string,
+
+  /**
+   * Identifies the element that provides an error message for the input.
+   *
+   * Will only be used when the validation status is invalid.
+   */
+  "aria-errormessage": PropTypes.string,
+
+  /**
+   * The function that will be executed onChange, allows modification of the input,
+   * it receives the value. If a new value should be presented it must returned it.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Callback called when the user submits the value by pressing Enter/Return.
+   *
+   * Also called when the search button is clicked (when type is "search").
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * The input type.
+   */
+  type: PropTypes.string,
+
+  /**
+   * The placeholder value of the input.
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Internal labels.
+   */
+  labels: PropTypes.shape({
+    /**
+     * The label of the clear button.
+     */
+    clearButtonLabel: PropTypes.string,
+
+    /**
+     * The label of the reveal password button.
+     */
+    revealPasswordButtonLabel: PropTypes.string,
+
+    /**
+     * The tooltip of the reveal password button when the password is hidden.
+     */
+    revealPasswordButtonClickToShowTooltip: PropTypes.string,
+
+    /**
+     * The tooltip of the reveal password button when the password is revealed.
+     */
+    revealPasswordButtonClickToHideTooltip: PropTypes.string,
+
+    /**
+     * The label of the search button.
+     */
+    searchButtonLabel: PropTypes.string
+  }),
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages: PropTypes.shape({
+    /**
+     * The value when a validation fails.
+     */
+    error: PropTypes.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharError: PropTypes.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharError: PropTypes.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredError: PropTypes.string,
+
+    /**
+     * The message that appears when the input is value is incompatible with the expected type.
+     */
+    typeMismatchError: PropTypes.string
+  }),
+
+  /**
+   * Attributes applied to the input element.
+   */
+  inputProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Allows passing a ref to the underlying input
+   */
+  inputRef: refType,
+
+  /**
+   * The function that will be executed onBlur, allows checking the validation state,
+   * it receives the value and the validation state (`invalid`, `valid`).
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * The function that will be executed onBlur, allows checking the value state,
+   * it receives the value.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * The function that will be executed onKeyDown, allows checking the value state,
+   * it receives the event and value.
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * The function that will be executed to received an array of objects that has a label and id to create list of suggestion
+   */
+  suggestionListCallback: PropTypes.func,
+
+  /**
+   * The custom validation function, it receives the value and must return
+   * either `true` for valid or `false` for invalid, default validations would only
+   * occur if this function is null or undefined
+   */
+  validation: PropTypes.func,
+
+  /**
+   * If `true` it should autofocus.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * If `true` the clear button is disabled.
+   */
+  disableClear: PropTypes.bool,
+
+  /**
+   * If `true` the reveal password button is disabled.
+   *
+   * Valid only when type is "password".
+   */
+  disableRevealPassword: PropTypes.bool,
+
+  /**
+   * If `true` the search button is disabled.
+   *
+   * Valid only when type is "search".
+   */
+  disableSearchButton: PropTypes.bool,
+
+  /**
+   * If `true` the validation icon adorment is visible. Defaults to `false`.
+   *
+   * Currently, DS specifications define only a positive feedback icon;
+   * errors are signaled through the border style and by displaying the error message.
+   */
+  showValidationIcon: PropTypes.bool,
+
+  /**
+   * a custom icon to be added into the input.
+   */
+  endAdornment: PropTypes.node,
+
+  /**
+   * The maximum allowed length of the characters, if this value is null no check
+   * will be performed.
+   */
+  maxCharQuantity: PropTypes.number,
+
+  /**
+   * The minimum allowed length of the characters, if this value is null no check
+   * will be perform.
+   */
+  minCharQuantity: PropTypes.number
+};
+export default withStyles(styles, {
+  name: "HvInput"
+})(HvInput);
+//# sourceMappingURL=Input.js.map