@instructure/ui-text-area 8.13.1-snapshot.9 → 8.14.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-text-area
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 ### Bug Fixes

package/es/TextArea/TextAreaLocator.js

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { TextArea } from './index';
+import { TextArea } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const TextAreaLocator = locator(TextArea.selector, {
   findInput: function () {
     return locator('textarea').find(...arguments);

package/es/TextArea/index.js

@@ -41,15 +41,23 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TextArea extends Component {
-  constructor() {
-    super();
-    this._listener = null;
+  constructor(props) {
+    super(props);
+    this._listener = void 0;
     this._request = void 0;
-
-    this._textareaResize = evt => {
+    this._defaultId = void 0;
+    this._textareaResizeListener = void 0;
+    this._debounced = void 0;
+    this._textarea = null;
+    this._container = null;
+    this._height = void 0;
+    this._manuallyResized = false;
+
+    this._textareaResize = () => {
       const textareaHeight = this._textarea.style.height;
 
       if (textareaHeight !== '' && textareaHeight !== this._height) {
@@ -60,7 +68,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       }
     };
 
-    this.grow = evt => {
+    this.grow = () => {
       if (!this._textarea || this._manuallyResized) {
         return;
       }
@@ -74,9 +82,9 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
 
       height = this._textarea.scrollHeight + offset + 'px';
-      const maxHeight = px(this.props.maxHeight, this._container);
+      const maxHeight = this.props.maxHeight ? px(this.props.maxHeight, this._container) : void 0;
 
-      if (this.props.maxHeight && this._textarea.scrollHeight > maxHeight) {
+      if (this.props.maxHeight && maxHeight !== void 0 && this._textarea.scrollHeight > maxHeight) {
         this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds maxHeight in pixels
       } else if (this.props.height) {
         if (this._textarea.value === '') {
@@ -90,7 +98,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       // but make sure container doesn't exceed maxHeight prop
 
 
-      const heightExceedsMax = px(height) > maxHeight;
+      const heightExceedsMax = maxHeight !== void 0 && px(height) > maxHeight;
 
       if (!heightExceedsMax) {
         this._container.style.minHeight = height;
@@ -136,7 +144,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
 
     this.autoGrow();
@@ -222,10 +230,7 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   render() {
-    var _this = this,
-        _this$props$styles,
-        _this$props$styles2,
-        _this$props$styles3;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
 
     const _this$props4 = this.props,
           autoGrow = _this$props4.autoGrow,
@@ -244,37 +249,33 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     const style = {
       width,
       resize,
-      height: !autoGrow ? height : null,
+      height: !autoGrow ? height : void 0,
       maxHeight
     };
     const textarea = jsx("textarea", Object.assign({}, props, {
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
-      ref: function (textarea) {
-        _this._textarea = textarea;
+      ref: textarea => {
+        this._textarea = textarea;
 
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
+        if (typeof textareaRef === 'function') {
+          textareaRef(textarea);
         }
-
-        textareaRef.apply(_this, [textarea].concat(args));
       },
       style: style,
       id: this.id,
       required: required,
       "aria-required": required,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       disabled: disabled || readOnly,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
       onChange: this.handleChange
     }));
     return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
+      label: this.props.label,
       vAlign: "top",
-      id: this.id,
-      ref: el => {
-        this._node = el;
-      }
+      id: this.id
     }), jsx("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
       style: {
@@ -296,7 +297,6 @@ let TextArea = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   messages: [],
   disabled: false,
   readOnly: false,
-  textareaRef: function (textarea) {},
   layout: 'stacked',
   required: false
 }, _temp)) || _class) || _class);

package/es/TextArea/props.js

@@ -27,88 +27,22 @@ import { FormPropTypes } from '@instructure/ui-form-field';
 const propTypes = {
   label: PropTypes.node.isRequired,
   id: PropTypes.string,
-
-  /**
-   * sets the font-size for the textarea
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   layout: PropTypes.oneOf(['stacked', 'inline']),
-
-  /**
-   * the textarea will expand vertically to fit the height of the content,
-   * unless its content exceeds `maxHeight`
-   */
   autoGrow: PropTypes.bool,
-
-  /**
-   * is the textarea resizable (in supported browsers)
-   */
   resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
-  /**
-   * a fixed width for the textarea
-   */
   width: PropTypes.string,
-
-  /**
-   * Initial height for the textarea (if autoGrow is true it will grow vertically)
-   * Accepts CSS units, e.g. '55px'
-   */
   height: PropTypes.string,
-
-  /**
-   * when autoGrow is true, the textarea will never grow beyond this value
-   */
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
   inline: PropTypes.bool,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should be hint text, not a label
-   * replacement.
-   */
   placeholder: PropTypes.string,
-
-  /**
-   * Whether or not to disable the textarea
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
-
-  /**
-   * Sets the required property on the underlying native textArea
-   */
   required: PropTypes.bool,
-
-  /**
-   * a function that provides a reference to the actual textarea element
-   */
   textareaRef: PropTypes.func,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: PropTypes.string,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: controllable(PropTypes.string),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: PropTypes.func
 };
 const allowedProps = ['label', 'id', 'size', 'layout', 'autoGrow', 'resize', 'width', 'height', 'maxHeight', 'messages', 'inline', 'placeholder', 'disabled', 'readOnly', 'required', 'textareaRef', 'defaultValue', 'value', 'onChange'];

package/lib/TextArea/TextAreaLocator.js

@@ -32,6 +32,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TextAreaLocator = (0, _locator.locator)(_index.TextArea.selector, {
   findInput: function () {
     return (0, _locator.locator)('textarea').find(...arguments);

package/lib/TextArea/index.js

@@ -45,14 +45,22 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TextArea extends _react.Component {
-  constructor() {
-    super();
-    this._listener = null;
+  constructor(props) {
+    super(props);
+    this._listener = void 0;
     this._request = void 0;
-
-    this._textareaResize = evt => {
+    this._defaultId = void 0;
+    this._textareaResizeListener = void 0;
+    this._debounced = void 0;
+    this._textarea = null;
+    this._container = null;
+    this._height = void 0;
+    this._manuallyResized = false;
+
+    this._textareaResize = () => {
       const textareaHeight = this._textarea.style.height;
 
       if (textareaHeight !== '' && textareaHeight !== this._height) {
@@ -63,7 +71,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       }
     };
 
-    this.grow = evt => {
+    this.grow = () => {
       if (!this._textarea || this._manuallyResized) {
         return;
       }
@@ -77,9 +85,9 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
 
       height = this._textarea.scrollHeight + offset + 'px';
-      const maxHeight = (0, _px.px)(this.props.maxHeight, this._container);
+      const maxHeight = this.props.maxHeight ? (0, _px.px)(this.props.maxHeight, this._container) : void 0;
 
-      if (this.props.maxHeight && this._textarea.scrollHeight > maxHeight) {
+      if (this.props.maxHeight && maxHeight !== void 0 && this._textarea.scrollHeight > maxHeight) {
         this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds maxHeight in pixels
       } else if (this.props.height) {
         if (this._textarea.value === '') {
@@ -93,7 +101,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       // but make sure container doesn't exceed maxHeight prop
 
 
-      const heightExceedsMax = (0, _px.px)(height) > maxHeight;
+      const heightExceedsMax = maxHeight !== void 0 && (0, _px.px)(height) > maxHeight;
 
       if (!heightExceedsMax) {
         this._container.style.minHeight = height;
@@ -139,7 +147,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
 
     this.autoGrow();
@@ -225,10 +233,7 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    var _this = this,
-        _this$props$styles,
-        _this$props$styles2,
-        _this$props$styles3;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
 
     const _this$props4 = this.props,
           autoGrow = _this$props4.autoGrow,
@@ -247,37 +252,33 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     const style = {
       width,
       resize,
-      height: !autoGrow ? height : null,
+      height: !autoGrow ? height : void 0,
       maxHeight
     };
     const textarea = (0, _emotion.jsx)("textarea", Object.assign({}, props, {
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
-      ref: function (textarea) {
-        _this._textarea = textarea;
+      ref: textarea => {
+        this._textarea = textarea;
 
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
+        if (typeof textareaRef === 'function') {
+          textareaRef(textarea);
         }
-
-        textareaRef.apply(_this, [textarea].concat(args));
       },
       style: style,
       id: this.id,
       required: required,
       "aria-required": required,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       disabled: disabled || readOnly,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
       onChange: this.handleChange
     }));
     return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
+      label: this.props.label,
       vAlign: "top",
-      id: this.id,
-      ref: el => {
-        this._node = el;
-      }
+      id: this.id
     }), (0, _emotion.jsx)("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
       style: {
@@ -299,7 +300,6 @@ let TextArea = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   messages: [],
   disabled: false,
   readOnly: false,
-  textareaRef: function (textarea) {},
   layout: 'stacked',
   required: false
 }, _temp)) || _class) || _class);

package/lib/TextArea/props.js

@@ -39,88 +39,22 @@ var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
 const propTypes = {
   label: _propTypes.default.node.isRequired,
   id: _propTypes.default.string,
-
-  /**
-   * sets the font-size for the textarea
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   layout: _propTypes.default.oneOf(['stacked', 'inline']),
-
-  /**
-   * the textarea will expand vertically to fit the height of the content,
-   * unless its content exceeds `maxHeight`
-   */
   autoGrow: _propTypes.default.bool,
-
-  /**
-   * is the textarea resizable (in supported browsers)
-   */
   resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
-  /**
-   * a fixed width for the textarea
-   */
   width: _propTypes.default.string,
-
-  /**
-   * Initial height for the textarea (if autoGrow is true it will grow vertically)
-   * Accepts CSS units, e.g. '55px'
-   */
   height: _propTypes.default.string,
-
-  /**
-   * when autoGrow is true, the textarea will never grow beyond this value
-   */
   maxHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   inline: _propTypes.default.bool,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should be hint text, not a label
-   * replacement.
-   */
   placeholder: _propTypes.default.string,
-
-  /**
-   * Whether or not to disable the textarea
-   */
   disabled: _propTypes.default.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: _propTypes.default.bool,
-
-  /**
-   * Sets the required property on the underlying native textArea
-   */
   required: _propTypes.default.bool,
-
-  /**
-   * a function that provides a reference to the actual textarea element
-   */
   textareaRef: _propTypes.default.func,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: _propTypes.default.string,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: (0, _controllable.controllable)(_propTypes.default.string),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.0",
   "description": "A styled HTML text area component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-form-field": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/debounce": "8.14.0",
+    "@instructure/emotion": "8.14.0",
+    "@instructure/shared-types": "8.14.0",
+    "@instructure/ui-dom-utils": "8.14.0",
+    "@instructure/ui-form-field": "8.14.0",
+    "@instructure/ui-prop-types": "8.14.0",
+    "@instructure/ui-react-utils": "8.14.0",
+    "@instructure/ui-testable": "8.14.0",
+    "@instructure/ui-utils": "8.14.0",
+    "@instructure/uid": "8.14.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.0",
+    "@instructure/ui-color-utils": "8.14.0",
+    "@instructure/ui-test-locator": "8.14.0",
+    "@instructure/ui-test-utils": "8.14.0",
+    "@instructure/ui-themes": "8.14.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,6 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "sideEffects": false
 }