@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/modern/Input/Input.js

@@ -1,15 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-
 var _CloseXS, _Search, _PreviewOff, _Preview;
-
 const _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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import "core-js/modules/web.dom-collections.iterator.js";
 import React, { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
@@ -30,113 +24,118 @@ const DEFAULT_LABELS = {
   revealPasswordButtonClickToHideTooltip: "Click to hide password.",
   searchButtonLabel: "Search"
 };
+
 /**
  * Find the focused element onBlur.
  */
-
 const getFocusedElement = event => 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.
  */
-
-
 const HvInput = props => {
   var _inputRef$current;
-
   const {
-    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 = {}
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
+      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 = {}
+    } = props,
+    others = _objectWithoutProperties(props, _excluded);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvinput");
   const inputRef = useRef(inputRefProp || null);
-  const [focused, setFocused] = React.useState(false); // signals that the user has manually edited the input value
+  const [focused, setFocused] = React.useState(false);
 
-  const isDirty = useRef(false); // value related state
+  // signals that the user has manually edited the input value
+  const isDirty = useRef(false);
 
+  // value related state
   const [value, setValue] = useControlled(valueProp, defaultValue);
-  const isEmptyValue = value == null || value === ""; // validation related state
+  const isEmptyValue = value == null || value === "";
 
+  // validation related state
   const [validationState, setValidationState] = useControlled(status, validationStates.standBy);
-  const [validationMessage, setValidationMessage] = useControlled(statusMessage, ""); // validationMessages reference tends to change, as users will not memoize/useState for it;
+  const [validationMessage, setValidationMessage] = useControlled(statusMessage, "");
+
+  // 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
-
-  const errorMessages = useMemo(() => _objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGES), validationMessages), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const errorMessages = useMemo(() => _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]);
-  const validationType = useMemo(() => computeValidationType(type), [type]); // validates the input, sets the status and the statusMessage accordingly (if uncontrolled)
-  // and returns the validity state of the input.
+  const validationType = useMemo(() => computeValidationType(type), [type]);
 
+  // validates the input, sets the status and the statusMessage accordingly (if uncontrolled)
+  // and returns the validity state of the input.
   const performValidation = useCallback(() => {
-    const inputValidity = validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation); // this will only run if status is uncontrolled
+    const inputValidity = validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation);
 
-    setValidationState(computeValidationState(inputValidity, isEmptyValue)); // this will only run if statusMessage is uncontrolled
+    // 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:
+  }, [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
-
   const canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && hasBuiltInValidations(required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps));
-  const isStateInvalid = isInvalid(validationState); // input type related state
+  const isStateInvalid = isInvalid(validationState);
 
+  // input type related state
   const [revealPassword, setRevealPassword] = useState(false);
   const realType = useMemo(() => {
     if (type === "password") {
       return revealPassword ? "text" : "password";
     }
-
     if (type === "search") {
       return "search";
     }
-
     return "text";
-  }, [revealPassword, type]); // suggestions related state
+  }, [revealPassword, type]);
 
+  // suggestions related state
   const [suggestionValues, setSuggestionValues] = useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
@@ -145,69 +144,64 @@ const HvInput = props => {
   useEffect(() => {
     // TODO Replace with ref
     suggestionRef.current = document.getElementById(setId(elementId, "suggestions"));
-  }, [elementId]); // miscellaneous state
+  }, [elementId]);
 
+  // miscellaneous state
   const hasLabel = label != null;
   const hasDescription = description != null;
+
   /**
    * Looks for the node that represent the input inside the material tree and focus it.
    */
-
   const focusInput = () => {
     materialInputRef.current.focus();
   };
-
   const isMounted = useIsMounted();
+
   /**
    * Clears the suggestion array.
    */
-
   const suggestionClearHandler = () => {
     if (isMounted.current) {
       setSuggestionValues(null);
     }
   };
+
   /**
    * Fills of the suggestion array.
    */
-
-
   const suggestionHandler = val => {
     var _suggestionsArray$;
-
     const 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.
    */
-
-
   const suggestionSelectedHandler = (event, item) => {
-    const newValue = item.value || item.label; // set the input value (only when value is uncontrolled)
+    const 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);
     }
   };
