@hitachivantara/uikit-react-core 2.23.2

package/dist/legacy/Input/Input.js

@@ -0,0 +1,760 @@
+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 _CloseXS, _Info, _span;
+
+var _excluded = ["labels", "classes", "className", "id", "name", "password", "disabled", "isRequired", "infoIcon", "validationIconVisible", "disableClear", "customFixedIcon", "validationIconPosition", "showInfo", "validationType", "validationState", "maxCharQuantity", "minCharQuantity", "validation", "externalWarningTextOverride", "inputProps", "inputRef", "onChange", "onBlur", "onFocus", "onKeyDown", "suggestionSelectedCallback", "suggestionListCallback", "value", "autoFocus", "initialValue"];
+
+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/es.function.name.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.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, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { CloseXS, Info } from "@hitachivantara/uikit-react-icons";
+import { HvAdornment, HvBaseInput, HvFormElement, HvHelperText, HvLabel, HvSuggestions } from "..";
+import withId from "../withId";
+import withLabels from "../withLabels";
+import withTooltips from "../withTooltip";
+import { isKeypress, KeyboardCodes, setId, useControlled } from "../utils";
+import validationTypes from "./validationTypes";
+import validationStates, { isInvalid } from "./validationStates";
+import { validateCharLength, validateInput, validationIcon } from "./validations";
+import styles from "./styles";
+import isBrowser from "../utils/browser";
+var DEFAULT_LABELS = {
+  inputLabel: "",
+  placeholder: "",
+  infoText: "",
+  warningText: "something wrong",
+  maxCharQuantityWarningText: "The value is too big",
+  minCharQuantityWarningText: "The value is too short",
+  requiredWarningText: "The value is required",
+  clearButtonLabel: "Clear the text"
+};
+/**
+ * An input is a graphical control element that allows the user to write text.
+ */
+
+var HvInput = function HvInput(props) {
+  var _inputRef$current;
+
+  var labels = props.labels,
+      classes = props.classes,
+      className = props.className,
+      id = props.id,
+      name = props.name,
+      _props$password = props.password,
+      password = _props$password === void 0 ? false : _props$password,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      _props$infoIcon = props.infoIcon,
+      infoIcon = _props$infoIcon === void 0 ? false : _props$infoIcon,
+      _props$validationIcon = props.validationIconVisible,
+      validationIconVisible = _props$validationIcon === void 0 ? true : _props$validationIcon,
+      _props$disableClear = props.disableClear,
+      disableClear = _props$disableClear === void 0 ? false : _props$disableClear,
+      customFixedIcon = props.customFixedIcon,
+      _props$validationIcon2 = props.validationIconPosition,
+      validationIconPosition = _props$validationIcon2 === void 0 ? "right" : _props$validationIcon2,
+      _props$showInfo = props.showInfo,
+      showInfo = _props$showInfo === void 0 ? true : _props$showInfo,
+      _props$validationType = props.validationType,
+      validationType = _props$validationType === void 0 ? validationTypes.none : _props$validationType,
+      validationStateProp = props.validationState,
+      maxCharQuantity = props.maxCharQuantity,
+      minCharQuantity = props.minCharQuantity,
+      validation = props.validation,
+      externalWarningTextOverride = props.externalWarningTextOverride,
+      _props$inputProps = props.inputProps,
+      inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+      inputRefProp = props.inputRef,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function (e, val) {
+    return val;
+  } : _props$onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onKeyDown = props.onKeyDown,
+      suggestionSelectedCallback = props.suggestionSelectedCallback,
+      suggestionListCallback = props.suggestionListCallback,
+      valueProp = props.value,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      initialValue = props.initialValue,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(valueProp || initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      suggestionValues = _useState4[0],
+      setSuggestionValues = _useState4[1]; // validation related state
+
+
+  var _useControlled = useControlled(validationStateProp, value ? validationStates.filled : validationStates.empty),
+      _useControlled2 = _slicedToArray(_useControlled, 2),
+      validationState = _useControlled2[0],
+      setValidationState = _useControlled2[1];
+
+  var _useControlled3 = useControlled(externalWarningTextOverride, labels.warningText),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      warningText = _useControlled4[0],
+      setWarningText = _useControlled4[1];
+
+  var materialInputRef = useRef(null);
+  var inputRef = useRef(inputRefProp || null);
+  var suggestionRef = useRef({});
+  useEffect(function () {
+    if (valueProp != null) setValue(valueProp);
+  }, [valueProp]);
+  useEffect(function () {
+    suggestionRef.current = document.getElementById(setId(id, "suggestions")); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /**
+   * Updates the states while the input is being entered.
+   *
+   * @param {String} val - the inputted value.
+   * @param {*} warnText - the error text below the input.
+   */
+
+  var manageInputValueState = function manageInputValueState(val, warnText) {
+    setValidationState(function () {
+      // this will only run if validationState is uncontrolled
+      setWarningText(warnText);
+      return val ? validationStates.filled : validationStates.empty;
+    });
+    setValue(val);
+  };
+  /**
+   * Looks for the node that represent the input inside the material tree and focus it.
+   */
+
+
+  var focusInput = function focusInput() {
+    materialInputRef.current.focus();
+  };
+  /**
+   * Clears the input value from the state and refocus the input.
+   *
+   * Note: given than the input component from material doesn't offer any api to focus
+   * this timeout with a node focus was used to solve the problem
+   * because the reference to the input is lost when the component is updated.
+   */
+
+
+  var handleClear = function handleClear(event) {
+    var val = "";
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, val);
+    manageInputValueState(val, null);
+    setTimeout(function () {
+      focusInput();
+    });
+  };
+  /**
+   * Clears the suggestion array.
+   */
+
+
+  var suggestionClearHandler = function suggestionClearHandler() {
+    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) {
+    manageInputValueState(item.label);
+    focusInput();
+    suggestionClearHandler();
+    suggestionSelectedCallback(item);
+  };
+  /**
+   * Updates the state while is being inputted, also executes the user onChange
+   * allowing the customization of the input if required.
+   *
+   * @param {Object} event - The event provided by the material ui input
+   * @param val
+   */
+
+
+  var onChangeHandler = function onChangeHandler(event, val) {
+    var _onChange;
+
+    var newValue = (_onChange = onChange === null || onChange === void 0 ? void 0 : onChange(event, val)) !== null && _onChange !== void 0 ? _onChange : val;
+    suggestionHandler(val);
+    manageInputValueState(newValue, null);
+  };
+  /**
+   * Find the focused element onBlur.
+   *
+   * @param event
+   * @returns {any}
+   */
+
+
+  var getFocusedElement = function getFocusedElement(event) {
+    return isBrowser("ie") ? document.activeElement : event.relatedTarget;
+  };
+  /**
+   * 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 (suggestionRef !== null && suggestionRef !== void 0 && suggestionRef.current && suggestionRef !== null && suggestionRef !== void 0 && suggestionRef.current.contains(getFocusedElement(event))) return;
+    var validationStateResult;
+    var warningTextResult = null;
+
+    if (!value) {
+      if (isRequired) {
+        validationStateResult = validationStates.invalid;
+        warningTextResult = labels.requiredWarningText;
+      } else {
+        validationStateResult = validationStates.empty;
+      }
+    } else {
+      var valueSizeStatus = validateCharLength(value, maxCharQuantity, minCharQuantity);
+      var valid = validateInput(value, validation, validationType);
+
+      if (valid && valueSizeStatus) {
+        validationStateResult = validationStates.valid;
+      } else if (!valid || !valueSizeStatus) {
+        validationStateResult = validationStates.invalid;
+
+        if (maxCharQuantity && value.length > maxCharQuantity) {
+          warningTextResult = labels.maxCharQuantityWarningText;
+        } else if (minCharQuantity && value.length < minCharQuantity) {
+          warningTextResult = labels.minCharQuantityWarningText;
+        } else {
+          warningTextResult = labels.warningText;
+        }
+      }
+    }
+
+    setValidationState(function () {
+      // this will only run if validationState is uncontrolled
+      setWarningText(warningTextResult);
+      return validationStateResult;
+    });
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, validationStateResult);
+  };
+  /**
+   * 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() {
+    manageInputValueState(value, null);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
+  };
+
+  var getSuggestions = function getSuggestions(li) {
+    var _listEl$getElementsBy;
+
+    var listEl = document.getElementById(setId(id, "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) && !!suggestionValues) {
+      var li = getSuggestions(0);
+      li === null || li === void 0 ? void 0 : li.focus();
+    }
+
+    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 getInputAdornments = function getInputAdornments(showValidationIcon, showClear) {
+    if (!showValidationIcon && !showClear && !customFixedIcon) return null;
+    var customIconEl = /*#__PURE__*/isValidElement(customFixedIcon) && /*#__PURE__*/React.cloneElement(customFixedIcon, {
+      className: clsx(classes.icon, customFixedIcon.props.className)
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.adornmentsBox,
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement(HvAdornment, {
+      className: clsx(classes.adornmentButton, classes.iconClear),
+      isVisible: showClear,
+      onClick: handleClear,
+      onMouseDown: handleClear,
+      title: labels.clearButtonLabel,
+      "aria-label": labels.clearButtonLabel,
+      icon: _CloseXS || (_CloseXS = /*#__PURE__*/React.createElement(CloseXS, null))
+    }), showValidationIcon && validationIcon(validationState, classes.icon) || customIconEl);
+  };
+
+  var isStateInvalid = isInvalid(validationState);
+  var hasValidation = isStateInvalid || validationType !== validationTypes.none || maxCharQuantity != null || minCharQuantity != null || validation != null; // show the validation icon only if the input is enabled, validationIconVisible and showInfo are true and:
+  // - the input has some sort of validation
+  // - also if states is invalid (even if there is no validation, because that would mean it had to be explicitly set like that)
+
+  var showValidationIcon = !disabled && validationIconVisible && showInfo && hasValidation; // show the clear button only if the input is enabled, disableClear is false and the input is not empty
+
+  var showClear = !disabled && !disableClear && value != null && value !== "";
+  var adornments = getInputAdornments(showValidationIcon, showClear);
+
+  var IconDisplay = function IconDisplay() {
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: classes.infoIconContainer
+    }, _Info || (_Info = /*#__PURE__*/React.createElement(Info, null)));
+  };
+
+  var InfoIcon = withTooltips(IconDisplay, labels.infoText);
+  var showInfoIcon = showInfo && infoIcon && labels.infoText;
+  return /*#__PURE__*/React.createElement(HvFormElement, {
+    id: id,
+    name: name,
+    className: clsx(classes.root, className),
+    onBlur: onContainerBlurHandler,
+    value: value,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, labels.inputLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(id, "label"),
+    htmlFor: setId(id, "input"),
+    "aria-disabled": disabled,
+    className: clsx(classes.label, disabled && classes.labelDisabled),
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, labels.inputLabel, isRequired && (_span || (_span = /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true"
+    }, "*"))))
+  }), showInfoIcon && /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(HvBaseInput, _extends({
+    id: setId(id, "input"),
+    autoFocus: autoFocus,
+    onKeyDown: onKeyDownHandler,
+    onBlur: onInputBlurHandler,
+    onFocus: onFocusHandler,
+    placeholder: labels.placeholder || undefined,
+    type: password ? "password" : "text",
+    classes: {
+      input: classes.input,
+      inputRoot: classes.inputRoot,
+      inputRootFocused: classes.inputRootFocused,
+      inputDisabled: classes.inputDisabled,
+      multiLine: classes.multiLine
+    },
+    className: clsx(disabled && classes.inputRootDisabled, isStateInvalid && classes.inputRootInvalid),
+    invalid: isStateInvalid,
+    required: isRequired,
+    onChange: onChangeHandler,
+    inputProps: _objectSpread({
+      ref: materialInputRef
+    }, inputProps),
+    inputRef: inputRefProp || inputRef
+  }, validationIconPosition === "right" && {
+    endAdornment: adornments
+  }, validationIconPosition === "left" && {
+    startAdornment: adornments
+  }, others)), /*#__PURE__*/React.createElement(HvSuggestions, {
+    id: setId(id, "suggestions"),
+    classes: {
+      root: classes.suggestionsContainer,
+      list: classes.suggestionList
+    },
+    expanded: !!suggestionValues,
+    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
+  }), /*#__PURE__*/React.createElement(HvHelperText, _extends({
+    id: setId(id, "description")
+  }, !isStateInvalid && (showInfoIcon || !labels.infoText) ? {
+    style: {
+      display: "none"
+    }
+  } : {}, {
+    className: clsx(classes.infoText, infoIcon && classes.infoIcon),
+    notification: isStateInvalid ? warningText : ""
+  }), labels.infoText));
+};
+
+process.env.NODE_ENV !== "production" ? HvInput.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Component name identifier to be used in the context.
+   */
+  name: 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 input root which is comprising of everything but the labels and descriptions.
+     */
+    inputRoot: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is disabled.
+     */
+    inputRootDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is invalid.
+     */
+    inputRootInvalid: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is focused.
+     */
+    inputRootFocused: PropTypes.string,
+
+    /**
+     * Styles applied to input html element.
+     */
+    input: PropTypes.string,
+
+    /**
+     * Styles applied to input html element when it is disabled.
+     */
+    inputDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the suggestions list.
+     */
+    suggestionsContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the suggestions list.
+     */
+    suggestionList: PropTypes.string,
+
+    /**
+     * Styles applied to input html element when it is multiline mode.
+     */
+    multiLine: PropTypes.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    label: PropTypes.string,
+
+    /**
+     * Styles applied to the label element when it is disabled.
+     */
+    labelDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the labels elements.
+     */
+    labelContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the icon information container.
+     */
+    infoIconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the icon information text.
+     */
+    infoText: PropTypes.string,
+
+    /**
+     * Styles applied to the description.
+     */
+    text: PropTypes.string,
+
+    /**
+     * Styles applied to the description when it is showing an information.
+     */
+    textInfo: PropTypes.string,
+
+    /**
+     * Styles applied to the description when it is showing a warning.
+     */
+    infoIcon: 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,
+    adornmentsBox: PropTypes.string,
+    adornmentButton: PropTypes.string,
+
+    /**
+     * IE11 specific styling.
+     */
+    "@global": PropTypes.string
+  }).isRequired,
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  labels: PropTypes.shape({
+    /**
+     * The label on top of the input.
+     */
+    inputLabel: PropTypes.string,
+
+    /**
+     * The placeholder value of the input.
+     */
+    placeholder: PropTypes.string,
+
+    /**
+     * The default value of the info text below the input.
+     */
+    infoText: PropTypes.string,
+
+    /**
+     * The value when a validation fails.
+     */
+    warningText: PropTypes.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharQuantityWarningText: PropTypes.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharQuantityWarningText: PropTypes.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredWarningText: PropTypes.string,
+
+    /**
+     * The label of the clear button.
+     */
+    clearButtonLabel: PropTypes.string
+  }),
+
+  /**
+   * Attributes applied to the input element.
+   */
+  inputProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Allows passing a ref to the underlying input
+   */
+  inputRef: PropTypes.shape({
+    current: PropTypes.any
+  }),
+
+  /**
+   * If ´true´ the input is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If ´true´ the input value must be filled on blur or else the validation fails.
+   */
+  isRequired: PropTypes.bool,
+
+  /**
+   * If ´true´ the input is of type password hiding the value.
+   */
+  password: PropTypes.bool,
+
+  /**
+   * 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,
+
+  /**
+   * The function that will be executed onBlur, allows checking the validation state,
+   * it receives the value and the validation state (´empty´, ´filled´, ´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 function that will be executed after selecting a value in the suggestion list
+   */
+  suggestionSelectedCallback: PropTypes.func,
+
+  /**
+   * If `true` information label is shown, `false` otherwise.
+   */
+  showInfo: PropTypes.bool,
+
+  /**
+   * 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,
+
+  /**
+   * The value of the input, when controlled.
+   */
+  value: PropTypes.string,
+
+  /**
+   * The initial value of the input, when uncontrolled.
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * If `true` it should autofocus.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * The initial state of the input.
+   * note: Is recommended you use the provided validationStates object to set this value.
+   */
+  validationState: PropTypes.oneOf(["empty", "filled", "invalid", "valid"]),
+
+  /**
+   * Show info icon with info label.infoText.
+   */
+  infoIcon: PropTypes.bool,
+
+  /**
+   * If `true` the validation icon is visible, `false` otherwise
+   */
+  validationIconVisible: PropTypes.bool,
+
+  /**
+   * If `true` the clear button is disabled if `false` is enable
+   */
+  disableClear: PropTypes.bool,
+
+  /**
+   * The icon position of the input. It is recommended to use the provided validationIconPosition object to set this value.
+   */
+  validationIconPosition: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * a custom icon to be added into the input.
+   */
+  customFixedIcon: 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,
+
+  /**
+   * Which type of default validation should the input perform. It is recommended to use the provided ValidationTypes object to set this value.
+   */
+  validationType: PropTypes.oneOf(["none", "number", "email"]),
+
+  /**
+   * Overrides any validation with a specific error/warning message to set in the warningText slot.
+   */
+  externalWarningTextOverride: PropTypes.string
+} : void 0;
+export default withStyles(styles, {
+  name: "HvInput"
+})(withLabels(DEFAULT_LABELS)(withId(HvInput)));
+//# sourceMappingURL=Input.js.map