carbon-react 111.12.4 → 111.12.6

package/esm/components/textarea/textarea.component.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
@@ -17,7 +16,7 @@ import useInputAccessibility from "../../hooks/__internal__/useInputAccessibilit
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+import Box from "../box"; // TODO: Change characterLimit type to number - batch with other breaking changes
 
 const Textarea = ({
   autoFocus,
@@ -66,13 +65,13 @@ const Textarea = ({
   const {
     current: id
   } = useRef(idProp || guid());
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   const minHeight = useRef(MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
-    if (textarea.scrollHeight > minHeight.current) {
+    if (textarea !== null && textarea !== void 0 && textarea.scrollHeight && (textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight) > minHeight.current) {
       textarea.style.height = "0px"; // Set the height so all content is shown
 
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
@@ -97,7 +96,9 @@ const Textarea = ({
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   useEffect(() => {
     if (rows) {
-      minHeight.current = inputRef.current.scrollHeight;
+      var _inputRef$current;
+
+      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.scrollHeight) || 0;
     }
   }, [rows]);
   useEffect(() => {
@@ -107,8 +108,10 @@ const Textarea = ({
   });
   useEffect(() => {
     if (expandable) {
+      var _inputRef$current2;
+
       window.addEventListener("resize", expandTextarea);
-      minHeight.current = inputRef.current.clientHeight;
+      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.clientHeight) || 0;
     }
 
     return () => {
@@ -118,38 +121,7 @@ const Textarea = ({
     };
   }, [expandable]);
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    tooltipPosition: tooltipPosition,
-    helpAriaLabel: helpAriaLabel
-  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
-    labelInline: labelInline,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
-    hasIcon: hasIconInside
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    fieldHelpId: fieldHelpId,
-    error: error,
-    warning: warning,
-    info: info,
-    label: label,
-    labelId: labelId,
-    disabled: disabled,
-    id: id,
-    labelInline: computeLabelPropValues(labelInline),
-    labelAlign: computeLabelPropValues(labelAlign),
-    labelWidth: computeLabelPropValues(labelWidth),
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelSpacing: labelSpacing,
-    isRequired: props.required,
-    useValidationIcon: computeLabelPropValues(validationOnLabel),
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn
-  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: error,
-    warning: warning
-  }), /*#__PURE__*/React.createElement(InputPresentation, {
+  const input = /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
     readOnly: readOnly,
@@ -157,9 +129,7 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info
-  }, validationRedesignOptIn && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!error && warning)
-  }), /*#__PURE__*/React.createElement(Input, _extends({
+  }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
@@ -171,7 +141,6 @@ const Textarea = ({
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
-    labelInline: labelInline,
     placeholder: disabled ? "" : placeholder,
     rows: rows,
     cols: cols,
@@ -187,131 +156,570 @@ const Textarea = ({
     info: info,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
-  }))), characterCount)));
+  }));
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    tooltipPosition: tooltipPosition,
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
+    labelInline: labelInline,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    hasIcon: hasIconInside
+  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
+    fieldHelp: computeLabelPropValues(fieldHelp),
+    fieldHelpId: fieldHelpId,
+    error: error,
+    warning: warning,
+    info: info,
+    label: label,
+    labelId: labelId,
+    disabled: disabled,
+    id: id,
+    labelInline: computeLabelPropValues(labelInline),
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelWidth: computeLabelPropValues(labelWidth),
+    labelHelp: computeLabelPropValues(labelHelp),
+    labelSpacing: labelSpacing,
+    isRequired: props.required,
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), input) : input), characterCount)));
 };
 