-
   const onChangeHandler = (event, newValue) => {
-    isDirty.current = true; // set the input value (only when value is uncontrolled)
+    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
@@ -218,14 +212,13 @@ const HvInput = props => {
       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}
    */
-
-
   const 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;
@@ -233,27 +226,24 @@ const HvInput = props => {
     const 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
    */
-
-
   const onFocusHandler = event => {
-    setFocused(true); // reset validation status to standBy (only when status is uncontrolled)
+    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);
   };
-
   const getSuggestions = li => {
     var _listEl$getElementsBy;
-
     // TODO Replace with ref
     const 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;
   };
-
   const onSuggestionKeyDown = event => {
     if (isKeypress(event, KeyboardCodes.Esc)) {
       suggestionClearHandler();
@@ -262,13 +252,12 @@ const HvInput = props => {
       suggestionClearHandler();
     }
   };
+
   /**
    * Focus the suggestion list when the arrow down is pressed.
    *
    * @param {Object} event - The event provided by the material ui input
    */
-
-
   const onKeyDownHandler = event => {
     if (isKeypress(event, KeyboardCodes.ArrowDown) && hasSuggestions) {
       const li = getSuggestions(0);
@@ -276,16 +265,14 @@ const HvInput = props => {
     } 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.
    */
-
-
   const onContainerBlurHandler = event => {
     if (event.relatedTarget) {
       setTimeout(() => {
@@ -294,32 +281,34 @@ const HvInput = props => {
       }, 10);
     }
   };
+  const hasOnEnter = onEnter != null;
 
-  const 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
+  // 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)
-
   const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
+
   /**
    * Clears the input value from the state and refocus the input.
    */
-
   const handleClear = useCallback(event => {
     // reset validation status to standBy (only when status is uncontrolled)
-    setValidationState(validationStates.standBy); // clear the input value (only when value 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
+    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]);
   const clearButton = useMemo(() => {
     if (!showClear) {
       return null;
     }
-
-    return /*#__PURE__*/_jsx(HvAdornment // don't control visibility when the search icon is enabled
+    return /*#__PURE__*/_jsx(HvAdornment
+    // don't control visibility when the search icon is enabled
     , {
       className: clsx(classes.adornmentButton, !showSearchIcon && classes.iconClear),
       onClick: handleClear,
@@ -328,21 +317,19 @@ const HvInput = props => {
       icon: _CloseXS || (_CloseXS = /*#__PURE__*/_jsx(CloseXS, {}))
     });
   }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels.clearButtonLabel, elementId]);
+
   /**
    * Calls the onEnter callback and refocus the input.
    */
-
   const handleSearch = useCallback(event => {
     onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, value);
   }, [onEnter, value]);
   const searchButton = useMemo(() => {
     // if the search icon is not actionable, only show it when the input is empty or active
     const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState === validationStates.standBy);
-
     if (!reallyShowIt) {
       return null;
     }
-
     return /*#__PURE__*/_jsx(HvAdornment, {
       className: clsx(classes.adornmentButton),
       onClick: hasOnEnter ? handleSearch : undefined,
@@ -350,10 +337,10 @@ const HvInput = props => {
       icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {}))
     });
   }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState, classes.adornmentButton, handleSearch, labels.searchButtonLabel]);
+
   /**
    * Changes input type and refocus the input.
    */
-
   const handleRevealPassword = useCallback(() => {
     setRevealPassword(!revealPassword);
   }, [revealPassword]);
@@ -361,7 +348,6 @@ const HvInput = props => {
     if (!showRevealPasswordButton) {
       return null;
     }
-
     return /*#__PURE__*/_jsx(HvTooltip, {
       disableFocusListener: true,
       disableTouchListener: true,
@@ -381,47 +367,45 @@ const HvInput = props => {
     if (!showValidationIcon) {
       return null;
     }
-
     if (!isValid(validationState)) {
       return null;
     }
-
     return /*#__PURE__*/_jsx(Success, {
       semantic: "sema1",
       className: classes.icon
     });
-  }, [showValidationIcon, validationState, classes.icon]); // useMemo to avoid repetitive cloning of the custom icon
+  }, [showValidationIcon, validationState, classes.icon]);
 
+  // useMemo to avoid repetitive cloning of the custom icon
   const customIconEl = useMemo(() => /*#__PURE__*/isValidElement(endAdornment) && /*#__PURE__*/React.cloneElement(endAdornment, {
     className: clsx(classes.icon, endAdornment.props.className)
   }), [classes.icon, endAdornment]);
   const adornments = useMemo(() => {
-    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.
+    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__*/_jsxs("div", {
       className: classes.adornmentsBox,
       "aria-hidden": "true",
       children: [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
+  }, [classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]);
 
+  // run initial validation after first render
+  // and also when any validation condition changes
   useEffect(() => {
     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]);
   let errorMessageId;
-
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/_jsxs(HvFormElement, {
     id: id,
     name: name,
@@ -504,13 +488,11 @@ const HvInput = props => {
     })]
   });
 };
-
 process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -519,118 +501,95 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
      * 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.
    *
@@ -638,42 +597,34 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
    * 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.
    *
@@ -683,42 +634,35 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
    * 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.
    */
@@ -727,28 +671,23 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
      * 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.
    */
@@ -757,92 +696,76 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
      * 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`.
    *
@@ -850,18 +773,15 @@ process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
    * 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.