@hitachivantara/uikit-react-core 4.4.3 → 5.0.0-next.10

package/dist/Input/Input.js

@@ -1,852 +0,0 @@
-"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 _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 _styles = require("@mui/styles");
-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 _styles2 = _interopRequireDefault(require("./styles"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _CloseXS, _Search, _PreviewOff, _Preview;
-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); 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) { (0, _defineProperty2.default)(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; }
-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__*/(0, _jsxRuntime.jsx)(_.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: _CloseXS || (_CloseXS = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.CloseXS, {}))
-    });
-  }, [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__*/(0, _jsxRuntime.jsx)(_.HvAdornment, {
-      className: (0, _clsx.default)(classes.adornmentButton),
-      onClick: hasOnEnter ? handleSearch : undefined,
-      "aria-label": labels.searchButtonLabel,
-      icon: _Search || (_Search = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Search, {}))
-    });
-  }, [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__*/(0, _jsxRuntime.jsx)(_.HvTooltip, {
-      disableFocusListener: true,
-      disableTouchListener: true,
-      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvTypography, {
-        children: revealPassword ? labels.revealPasswordButtonClickToHideTooltip : labels.revealPasswordButtonClickToShowTooltip
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvAdornment, {
-        className: classes.adornmentButton,
-        onClick: handleRevealPassword,
-        "aria-label": labels.revealPasswordButtonLabel,
-        "aria-controls": (0, _utils.setId)(elementId, "input"),
-        icon: revealPassword ? _PreviewOff || (_PreviewOff = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.PreviewOff, {})) : _Preview || (_Preview = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Preview, {}))
-      })
-    });
-  }, [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__*/(0, _jsxRuntime.jsx)(_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__*/(0, _jsxRuntime.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
-  (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__*/(0, _jsxRuntime.jsxs)(_.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,
-    children: [(hasLabel || hasDescription) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: classes.labelContainer,
-      children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvLabel, {
-        id: (0, _utils.setId)(elementId, "label"),
-        className: classes.label,
-        htmlFor: (0, _utils.setId)(elementId, "input"),
-        label: label
-      }), hasDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvInfoMessage, {
-        id: (0, _utils.setId)(elementId, "description"),
-        className: classes.description,
-        children: description
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvBaseInput, _objectSpread({
-      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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [hasSuggestions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        role: "presentation",
-        className: classes.inputExtension
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.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__*/(0, _jsxRuntime.jsx)(_.HvWarningText, {
-      id: (0, _utils.setId)(elementId, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
-};
-process.env.NODE_ENV !== "production" ? 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
-} : void 0;
-var _default = (0, _styles.withStyles)(_styles2.default, {
-  name: "HvInput"
-})(HvInput);
-exports.default = _default;
-//# sourceMappingURL=Input.js.map