-Textarea.propTypes = { ...marginPropTypes,
-
-  /** Automatically focus the input on component mount */
-  autoFocus: PropTypes.bool,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+Textarea.propTypes = {
+  "about": PropTypes.string,
+  "accept": PropTypes.string,
+  "accessKey": PropTypes.string,
+  "adaptiveLabelBreakpoint": PropTypes.number,
+  "align": PropTypes.oneOf(["left", "right"]),
+  "alt": PropTypes.string,
+  "aria-activedescendant": PropTypes.string,
+  "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-autocomplete": PropTypes.oneOf(["both", "inline", "list", "none"]),
+  "aria-busy": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-checked": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-colcount": PropTypes.number,
+  "aria-colindex": PropTypes.number,
+  "aria-colspan": PropTypes.number,
+  "aria-controls": PropTypes.string,
+  "aria-current": PropTypes.oneOfType([PropTypes.oneOf(["date", "false", "location", "page", "step", "time", "true"]), PropTypes.bool]),
+  "aria-describedby": PropTypes.string,
+  "aria-details": PropTypes.string,
+  "aria-disabled": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-dropeffect": PropTypes.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
+  "aria-errormessage": PropTypes.string,
+  "aria-expanded": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-flowto": PropTypes.string,
+  "aria-grabbed": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-haspopup": PropTypes.oneOfType([PropTypes.oneOf(["dialog", "false", "grid", "listbox", "menu", "tree", "true"]), PropTypes.bool]),
+  "aria-hidden": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-invalid": PropTypes.oneOfType([PropTypes.oneOf(["false", "grammar", "spelling", "true"]), PropTypes.bool]),
+  "aria-keyshortcuts": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "aria-level": PropTypes.number,
+  "aria-live": PropTypes.oneOf(["assertive", "off", "polite"]),
+  "aria-modal": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiline": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiselectable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-orientation": PropTypes.oneOf(["horizontal", "vertical"]),
+  "aria-owns": PropTypes.string,
+  "aria-placeholder": PropTypes.string,
+  "aria-posinset": PropTypes.number,
+  "aria-pressed": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-readonly": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-relevant": PropTypes.oneOf(["additions removals", "additions text", "additions", "all", "removals additions", "removals text", "removals", "text additions", "text removals", "text"]),
+  "aria-required": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-roledescription": PropTypes.string,
+  "aria-rowcount": PropTypes.number,
+  "aria-rowindex": PropTypes.number,
+  "aria-rowspan": PropTypes.number,
+  "aria-selected": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-setsize": PropTypes.number,
+  "aria-sort": PropTypes.oneOf(["ascending", "descending", "none", "other"]),
+  "aria-valuemax": PropTypes.number,
+  "aria-valuemin": PropTypes.number,
+  "aria-valuenow": PropTypes.number,
+  "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
+  "autoCapitalize": PropTypes.string,
+  "autoComplete": PropTypes.string,
+  "autoCorrect": PropTypes.string,
+  "autoFocus": PropTypes.bool,
+  "autoSave": PropTypes.string,
+  "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
+  "characterLimit": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "checked": PropTypes.bool,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "color": PropTypes.string,
+  "cols": PropTypes.number,
+  "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
+  "contextMenu": PropTypes.string,
+  "crossOrigin": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
+  "dangerouslySetInnerHTML": PropTypes.shape({
+    "__html": PropTypes.string.isRequired
+  }),
   "data-component": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
-
-  /** id of the input */
-  id: PropTypes.string,
-
-  /** Character limit of the textarea */
-  characterLimit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Type of the icon that will be rendered next to the input */
-  children: PropTypes.node,
-
-  /** The visible width of the text control, in average character widths */
-  cols: PropTypes.number,
-
-  /** Adds disabled property */
-  disabled: PropTypes.bool,
-
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit: PropTypes.bool,
-
-  /** Allows the Textareas Height to change based on user input */
-  expandable: PropTypes.bool,
-
-  /** Help content to be displayed under an input */
-  fieldHelp: PropTypes.node,
-
-  /** The content of the label for the input */
-  label: PropTypes.string,
-
-  /** Text applied to label help tooltip */
-  labelHelp: PropTypes.node,
-
-  /** Inline label alignment */
-  labelAlign: PropTypes.oneOf(["left", "right"]),
-
-  /** When true, label is placed in line with an input */
-  labelInline: PropTypes.bool,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth: PropTypes.number,
-
-  /** Width of an input in percentage. Works only when labelInline is true */
-  inputWidth: PropTypes.number,
-
-  /** Name of the input */
-  name: PropTypes.string,
-
-  /** Callback fired when the user types in the Textarea */
-  onChange: PropTypes.func,
-
-  /** Placeholder text for the component */
-  placeholder: PropTypes.string,
-
-  /** Adds readOnly property */
-  readOnly: PropTypes.bool,
-
-  /** The number of visible text lines for the control */
-  rows: PropTypes.number,
-
-  /** One of type of size to apply to the textarea */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** The value of the Textarea */
-  value: PropTypes.string,
-
-  /** Whether to display the character count message in red */
-  warnOverLimit: PropTypes.bool,
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel: PropTypes.bool,
-
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Icon to display inside of the Textarea
-   */
-  inputIcon: PropTypes.string,
-
-  /** Message to be displayed in a Tooltip when the user hovers over the help icon */
-  tooltipMessage: PropTypes.string,
-
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint: PropTypes.number,
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool,
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: PropTypes.string
+  "datatype": PropTypes.string,
+  "defaultChecked": PropTypes.bool,
+  "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
+  "dir": PropTypes.string,
+  "disabled": PropTypes.bool,
+  "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "enforceCharacterLimit": PropTypes.bool,
+  "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "expandable": PropTypes.bool,
+  "fieldHelp": PropTypes.node,
+  "form": PropTypes.string,
+  "formAction": PropTypes.string,
+  "formEncType": PropTypes.string,
+  "formMethod": PropTypes.string,
+  "formNoValidate": PropTypes.bool,
+  "formTarget": PropTypes.string,
+  "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "helpAriaLabel": PropTypes.string,
+  "hidden": PropTypes.bool,
+  "id": PropTypes.string,
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "inlist": PropTypes.any,
+  "inputIcon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
+  "inputRef": PropTypes.func,
+  "inputWidth": PropTypes.number,
+  "is": PropTypes.string,
+  "itemID": PropTypes.string,
+  "itemProp": PropTypes.string,
+  "itemRef": PropTypes.string,
+  "itemScope": PropTypes.bool,
+  "itemType": PropTypes.string,
+  "label": PropTypes.string,
+  "labelAlign": PropTypes.oneOf(["left", "right"]),
+  "labelHelp": PropTypes.node,
+  "labelInline": PropTypes.bool,
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "labelWidth": PropTypes.number,
+  "lang": PropTypes.string,
+  "list": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "maxLength": PropTypes.number,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "min": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "minLength": PropTypes.number,
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "multiple": PropTypes.bool,
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onAbort": PropTypes.func,
+  "onAbortCapture": PropTypes.func,
+  "onAnimationEnd": PropTypes.func,
+  "onAnimationEndCapture": PropTypes.func,
+  "onAnimationIteration": PropTypes.func,
+  "onAnimationIterationCapture": PropTypes.func,
+  "onAnimationStart": PropTypes.func,
+  "onAnimationStartCapture": PropTypes.func,
+  "onAuxClick": PropTypes.func,
+  "onAuxClickCapture": PropTypes.func,
+  "onBeforeInput": PropTypes.func,
+  "onBeforeInputCapture": PropTypes.func,
+  "onBlur": PropTypes.func,
+  "onBlurCapture": PropTypes.func,
+  "onCanPlay": PropTypes.func,
+  "onCanPlayCapture": PropTypes.func,
+  "onCanPlayThrough": PropTypes.func,
+  "onCanPlayThroughCapture": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onChangeCapture": PropTypes.func,
+  "onClick": PropTypes.func,
+  "onClickCapture": PropTypes.func,
+  "onCompositionEnd": PropTypes.func,
+  "onCompositionEndCapture": PropTypes.func,
+  "onCompositionStart": PropTypes.func,
+  "onCompositionStartCapture": PropTypes.func,
+  "onCompositionUpdate": PropTypes.func,
+  "onCompositionUpdateCapture": PropTypes.func,
+  "onContextMenu": PropTypes.func,
+  "onContextMenuCapture": PropTypes.func,
+  "onCopy": PropTypes.func,
+  "onCopyCapture": PropTypes.func,
+  "onCut": PropTypes.func,
+  "onCutCapture": PropTypes.func,
+  "onDoubleClick": PropTypes.func,
+  "onDoubleClickCapture": PropTypes.func,
+  "onDrag": PropTypes.func,
+  "onDragCapture": PropTypes.func,
+  "onDragEnd": PropTypes.func,
+  "onDragEndCapture": PropTypes.func,
+  "onDragEnter": PropTypes.func,
+  "onDragEnterCapture": PropTypes.func,
+  "onDragExit": PropTypes.func,
+  "onDragExitCapture": PropTypes.func,
+  "onDragLeave": PropTypes.func,
+  "onDragLeaveCapture": PropTypes.func,
+  "onDragOver": PropTypes.func,
+  "onDragOverCapture": PropTypes.func,
+  "onDragStart": PropTypes.func,
+  "onDragStartCapture": PropTypes.func,
+  "onDrop": PropTypes.func,
+  "onDropCapture": PropTypes.func,
+  "onDurationChange": PropTypes.func,
+  "onDurationChangeCapture": PropTypes.func,
+  "onEmptied": PropTypes.func,
+  "onEmptiedCapture": PropTypes.func,
+  "onEncrypted": PropTypes.func,
+  "onEncryptedCapture": PropTypes.func,
+  "onEnded": PropTypes.func,
+  "onEndedCapture": PropTypes.func,
+  "onError": PropTypes.func,
+  "onErrorCapture": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "onFocusCapture": PropTypes.func,
+  "onGotPointerCapture": PropTypes.func,
+  "onGotPointerCaptureCapture": PropTypes.func,
+  "onInput": PropTypes.func,
+  "onInputCapture": PropTypes.func,
+  "onInvalid": PropTypes.func,
+  "onInvalidCapture": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onKeyDownCapture": PropTypes.func,
+  "onKeyPress": PropTypes.func,
+  "onKeyPressCapture": PropTypes.func,
+  "onKeyUp": PropTypes.func,
+  "onKeyUpCapture": PropTypes.func,
+  "onLoad": PropTypes.func,
+  "onLoadCapture": PropTypes.func,
+  "onLoadedData": PropTypes.func,
+  "onLoadedDataCapture": PropTypes.func,
+  "onLoadedMetadata": PropTypes.func,
+  "onLoadedMetadataCapture": PropTypes.func,
+  "onLoadStart": PropTypes.func,
+  "onLoadStartCapture": PropTypes.func,
+  "onLostPointerCapture": PropTypes.func,
+  "onLostPointerCaptureCapture": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "onMouseDownCapture": PropTypes.func,
+  "onMouseEnter": PropTypes.func,
+  "onMouseLeave": PropTypes.func,
+  "onMouseMove": PropTypes.func,
+  "onMouseMoveCapture": PropTypes.func,
+  "onMouseOut": PropTypes.func,
+  "onMouseOutCapture": PropTypes.func,
+  "onMouseOver": PropTypes.func,
+  "onMouseOverCapture": PropTypes.func,
+  "onMouseUp": PropTypes.func,
+  "onMouseUpCapture": PropTypes.func,
+  "onPaste": PropTypes.func,
+  "onPasteCapture": PropTypes.func,
+  "onPause": PropTypes.func,
+  "onPauseCapture": PropTypes.func,
+  "onPlay": PropTypes.func,
+  "onPlayCapture": PropTypes.func,
+  "onPlaying": PropTypes.func,
+  "onPlayingCapture": PropTypes.func,
+  "onPointerCancel": PropTypes.func,
+  "onPointerCancelCapture": PropTypes.func,
+  "onPointerDown": PropTypes.func,
+  "onPointerDownCapture": PropTypes.func,
+  "onPointerEnter": PropTypes.func,
+  "onPointerEnterCapture": PropTypes.func,
+  "onPointerLeave": PropTypes.func,
+  "onPointerLeaveCapture": PropTypes.func,
+  "onPointerMove": PropTypes.func,
+  "onPointerMoveCapture": PropTypes.func,
+  "onPointerOut": PropTypes.func,
+  "onPointerOutCapture": PropTypes.func,
+  "onPointerOver": PropTypes.func,
+  "onPointerOverCapture": PropTypes.func,
+  "onPointerUp": PropTypes.func,
+  "onPointerUpCapture": PropTypes.func,
+  "onProgress": PropTypes.func,
+  "onProgressCapture": PropTypes.func,
+  "onRateChange": PropTypes.func,
+  "onRateChangeCapture": PropTypes.func,
+  "onReset": PropTypes.func,
+  "onResetCapture": PropTypes.func,
+  "onScroll": PropTypes.func,
+  "onScrollCapture": PropTypes.func,
+  "onSeeked": PropTypes.func,
+  "onSeekedCapture": PropTypes.func,
+  "onSeeking": PropTypes.func,
+  "onSeekingCapture": PropTypes.func,
+  "onSelect": PropTypes.func,
+  "onSelectCapture": PropTypes.func,
+  "onStalled": PropTypes.func,
+  "onStalledCapture": PropTypes.func,
+  "onSubmit": PropTypes.func,
+  "onSubmitCapture": PropTypes.func,
+  "onSuspend": PropTypes.func,
+  "onSuspendCapture": PropTypes.func,
+  "onTimeUpdate": PropTypes.func,
+  "onTimeUpdateCapture": PropTypes.func,
+  "onTouchCancel": PropTypes.func,
+  "onTouchCancelCapture": PropTypes.func,
+  "onTouchEnd": PropTypes.func,
+  "onTouchEndCapture": PropTypes.func,
+  "onTouchMove": PropTypes.func,
+  "onTouchMoveCapture": PropTypes.func,
+  "onTouchStart": PropTypes.func,
+  "onTouchStartCapture": PropTypes.func,
+  "onTransitionEnd": PropTypes.func,
+  "onTransitionEndCapture": PropTypes.func,
+  "onVolumeChange": PropTypes.func,
+  "onVolumeChangeCapture": PropTypes.func,
+  "onWaiting": PropTypes.func,
+  "onWaitingCapture": PropTypes.func,
+  "onWheel": PropTypes.func,
+  "onWheelCapture": PropTypes.func,
+  "pattern": PropTypes.string,
+  "placeholder": PropTypes.string,
+  "prefix": PropTypes.string,
+  "property": PropTypes.string,
+  "radioGroup": PropTypes.string,
+  "readOnly": PropTypes.bool,
+  "required": PropTypes.bool,
+  "resource": PropTypes.string,
+  "results": PropTypes.number,
+  "role": PropTypes.oneOfType([PropTypes.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  })]),
+  "rows": PropTypes.number,
+  "security": PropTypes.string,
+  "size": PropTypes.oneOf(["large", "medium", "small"]),
+  "slot": PropTypes.string,
+  "spellCheck": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "src": PropTypes.string,
+  "step": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "style": PropTypes.object,
+  "suppressContentEditableWarning": PropTypes.bool,
+  "suppressHydrationWarning": PropTypes.bool,
+  "tabIndex": PropTypes.number,
+  "title": PropTypes.string,
+  "tooltipMessage": PropTypes.string,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "translate": PropTypes.oneOf(["no", "yes"]),
+  "typeof": PropTypes.string,
+  "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationOnLabel": PropTypes.bool,
+  "value": PropTypes.string,
+  "vocab": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "warnOverLimit": PropTypes.bool,
+  "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
+export { Textarea };
 export { Textarea as OriginalTextarea };
 export default Textarea;