@dhis2-ui/text-area 9.10.3 → 9.11.1-beta.1

package/build/cjs/text-area-field/text-area-field.e2e.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabelAndRequired = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'TextAreaField'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_index.TextAreaField, {
+  name: "textarea",
+  label: "I am required and have an asterisk",
+  required: true
+});
+exports.WithLabelAndRequired = WithLabelAndRequired;

package/build/cjs/text-area-field/text-area-field.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextAreaField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
-
 var _field = require("@dhis2-ui/field");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = require("../text-area/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TextAreaField = _ref => {
   let {
     className,
@@ -85,7 +77,6 @@ const TextAreaField = _ref => {
     rows: rows
   })));
 };
-
 exports.TextAreaField = TextAreaField;
 TextAreaField.defaultProps = {
   rows: 4,
@@ -97,71 +88,49 @@ TextAreaField.propTypes = {
   autoGrow: _propTypes.default.bool,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Compact mode */
   dense: _propTypes.default.bool,
-
   /** Disables the textarea and makes in non-interactive */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Adds useful help text below the textarea */
   helpText: _propTypes.default.string,
-
   /** Grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used */
   inputWidth: _propTypes.default.string,
-
   /** Labels the textarea */
   label: _propTypes.default.string,
-
   /** Adds a loading spinner */
   loading: _propTypes.default.bool,
-
   /** Name associated with the text area. Passed in object argument to event handlers. */
   name: _propTypes.default.string,
-
   /** Placeholder text for an empty textarea */
   placeholder: _propTypes.default.string,
-
   /** Makes the textarea read-only */
   readOnly: _propTypes.default.bool,
-
   /** Adds an asterisk to the label to indicate this field is required */
   required: _propTypes.default.bool,
-
   /** [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element */
   resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
   /** Initial height of the textarea, in lines of text */
   rows: _propTypes.default.number,
   tabIndex: _propTypes.default.string,
-
   /** Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status */
   validationText: _propTypes.default.string,
-
   /** Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. */
   value: _propTypes.default.string,
-
   /** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onBlur: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onChange: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onFocus: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/text-area-field/{text-area-field.stories.js → text-area-field.prod.stories.js}

@@ -4,19 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithValue = exports.WithHelpText = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.Required = exports.ReadOnly = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.LabelTextOverflow = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Autogrow = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const description = `
+\`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
+
+See the regular TextArea for usage information and options.
+
+\`\`\`js
+import { TextAreaField } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Text Area Field',
   component: _index.TextAreaField,
   parameters: {
@@ -32,65 +34,57 @@ var _default = {
     name: 'textareaName'
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.TextAreaField, args);
-
-const NoPlaceholderNoValue = Template.bind({});
-exports.NoPlaceholderNoValue = NoPlaceholderNoValue;
+const NoPlaceholderNoValue = exports.NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
-const PlaceholderNoValue = Template.bind({});
-exports.PlaceholderNoValue = PlaceholderNoValue;
+const PlaceholderNoValue = exports.PlaceholderNoValue = Template.bind({});
 PlaceholderNoValue.args = {
   placeholder: 'Hold the place'
 };
 PlaceholderNoValue.storyName = 'Placeholder, no value';
-const WithHelpText = Template.bind({});
-exports.WithHelpText = WithHelpText;
+const WithHelpText = exports.WithHelpText = Template.bind({});
 WithHelpText.args = {
   helpText: 'With some helping text to guide the user along',
   ...PlaceholderNoValue.args
 };
-const WithValue = Template.bind({});
-exports.WithValue = WithValue;
+const WithValue = exports.WithValue = Template.bind({});
 WithValue.args = {
   value: 'This is set through the value prop, which means the component is controlled.'
 };
-const Focus = Template.bind({});
-exports.Focus = Focus;
+const Focus = exports.Focus = Template.bind({});
 Focus.args = {
   initialFocus: true
-}; // Disable stories that manipulate focus on docs page
-
+};
+// Disable stories that manipulate focus on docs page
 Focus.parameters = {
   docs: {
     disable: true
   }
 };
-const StatusValid = Template.bind({});
-exports.StatusValid = StatusValid;
+const StatusValid = exports.StatusValid = Template.bind({});
 StatusValid.args = {
   valid: true,
   value: 'This value is valid'
 };
 StatusValid.storyName = 'Status: Valid';
-const StatusWarning = Template.bind({});
-exports.StatusWarning = StatusWarning;
+const StatusWarning = exports.StatusWarning = Template.bind({});
 StatusWarning.args = {
   warning: true,
   value: 'This value produces a warning'
 };
 StatusWarning.storyName = 'Status: Warning';
-const StatusError = Template.bind({});
-exports.StatusError = StatusError;
+const StatusError = exports.StatusError = Template.bind({});
 StatusError.args = {
   error: true,
   value: 'This value produces an error',
@@ -98,63 +92,53 @@ StatusError.args = {
   validationText: 'This describes the error, if a message is supplied.'
 };
 StatusError.storyName = 'Status: Error';
-const StatusLoading = Template.bind({});
-exports.StatusLoading = StatusLoading;
+const StatusLoading = exports.StatusLoading = Template.bind({});
 StatusLoading.args = {
   loading: true,
   value: 'This value produces a loadingn state'
 };
 StatusLoading.storyName = 'Status: Loading';
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
   value: 'This field is disabled'
 };
-const ReadOnly = Template.bind({});
-exports.ReadOnly = ReadOnly;
+const ReadOnly = exports.ReadOnly = Template.bind({});
 ReadOnly.args = {
   readOnly: true,
   value: 'This field is readOnly'
 };
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true,
   value: 'This field is dense'
 };
-const LabelTextOverflow = Template.bind({});
-exports.LabelTextOverflow = LabelTextOverflow;
+const LabelTextOverflow = exports.LabelTextOverflow = Template.bind({});
 LabelTextOverflow.args = {
   label: "This label is too long to show on a single line of the input field's label. We just let it flow to the next line so the user can still read it. However, we should always aim to keep it shorter than this!"
 };
 LabelTextOverflow.storyName = 'Label text overflow';
-const TextareaTextOverflow = Template.bind({});
-exports.TextareaTextOverflow = TextareaTextOverflow;
+const TextareaTextOverflow = exports.TextareaTextOverflow = Template.bind({});
 TextareaTextOverflow.args = {
   label: 'I have a scrollbar',
   value: ['A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text', 'A line of text'].join('\n')
 };
-
 const Required = () => /*#__PURE__*/_react.default.createElement(_index.TextAreaField, {
   onChange: () => {},
   name: "textarea",
   label: "I am required and have an asterisk",
   required: true
 });
-
 exports.Required = Required;
 Required.args = {
   required: true,
   label: 'I am required and have an asterisk'
 };
-const Rows = Template.bind({});
-exports.Rows = Rows;
+const Rows = exports.Rows = Template.bind({});
 Rows.args = {
   rows: 8,
   label: 'You can set the height with the rows prop. I have 8'
 };
-
 const InputWidth = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextAreaField, _extends({}, args, {
   label: "My textarea has a width of 220px (the minimum)",
   inputWidth: "220px"
@@ -162,9 +146,7 @@ const InputWidth = args => /*#__PURE__*/_react.default.createElement(_react.defa
   label: "My textarea has a width of 400px",
   inputWidth: "400px"
 })));
-
 exports.InputWidth = InputWidth;
-
 const Resize = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextAreaField, _extends({}, args, {
   name: "textarea1",
   label: "Resize: vertical (default)"
@@ -181,9 +163,7 @@ const Resize = args => /*#__PURE__*/_react.default.createElement(_react.default.
   label: "Resize: horizontal",
   resize: "horizontal"
 })));
