@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/TextArea/TextArea.js

@@ -0,0 +1,542 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "required", "readOnly", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "status", "statusMessage", "aria-errormessage", "placeholder", "autoFocus", "middleCountLabel", "rows", "resizable", "autoScroll", "hideCounter", "validationMessages", "maxCharQuantity", "minCharQuantity", "validation", "blockMax", "inputRef", "onBlur", "onFocus", "inputProps", "countCharProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import isNil from "lodash/isNil";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { refType, setId, useControlled } from "../utils";
+import { HvFormElement, HvBaseInput, HvLabel, HvInfoMessage, HvWarningText, HvCharCounter, useUniqueId } from "..";
+import validationStates, { isInvalid } from "../Forms/FormElement/validationStates";
+import { DEFAULT_ERROR_MESSAGES, validationTypes, hasBuiltInValidations, validateInput, computeValidationState, computeValidationMessage } from "../BaseInput/validations";
+import styles from "./styles";
+/**
+ * A text area is a multiline text input box, with an optional character counter when there is a length limit.
+ */
+
+const HvTextArea = props => {
+  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,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    placeholder,
+    autoFocus = false,
+    middleCountLabel = "/",
+    rows = 1,
+    resizable = false,
+    autoScroll = false,
+    hideCounter = false,
+    validationMessages,
+    maxCharQuantity,
+    minCharQuantity,
+    validation,
+    blockMax = false,
+    inputRef: inputRefProp,
+    onBlur,
+    onFocus,
+    inputProps = {},
+    countCharProps = {}
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const elementId = useUniqueId(id, "hvtextarea");
+  const inputRefOwn = useRef(null);
+  const inputRef = inputRefProp || inputRefOwn;
+  const [focused, setFocused] = React.useState(false); // 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 [validationState, setValidationState] = useControlled(status, validationStates.standBy);
+  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
+  [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]);
+
+  const isOverflow = currentValue => isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity; // 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, validationTypes.none, validation); // this will only run if status is uncontrolled
+
+    setValidationState(computeValidationState(inputValidity, isEmptyValue)); // this will only run if statusMessage is uncontrolled
+
+    setValidationMessage(computeValidationMessage(inputValidity, errorMessages));
+    return inputValidity;
+  }, [errorMessages, inputRef, isEmptyValue, maxCharQuantity, minCharQuantity, required, setValidationMessage, setValidationState, validation, value]);
+  /**
+   * Limit the string to the maxCharQuantity length.
+   *
+   * @param value - string to evaluate
+   * @returns {string|*} - string according the limit
+   */
+
+  const limitValue = currentValue => {
+    if (currentValue === undefined || !blockMax) return currentValue;
+    return !isOverflow(currentValue) ? currentValue : currentValue.substring(0, maxCharQuantity);
+  };
+
+  const [autoScrolling, setAutoScrolling] = useState(autoScroll);
+  const isScrolledDown = useCallback(() => {
+    const el = inputRef.current;
+    return el == null || el.scrollHeight - el.scrollTop === el.clientHeight;
+  }, [inputRef]);
+  const scrollDown = useCallback(() => {
+    const el = inputRef.current;
+
+    if (el != null) {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    }
+  }, [inputRef]);
+  const addScrollListener = useCallback(() => {
+    const scrollHandler = {
+      handleEvent: () => {
+        setAutoScrolling(isScrolledDown());
+      }
+    };
+    inputRef.current.addEventListener("scroll", scrollHandler);
+  }, [inputRef, isScrolledDown]);
+  /**
+   * Validates the text area updating the state and modifying the warning text, also executes
+   * the user provided onBlur passing the current validation status and value.
+   *
+   * @returns {undefined}
+   */
+
+  const onContainerBlurHandler = event => {
+    setFocused(false);
+    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)
+
+    setValidationState(validationStates.standBy);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, value);
+  };
+  /**
+   * Updates the length of the string while is being inputted, also executes the user onChange
+   * allowing the customization of the input if required.
+   *
+   * @param {String} value - The value provided by the HvInput
+   */
+
+
+  const onChangeHandler = (event, currentValue) => {
+    isDirty.current = true;
+    const limitedValue = blockMax ? limitValue(currentValue) : currentValue; // set the input value (only when value is uncontrolled)
+
+    setValue(limitedValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, limitedValue);
+  };
+
+  useEffect(() => {
+    if (autoScroll) {
+      addScrollListener();
+      scrollDown();
+    }
+
+    if (autoScrolling) {
+      scrollDown();
+    }
+  }, [addScrollListener, autoScroll, autoScrolling, scrollDown]); // 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]);
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const hasCounter = maxCharQuantity != null && !hideCounter; // 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, validationTypes.none, minCharQuantity, // if blockMax is true maxCharQuantity will never produce an error
+  // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity
+  maxCharQuantity != null && (blockMax !== true || value != null) ? maxCharQuantity : null, validation, inputProps));
+  const isStateInvalid = isInvalid(validationState);
+  let errorMessageId;
+
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+  }
+
+  return /*#__PURE__*/React.createElement(HvFormElement, {
+    id: id,
+    name: name,
+    status: validationState,
+    disabled: disabled,
+    required: required,
+    readOnly: readOnly,
+    className: clsx(classes.root, className, resizable && classes.resizable, disabled && classes.disabled, isStateInvalid && classes.invalid),
+    onBlur: onContainerBlurHandler
+  }, (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    className: classes.label,
+    id: setId(id, "label"),
+    htmlFor: setId(elementId, "input"),
+    label: label
+  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
+    className: classes.description,
+    id: setId(elementId, "description")
+  }, description)), hasCounter && /*#__PURE__*/React.createElement(HvCharCounter, _extends({
+    id: setId(elementId, "charCounter"),
+    className: classes.characterCounter,
+    separator: middleCountLabel,
+    currentCharQuantity: value.length,
+    maxCharQuantity: maxCharQuantity
+  }, countCharProps)), /*#__PURE__*/React.createElement(HvBaseInput, _extends({
+    classes: {
+      root: classes.baseInput,
+      input: classes.input,
+      inputResizable: classes.inputResizable
+    },
+    id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
+    name: name,
+    value: value,
+    required: required,
+    readOnly: readOnly,
+    disabled: disabled,
+    onChange: onChangeHandler,
+    autoFocus: autoFocus,
+    onFocus: onFocusHandler,
+    placeholder: placeholder,
+    invalid: isStateInvalid,
+    resizable: resizable,
+    multiline: true,
+    rows: rows,
+    inputProps: _objectSpread({
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": isStateInvalid ? true : undefined,
+      "aria-errormessage": errorMessageId,
+      "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description"),
+      "aria-controls": maxCharQuantity ? setId(elementId, "charCounter") : undefined
+    }, inputProps),
+    inputRef: inputRef
+  }, others)), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    className: classes.error,
+    disableBorder: true
+  }, validationMessage));
+};
+
+HvTextArea.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: PropTypes.PropTypes.shape({
+    /**
+     * Styles applied to the root container of the textarea.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the root when resizable is `true`.
+     */
+    disabled: PropTypes.string,
+
+    /**
+     * Style applied to the root when resizable is `true`.
+     */
+    resizable: PropTypes.string,
+
+    /**
+     * Style applied to the root when resizable is `true`.
+     */
+    invalid: PropTypes.string,
+
+    /**
+     * Styles applied to the base input root which is comprising of everything but the labels and descriptions.
+     */
+    baseInput: PropTypes.string,
+
+    /**
+     * Style applied on the text area element.
+     */
+    input: PropTypes.string,
+
+    /**
+     * Styles applied to text area element element when it is resizable. Can be used to set max/min width.
+     */
+    inputResizable: PropTypes.string,
+
+    /**
+     * Styles applied to text area container that holds the label, description and counter.
+     */
+    labelContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    label: PropTypes.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    description: PropTypes.string,
+
+    /**
+     * Style applied on the character counter.
+     */
+    characterCounter: PropTypes.string,
+
+    /**
+     * Styles applied to the error area.
+     */
+    error: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The form element name.
+   */
+  name: PropTypes.string,
+
+  /**
+   * The value of the form element.
+   */
+  value: PropTypes.string,
+
+  /**
+   * When uncontrolled, defines the initial input value.
+   */
+  defaultValue: PropTypes.string,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.
+   */
+  label: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": PropTypes.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": PropTypes.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Indicates that the form element is not editable.
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: PropTypes.bool,
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`.
+   */
+  status: PropTypes.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage: PropTypes.string,
+
+  /**
+   * Identifies the element that provides an error message for the textarea.
+   *
+   * Will only be used when the validation status is invalid.
+   */
+  "aria-errormessage": PropTypes.string,
+
+  /**
+   * The function that will be executed onChange.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The placeholder value of the input.
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Text between the current char counter and max value.
+   */
+  middleCountLabel: PropTypes.string,
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages: PropTypes.shape({
+    /**
+     * The value when a validation fails.
+     */
+    error: PropTypes.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharError: PropTypes.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharError: PropTypes.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredError: PropTypes.string
+  }),
+
+  /**
+   * 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 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,
+
+  /**
+   * 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,
+
+  /**
+   * The number of rows of the text area
+   */
+  rows: PropTypes.number,
+
+  /**
+   * If `true` the component is resizable.
+   */
+  resizable: PropTypes.bool,
+
+  /**
+   * Auto-scroll: automatically scroll to the end on value changes.
+   * Will stop if the user scrolls up and resume if scrolled to the bottom.
+   */
+  autoScroll: PropTypes.bool,
+
+  /**
+   * If `true` it isn't possible to have more characters than the `maxCharQuantity`
+   */
+  blockMax: PropTypes.bool,
+
+  /**
+   * If `true` the character counter isn't shown even if maxCharQuantity is set.
+   */
+  hideCounter: PropTypes.bool,
+
+  /**
+   * Props passed to the HvCharCount component.
+   */
+  countCharProps: PropTypes.instanceOf(Object)
+};
+export default withStyles(styles, {
+  name: "HvTextArea"
+})(HvTextArea);
+//# sourceMappingURL=TextArea.js.map

package/dist/modern/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TextArea/TextArea.js"],"names":["React","useRef","useState","useEffect","useCallback","useMemo","PropTypes","isNil","clsx","withStyles","refType","setId","useControlled","HvFormElement","HvBaseInput","HvLabel","HvInfoMessage","HvWarningText","HvCharCounter","useUniqueId","validationStates","isInvalid","DEFAULT_ERROR_MESSAGES","validationTypes","hasBuiltInValidations","validateInput","computeValidationState","computeValidationMessage","styles","HvTextArea","props","classes","className","id","name","value","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","placeholder","autoFocus","middleCountLabel","rows","resizable","autoScroll","hideCounter","validationMessages","maxCharQuantity","minCharQuantity","validation","blockMax","inputRef","inputRefProp","onBlur","onFocus","inputProps","countCharProps","others","elementId","inputRefOwn","focused","setFocused","isDirty","setValue","isEmptyValue","validationState","setValidationState","standBy","validationMessage","setValidationMessage","errorMessages","error","requiredError","minCharError","maxCharError","isOverflow","currentValue","length","performValidation","inputValidity","current","none","limitValue","undefined","substring","autoScrolling","setAutoScrolling","isScrolledDown","el","scrollHeight","scrollTop","clientHeight","scrollDown","addScrollListener","scrollHandler","handleEvent","addEventListener","onContainerBlurHandler","event","onFocusHandler","onChangeHandler","limitedValue","hasLabel","hasDescription","hasCounter","canShowError","isStateInvalid","errorMessageId","root","invalid","labelContainer","characterCounter","baseInput","input","inputResizable","propTypes","string","shape","isRequired","node","bool","oneOf","func","instanceOf","Object","number"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect, useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport isNil from \"lodash/isNil\";\n\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\n\nimport { refType, setId, useControlled } from \"../utils\";\n\nimport {\n  HvFormElement,\n  HvBaseInput,\n  HvLabel,\n  HvInfoMessage,\n  HvWarningText,\n  HvCharCounter,\n  useUniqueId,\n} from \"..\";\n\nimport validationStates, { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  validationTypes,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n} from \"../BaseInput/validations\";\n\nimport styles from \"./styles\";\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nconst HvTextArea = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    value: valueProp,\n    defaultValue = \"\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n\n    autoFocus = false,\n\n    middleCountLabel = \"/\",\n\n    rows = 1,\n    resizable = false,\n    autoScroll = false,\n\n    hideCounter = false,\n\n    validationMessages,\n\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n\n    blockMax = false,\n\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n\n    inputProps = {},\n    countCharProps = {},\n\n    ...others\n  } = props;\n\n  const elementId = useUniqueId(id, \"hvtextarea\");\n\n  const inputRefOwn = useRef(null);\n  const inputRef = inputRefProp || inputRefOwn;\n\n  const [focused, setFocused] = React.useState(false);\n\n  // signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // validation related state\n  const [validationState, setValidationState] = useControlled(status, validationStates.standBy);\n\n  const [validationMessage, setValidationMessage] = useControlled(statusMessage, \"\");\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\n  );\n\n  const isOverflow = (currentValue) =>\n    isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity;\n\n  // validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation\n    );\n\n    // this will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // this will only run if statusMessage is uncontrolled\n    setValidationMessage(computeValidationMessage(inputValidity, errorMessages));\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  const limitValue = (currentValue) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    return !isOverflow(currentValue) ? currentValue : currentValue.substring(0, maxCharQuantity);\n  };\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.scrollHeight - el.scrollTop === el.clientHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   *\n   * @returns {undefined}\n   */\n  const onContainerBlurHandler = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  const onChangeHandler = (event, currentValue) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event, limitedValue);\n  };\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n      scrollDown();\n    }\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [addScrollListener, autoScroll, autoScrolling, scrollDown]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // if blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null) ? maxCharQuantity : null,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError ? setId(elementId, \"error\") : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(classes.root, className, {\n        [classes.resizable]: resizable,\n        [classes.disabled]: disabled,\n        [classes.invalid]: isStateInvalid,\n      })}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage className={classes.description} id={setId(elementId, \"description\")}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description && setId(elementId, \"description\"),\n          \"aria-controls\": maxCharQuantity ? setId(elementId, \"charCounter\") : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={inputRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} className={classes.error} disableBorder>\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n\nHvTextArea.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.PropTypes.shape({\n    /**\n     * Styles applied to the root container of the textarea.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    resizable: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    invalid: PropTypes.string,\n\n    /**\n     * Styles applied to the base input root which is comprising of everything but the labels and descriptions.\n     */\n    baseInput: PropTypes.string,\n\n    /**\n     * Style applied on the text area element.\n     */\n    input: PropTypes.string,\n    /**\n     * Styles applied to text area element element when it is resizable. Can be used to set max/min width.\n     */\n    inputResizable: PropTypes.string,\n\n    /**\n     * Styles applied to text area container that holds the label, description and counter.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    description: PropTypes.string,\n    /**\n     * Style applied on the character counter.\n     */\n    characterCounter: PropTypes.string,\n    /**\n     * Styles applied to the error area.\n     */\n    error: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\n  /**\n   * The value of the form element.\n   */\n  value: PropTypes.string,\n  /**\n   * When uncontrolled, defines the initial input value.\n   */\n  defaultValue: PropTypes.string,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage: PropTypes.string,\n  /**\n   * Identifies the element that provides an error message for the textarea.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\": PropTypes.string,\n\n  /**\n   * The function that will be executed onChange.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The placeholder value of the input.\n   */\n  placeholder: PropTypes.string,\n\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel: PropTypes.string,\n\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages: PropTypes.shape({\n    /**\n     * The value when a validation fails.\n     */\n    error: PropTypes.string,\n    /**\n     * The message that appears when there are too many characters.\n     */\n    maxCharError: PropTypes.string,\n    /**\n     * The message that appears when there are too few characters.\n     */\n    minCharError: PropTypes.string,\n    /**\n     * The message that appears when the input is empty and required.\n     */\n    requiredError: PropTypes.string,\n  }),\n\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n  /**\n   * Allows passing a ref to the underlying input\n   */\n  inputRef: refType,\n\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state (`invalid`, `valid`).\n   */\n  onBlur: PropTypes.func,\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus: PropTypes.func,\n\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation: PropTypes.func,\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus: PropTypes.bool,\n\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity: PropTypes.number,\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity: PropTypes.number,\n\n  /**\n   * The number of rows of the text area\n   */\n  rows: PropTypes.number,\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable: PropTypes.bool,\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll: PropTypes.bool,\n  /**\n   * If `true` it isn't possible to have more characters than the `maxCharQuantity`\n   */\n  blockMax: PropTypes.bool,\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter: PropTypes.bool,\n\n  /**\n   * Props passed to the HvCharCount component.\n   */\n  countCharProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTextArea\" })(HvTextArea);\n"],"file":"TextArea.js"}

package/dist/modern/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TextArea";
+export * from "./TextArea";

package/dist/modern/TextArea/index.js

@@ -0,0 +1,2 @@
+export { default } from "./TextArea";
+//# sourceMappingURL=index.js.map

package/dist/modern/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TextArea/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB","sourcesContent":["export { default } from \"./TextArea\";\n"],"file":"index.js"}

package/dist/modern/TextArea/styles.js

@@ -0,0 +1,46 @@
+const styles = {
+  root: {
+    display: "inline-block",
+    width: "100%"
+  },
+  resizable: {
+    width: "auto"
+  },
+  disabled: {},
+  invalid: {},
+  baseInput: {
+    clear: "both",
+    float: "left"
+  },
+  input: {},
+  inputResizable: {
+    resize: "auto",
+    minWidth: "150px",
+    maxWidth: "610px"
+  },
+  labelContainer: {
+    float: "left",
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    display: "block",
+    float: "left",
+    paddingBottom: "6px"
+  },
+  description: {
+    display: "block",
+    float: "left"
+  },
+  characterCounter: {
+    display: "block",
+    float: "right",
+    textAlign: "right",
+    marginBottom: "6px"
+  },
+  error: {
+    float: "left"
+  }
+};
+export default styles;
+//# sourceMappingURL=styles.js.map