@hitachivantara/uikit-react-core 3.52.5

package/dist/Input/Input.js

@@ -0,0 +1,958 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _ = require("..");
+
+var _utils = require("../utils");
+
+var _validationStates = _interopRequireWildcard(require("../Forms/FormElement/validationStates"));
+
+var _validations = require("../BaseInput/validations");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+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 (0, _utils.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var labels = (0, _utils.useLabels)(DEFAULT_LABELS, labelsProp);
+  var elementId = (0, _.useUniqueId)(id, "hvinput");
+  var inputRef = (0, _react.useRef)(inputRefProp || null);
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      focused = _React$useState2[0],
+      setFocused = _React$useState2[1]; // signals that the user has manually edited the input value
+
+
+  var isDirty = (0, _react.useRef)(false); // value related state
+
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+      value = _useControlled2[0],
+      setValue = _useControlled2[1];
+
+  var isEmptyValue = value == null || value === ""; // validation related state
+
+  var _useControlled3 = (0, _utils.useControlled)(status, _validationStates.default.standBy),
+      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
+      validationState = _useControlled4[0],
+      setValidationState = _useControlled4[1];
+
+  var _useControlled5 = (0, _utils.useControlled)(statusMessage, ""),
+      _useControlled6 = (0, _slicedToArray2.default)(_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 = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _validations.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 = (0, _react.useMemo)(function () {
+    return (0, _validations.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 = (0, _react.useCallback)(function () {
+    var inputValidity = (0, _validations.validateInput)(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation); // this will only run if status is uncontrolled
+
+    setValidationState((0, _validations.computeValidationState)(inputValidity, isEmptyValue)); // this will only run if statusMessage is uncontrolled
+
+    setValidationMessage((0, _validations.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 && (0, _validations.hasBuiltInValidations)(required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps));
+  var isStateInvalid = (0, _validationStates.isInvalid)(validationState); // input type related state
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      revealPassword = _useState2[0],
+      setRevealPassword = _useState2[1];
+
+  var realType = (0, _react.useMemo)(function () {
+    if (type === "password") {
+      return revealPassword ? "text" : "password";
+    }
+
+    if (type === "search") {
+      return "search";
+    }
+
+    return "text";
+  }, [revealPassword, type]); // suggestions related state
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      suggestionValues = _useState4[0],
+      setSuggestionValues = _useState4[1];
+
+  var canShowSuggestions = suggestionListCallback != null;
+  var hasSuggestions = !!suggestionValues;
+  var materialInputRef = (0, _react.useRef)(null);
+  var suggestionRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(function () {
+    // TODO Replace with ref
+    suggestionRef.current = document.getElementById((0, _utils.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 = (0, _.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.default.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((0, _utils.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 ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Esc)) {
+      suggestionClearHandler();
+      focusInput();
+    } else if ((0, _utils.isKeypress)(event, _utils.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 ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.ArrowDown) && hasSuggestions) {
+      var li = getSuggestions(0);
+      li === null || li === void 0 ? void 0 : li.focus();
+    } else if ((0, _utils.isKeypress)(event, _utils.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.default.standBy);
+  var showSearchIcon = type === "search" && !disableSearchButton;
+  var showRevealPasswordButton = type === "password" && !disableRevealPassword;
+  /**
+   * Clears the input value from the state and refocus the input.
+   */
+
+  var handleClear = (0, _react.useCallback)(function (event) {
+    // reset validation status to standBy (only when status is uncontrolled)
+    setValidationState(_validationStates.default.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 = (0, _react.useMemo)(function () {
+    if (!showClear) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_.HvAdornment // don't control visibility when the search icon is enabled
+    , {
+      className: (0, _clsx.default)(classes.adornmentButton, !showSearchIcon && classes.iconClear),
+      onClick: handleClear,
+      "aria-label": labels.clearButtonLabel,
+      "aria-controls": (0, _utils.setId)(elementId, "input"),
+      icon: /*#__PURE__*/_react.default.createElement(_uikitReactIcons.CloseXS, null)
+    });
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels.clearButtonLabel, elementId]);
+  /**
+   * Calls the onEnter callback and refocus the input.
+   */
+
+  var handleSearch = (0, _react.useCallback)(function (event) {
+    onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, value);
+  }, [onEnter, value]);
+  var searchButton = (0, _react.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.default.standBy);
+
+    if (!reallyShowIt) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_.HvAdornment, {
+      className: (0, _clsx.default)(classes.adornmentButton),
+      onClick: hasOnEnter ? handleSearch : undefined,
+      "aria-label": labels.searchButtonLabel,
+      icon: /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Search, null)
+    });
+  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState, classes.adornmentButton, handleSearch, labels.searchButtonLabel]);
+  /**
+   * Changes input type and refocus the input.
+   */
+
+  var handleRevealPassword = (0, _react.useCallback)(function () {
+    setRevealPassword(!revealPassword);
+  }, [revealPassword]);
+  var revealPasswordButton = (0, _react.useMemo)(function () {
+    if (!showRevealPasswordButton) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_.HvTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: /*#__PURE__*/_react.default.createElement(_.HvTypography, null, revealPassword ? labels.revealPasswordButtonClickToHideTooltip : labels.revealPasswordButtonClickToShowTooltip)
+    }, /*#__PURE__*/_react.default.createElement(_.HvAdornment, {
+      className: classes.adornmentButton,
+      onClick: handleRevealPassword,
+      "aria-label": labels.revealPasswordButtonLabel,
+      "aria-controls": (0, _utils.setId)(elementId, "input"),
+      icon: revealPassword ? /*#__PURE__*/_react.default.createElement(_uikitReactIcons.PreviewOff, null) : /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Preview, null)
+    }));
+  }, [showRevealPasswordButton, revealPassword, labels.revealPasswordButtonClickToHideTooltip, labels.revealPasswordButtonClickToShowTooltip, labels.revealPasswordButtonLabel, classes.adornmentButton, handleRevealPassword, elementId]);
+  var validationIcon = (0, _react.useMemo)(function () {
+    if (!showValidationIcon) {
+      return null;
+    }
+
+    if (!(0, _validationStates.isValid)(validationState)) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Success, {
+      semantic: "sema1",
+      className: classes.icon
+    });
+  }, [showValidationIcon, validationState, classes.icon]); // useMemo to avoid repetitive cloning of the custom icon
+
+  var customIconEl = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _react.isValidElement)(endAdornment) && /*#__PURE__*/_react.default.cloneElement(endAdornment, {
+      className: (0, _clsx.default)(classes.icon, endAdornment.props.className)
+    });
+  }, [classes.icon, endAdornment]);
+  var adornments = (0, _react.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.default.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
+
+  (0, _react.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 ? (0, _utils.setId)(elementId, "error") : ariaErrorMessage;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_.HvFormElement, {
+    id: id,
+    name: name,
+    status: validationState,
+    disabled: disabled,
+    required: required,
+    readOnly: readOnly,
+    className: (0, _clsx.default)(classes.root, className, hasSuggestions && classes.hasSuggestions),
+    onBlur: onContainerBlurHandler
+  }, (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/_react.default.createElement(_.HvLabel, {
+    id: (0, _utils.setId)(elementId, "label"),
+    className: classes.label,
+    htmlFor: (0, _utils.setId)(elementId, "input"),
+    label: label
+  }), hasDescription && /*#__PURE__*/_react.default.createElement(_.HvInfoMessage, {
+    id: (0, _utils.setId)(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/_react.default.createElement(_.HvBaseInput, (0, _extends2.default)({
+    id: hasLabel || showClear || showRevealPasswordButton ? (0, _utils.setId)(elementId, "input") : (0, _utils.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 && (0, _utils.setId)(elementId, "description"),
+      "aria-controls": canShowSuggestions ? (0, _utils.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.default.createElement(_react.default.Fragment, null, hasSuggestions && /*#__PURE__*/_react.default.createElement("div", {
+    role: "presentation",
+    className: classes.inputExtension
+  }), /*#__PURE__*/_react.default.createElement(_.HvSuggestions, {
+    id: (0, _utils.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.default.createElement(_.HvWarningText, {
+    id: (0, _utils.setId)(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
+};
+
+HvInput.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the root container of the input.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the root container when the suggestion list is open.
+     */
+    hasSuggestions: _propTypes.default.string,
+
+    /**
+     * Styles applied to input root which is comprising of everything but the labels and descriptions.
+     */
+    inputRoot: _propTypes.default.string,
+
+    /**
+     * Styles applied to the base input border element.
+     */
+    inputBorderContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to input root when it is focused.
+     */
+    inputRootFocused: _propTypes.default.string,
+
+    /**
+     * Styles applied to input html element when it is disabled.
+     */
+    inputRootDisabled: _propTypes.default.string,
+
+    /**
+     * Styles applied to input html element when it is multiline mode.
+     */
+    inputRootMultiline: _propTypes.default.string,
+
+    /**
+     * Styles applied to input html element.
+     */
+    input: _propTypes.default.string,
+
+    /**
+     * Styles applied to the container of the labels elements.
+     */
+    labelContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon information text.
+     */
+    description: _propTypes.default.string,
+
+    /**
+     * Styles applied to the error area.
+     */
+    error: _propTypes.default.string,
+
+    /**
+     * Styles applied to the div around the adornment.
+     */
+    adornmentsBox: _propTypes.default.string,
+
+    /**
+     * Styles applied to the the adornment when behaving as a button.
+     */
+    adornmentButton: _propTypes.default.string,
+
+    /**
+     * Styles applied to the input adornment icons.
+     */
+    icon: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon used to clean the input.
+     */
+    iconClear: _propTypes.default.string,
+
+    /**
+     * Styles applied to the input extension shown when the suggestions list is visible.
+     */
+    inputExtension: _propTypes.default.string,
+
+    /**
+     * Styles applied to the container of the suggestions list.
+     */
+    suggestionsContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the suggestions list.
+     */
+    suggestionList: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The form element name.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The value of the form element.
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * When uncontrolled, defines the initial input value.
+   */
+  defaultValue: _propTypes.default.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.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": _propTypes.default.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Indicates that the form element is not editable.
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: _propTypes.default.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.default.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage: _propTypes.default.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.default.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.default.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.default.func,
+
+  /**
+   * The input type.
+   */
+  type: _propTypes.default.string,
+
+  /**
+   * The placeholder value of the input.
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * Internal labels.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * The label of the clear button.
+     */
+    clearButtonLabel: _propTypes.default.string,
+
+    /**
+     * The label of the reveal password button.
+     */
+    revealPasswordButtonLabel: _propTypes.default.string,
+
+    /**
+     * The tooltip of the reveal password button when the password is hidden.
+     */
+    revealPasswordButtonClickToShowTooltip: _propTypes.default.string,
+
+    /**
+     * The tooltip of the reveal password button when the password is revealed.
+     */
+    revealPasswordButtonClickToHideTooltip: _propTypes.default.string,
+
+    /**
+     * The label of the search button.
+     */
+    searchButtonLabel: _propTypes.default.string
+  }),
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages: _propTypes.default.shape({
+    /**
+     * The value when a validation fails.
+     */
+    error: _propTypes.default.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharError: _propTypes.default.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharError: _propTypes.default.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredError: _propTypes.default.string,
+
+    /**
+     * The message that appears when the input is value is incompatible with the expected type.
+     */
+    typeMismatchError: _propTypes.default.string
+  }),
+
+  /**
+   * Attributes applied to the input element.
+   */
+  inputProps: _propTypes.default.instanceOf(Object),
+
+  /**
+   * Allows passing a ref to the underlying input
+   */
+  inputRef: _utils.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.default.func,
+
+  /**
+   * The function that will be executed onBlur, allows checking the value state,
+   * it receives the value.
+   */
+  onFocus: _propTypes.default.func,
+
+  /**
+   * The function that will be executed onKeyDown, allows checking the value state,
+   * it receives the event and value.
+   */
+  onKeyDown: _propTypes.default.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.default.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.default.func,
+
+  /**
+   * If `true` it should autofocus.
+   */
+  autoFocus: _propTypes.default.bool,
+
+  /**
+   * If `true` the clear button is disabled.
+   */
+  disableClear: _propTypes.default.bool,
+
+  /**
+   * If `true` the reveal password button is disabled.
+   *
+   * Valid only when type is "password".
+   */
+  disableRevealPassword: _propTypes.default.bool,
+
+  /**
+   * If `true` the search button is disabled.
+   *
+   * Valid only when type is "search".
+   */
+  disableSearchButton: _propTypes.default.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.default.bool,
+
+  /**
+   * a custom icon to be added into the input.
+   */
+  endAdornment: _propTypes.default.node,
+
+  /**
+   * The maximum allowed length of the characters, if this value is null no check
+   * will be performed.
+   */
+  maxCharQuantity: _propTypes.default.number,
+
+  /**
+   * The minimum allowed length of the characters, if this value is null no check
+   * will be perform.
+   */
+  minCharQuantity: _propTypes.default.number
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvInput"
+})(HvInput);
+
+exports.default = _default;
+//# sourceMappingURL=Input.js.map