-
 exports.Resize = Resize;
-
 const Autogrow = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TextAreaField, _extends({}, args, {
   name: "textarea1",
   label: "Autogrow step 1",
@@ -207,5 +187,4 @@ const Autogrow = args => /*#__PURE__*/_react.default.createElement(_react.defaul
   label: "Autogrow step 4",
   value: ['This TextArea has a height of two rows', 'it also has autoGrow set to true so it will grow with the content.', 'See: rows is still 2...', 'And now I have 4 lines and still no scroll bar in sight.'].join('\n')
 })));
-
 exports.Autogrow = Autogrow;

package/build/es/text-area/features/accepts_initial_focus/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a TextArea with initialFocus is rendered', () => {
-  cy.visitStory('TextArea', 'With initialFocus');
+  cy.visitStory('TextArea', 'With initial focus');
 });
 Then('the TextArea is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-textarea"]').should('exist');

package/build/es/text-area/features/can_be_blurred/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a TextArea with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('TextArea', 'With initialFocus and onBlur');
+  cy.visitStory('TextArea', 'With initial focus and on blur');
 });
 When('the TextArea is blurred', () => {
   cy.get('[data-test="dhis2-uicore-textarea"] textarea').blur();

package/build/es/text-area/features/can_be_changed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a TextArea with onChange handler is rendered', () => {
-  cy.visitStory('TextArea', 'With onChange');
+  cy.visitStory('TextArea', 'With on change');
 });
 When('the TextArea is filled with a character', () => {
   cy.get('[data-test="dhis2-uicore-textarea"]').click().type('a');

package/build/es/text-area/features/can_be_focused/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a TextArea with onFocus handler is rendered', () => {
-  cy.visitStory('TextArea', 'With onFocus');
+  cy.visitStory('TextArea', 'With on focus');
 });
 When('the TextArea is focused', () => {
   cy.get('[data-test="dhis2-uicore-textarea"] textarea').focus();

package/build/es/text-area/{text-area.stories.e2e.js → text-area.e2e.stories.js}

@@ -1,23 +1,29 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { TextArea } from './index.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
-storiesOf('TextArea', module).add('With onChange', () => /*#__PURE__*/React.createElement(TextArea, {
+export default {
+  title: 'TextArea'
+};
+export const WithOnChange = () => /*#__PURE__*/React.createElement(TextArea, {
   onChange: window.onChange,
   name: "textarea"
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/React.createElement(TextArea, {
+});
+export const WithInitialFocusAndOnBlur = () => /*#__PURE__*/React.createElement(TextArea, {
   initialFocus: true,
   name: "textarea",
   onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/React.createElement(TextArea, {
+});
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",
   onFocus: window.onFocus
-})).add('With initialFocus', () => /*#__PURE__*/React.createElement(TextArea, {
+});
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",
   initialFocus: true
-})).add('With disabled', () => /*#__PURE__*/React.createElement(TextArea, {
+});
+export const WithDisabled = () => /*#__PURE__*/React.createElement(TextArea, {
   name: "textarea",
   disabled: true
-}));
+});

package/build/es/text-area/text-area.js

@@ -1,9 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import { StatusIcon } from '@dhis2-ui/status-icon';
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -11,20 +11,15 @@ import { styles } from './text-area.styles.js';
 export class TextArea extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "textareaRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "state", {
       height: 'auto'
     });
-
     _defineProperty(this, "textareaDimensions", {
       width: 0,
       height: 0
     });
-
     _defineProperty(this, "userHasResized", false);
-
     _defineProperty(this, "setTextareaDimensions", () => {
       const textarea = this.textareaRef.current;
       this.textareaDimensions = {
@@ -32,7 +27,6 @@ export class TextArea extends Component {
         height: textarea.clientHeight
       };
     });
-
     _defineProperty(this, "hasUserResized", () => {
       const {
         width: oldWidth,
@@ -44,68 +38,56 @@ export class TextArea extends Component {
         height: newHeight
       } = this.textareaDimensions;
       const userHasResized = newWidth !== oldWidth || newHeight !== oldHeight;
-
       if (userHasResized) {
         this.userHasResized = true;
         this.removeResizeListener();
       }
     });
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(e), e);
       }
     });
   }
-
   componentDidMount() {
     this.attachResizeListener();
-
     if (this.props.initialFocus) {
       this.textareaRef.current.focus();
     }
-
     if (this.shouldDoAutoGrow()) {
       this.setHeight();
     }
   }
-
   componentDidUpdate(prevProps) {
     if (this.shouldDoAutoGrow() && this.props.value !== prevProps.value) {
       this.setHeight();
     }
   }
-
   attachResizeListener() {
     const textarea = this.textareaRef.current;
     textarea.addEventListener('mousedown', this.setTextareaDimensions);
     textarea.addEventListener('mouseup', this.hasUserResized);
   }
-
   removeResizeListener() {
     const textarea = this.textareaRef.current;
     textarea.removeEventListener('mousedown', this.setTextareaDimensions);
     textarea.removeEventListener('mouseup', this.hasUserResized);
   }
-
   setHeight() {
     const textarea = this.textareaRef.current;
     const offset = textarea.offsetHeight - textarea.clientHeight;
@@ -114,18 +96,15 @@ export class TextArea extends Component {
       height
     });
   }
-
   shouldDoAutoGrow() {
     return this.props.autoGrow && !this.userHasResized;
   }
-
   createHandlerPayload(e) {
     return {
       value: e.target.value,
       name: this.props.name
     };
   }
-
   render() {
     const {
       className,
@@ -150,7 +129,7 @@ export class TextArea extends Component {
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx('textarea', className) || "")
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx('textarea', className) || "")
     }, /*#__PURE__*/React.createElement("textarea", {
       id: name,
       name: name,
@@ -165,7 +144,7 @@ export class TextArea extends Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       rows: rows,
-      className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx({
+      className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx({
         dense,
         disabled,
         error,
@@ -183,9 +162,8 @@ export class TextArea extends Component {
     }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "3036048772",
       dynamic: [width, height, resize]
-    }, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
+    }, [`textarea.__jsx-style-dynamic-selector{width:${width};height:${height};resize:${resize};}`]));
   }
-
 }
 TextArea.defaultProps = {
   rows: 4,
@@ -198,59 +176,41 @@ TextArea.propTypes = {
   autoGrow: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Compact mode */
   dense: PropTypes.bool,
-
   /** Disables the textarea and makes in non-interactive */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
-
   /** Grabs initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Adds a loading spinner */
   loading: PropTypes.bool,
-
   /** Name associated with the text area. Passed in object argument to event handlers. */
   name: PropTypes.string,
-
   /** Placeholder text for an empty textarea */
   placeholder: PropTypes.string,
-
   /** Makes the textarea read-only */
   readOnly: PropTypes.bool,
-
   /** [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element */
   resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
   /** Initial height of the textarea, in lines of text */
   rows: PropTypes.number,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. */
   value: PropTypes.string,
-
   /** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Width of the text area. Can be any valid CSS measurement */
   width: PropTypes.string,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onBlur: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onChange: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onFocus: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onKeyDown: PropTypes.func
 };