@instructure/ui-text-area 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-text-area
 

package/es/TextArea/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -43,50 +43,112 @@ category: components
 @tsProps
 **/
 
-let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class TextArea extends Component {
-  static displayName = "TextArea";
-  static componentId = 'TextArea';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    size: 'medium',
-    autoGrow: true,
-    resize: 'none',
-    inline: false,
-    messages: [],
-    disabled: false,
-    readOnly: false,
-    layout: 'stacked',
-    required: false
-  };
-  _listener;
-  _request;
-  _defaultId;
-  _textareaResizeListener;
-  _debounced;
-  _textarea = null;
-  _container = null;
-  _height;
-  _manuallyResized = false;
-  ref = null;
-
+let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TextArea extends Component {
   constructor(props) {
     super(props);
+    this._listener = void 0;
+    this._request = void 0;
+    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.ref = null;
+
+    this._textareaResize = () => {
+      const textareaHeight = this._textarea.style.height;
+
+      if (textareaHeight !== '' && textareaHeight !== this._height) {
+        this._manuallyResized = true;
+        this._textarea.style.overflowY = 'auto'; // update container minHeight to ensure focus ring always wraps input
+
+        this._container.style.minHeight = textareaHeight;
+      }
+    };
+
+    this.grow = () => {
+      if (!this._textarea || this._manuallyResized) {
+        return;
+      }
+
+      const offset = this._textarea.offsetHeight - this._textarea.clientHeight;
+      let height = ''; // Notes:
+      // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
+      // 2. `this._textarea.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
+
+      this._textarea.style.height = 'auto';
+      this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
+
+      height = this._textarea.scrollHeight + offset + 'px';
+      const maxHeight = this.props.maxHeight ? px(this.props.maxHeight, this._container) : void 0;
+
+      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 === '') {
+          height = this.props.height;
+        } else if (px(this.props.height, this._container) > this._textarea.scrollHeight) {
+          this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
+
+          height = this.props.height;
+        }
+      } // preserve container height to prevent scroll jumping on long textareas,
+      // but make sure container doesn't exceed maxHeight prop
+
+
+      const heightExceedsMax = maxHeight !== void 0 && px(height) > maxHeight;
+
+      if (!heightExceedsMax) {
+        this._container.style.minHeight = height;
+      }
+
+      this._height = height;
+      this._textarea.style.height = height;
+    };
+
+    this.handleChange = event => {
+      const _this$props = this.props,
+            onChange = _this$props.onChange,
+            value = _this$props.value,
+            disabled = _this$props.disabled,
+            readOnly = _this$props.readOnly;
+
+      if (disabled || readOnly) {
+        event.preventDefault();
+        return;
+      }
+
+      if (typeof value === 'undefined') {
+        // if uncontrolled
+        this.autoGrow();
+      }
+
+      if (typeof onChange === 'function') {
+        onChange(event);
+      }
+    };
+
+    this.handleContainerRef = node => {
+      this._container = node;
+    };
+
     this._defaultId = props.deterministicId();
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     this.autoGrow();
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
     this.autoGrow();
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   componentWillUnmount() {
@@ -107,17 +169,6 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
   }
 
-  _textareaResize = () => {
-    const textareaHeight = this._textarea.style.height;
-
-    if (textareaHeight !== '' && textareaHeight !== this._height) {
-      this._manuallyResized = true;
-      this._textarea.style.overflowY = 'auto'; // update container minHeight to ensure focus ring always wraps input
-
-      this._container.style.minHeight = textareaHeight;
-    }
-  };
-
   autoGrow() {
     if (this.props.autoGrow) {
       if (!this._debounced) {
@@ -152,75 +203,10 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
   }
 
-  grow = () => {
-    if (!this._textarea || this._manuallyResized) {
-      return;
-    }
-
-    const offset = this._textarea.offsetHeight - this._textarea.clientHeight;
-    let height = ''; // Notes:
-    // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
-    // 2. `this._textarea.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
-
-    this._textarea.style.height = 'auto';
-    this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
-
-    height = this._textarea.scrollHeight + offset + 'px';
-    const maxHeight = this.props.maxHeight ? px(this.props.maxHeight, this._container) : void 0;
-
-    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 === '') {
-        height = this.props.height;
-      } else if (px(this.props.height, this._container) > this._textarea.scrollHeight) {
-        this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
-
-        height = this.props.height;
-      }
-    } // preserve container height to prevent scroll jumping on long textareas,
-    // but make sure container doesn't exceed maxHeight prop
-
-
-    const heightExceedsMax = maxHeight !== void 0 && px(height) > maxHeight;
-
-    if (!heightExceedsMax) {
-      this._container.style.minHeight = height;
-    }
-
-    this._height = height;
-    this._textarea.style.height = height;
-  };
-
   focus() {
     this._textarea.focus();
   }
 
-  handleChange = event => {
-    const _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          value = _this$props3.value,
-          disabled = _this$props3.disabled,
-          readOnly = _this$props3.readOnly;
-
-    if (disabled || readOnly) {
-      event.preventDefault();
-      return;
-    }
-
-    if (typeof value === 'undefined') {
-      // if uncontrolled
-      this.autoGrow();
-    }
-
-    if (typeof onChange === 'function') {
-      onChange(event);
-    }
-  };
-  handleContainerRef = node => {
-    this._container = node;
-  };
-
   get minHeight() {
     return this._textarea.style.minHeight;
   }
@@ -306,6 +292,16 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }) : null));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "TextArea", _class2.componentId = 'TextArea', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  size: 'medium',
+  autoGrow: true,
+  resize: 'none',
+  inline: false,
+  messages: [],
+  disabled: false,
+  readOnly: false,
+  layout: 'stacked',
+  required: false
+}, _class2)) || _class) || _class) || _class);
 export default TextArea;
 export { TextArea };

package/lib/TextArea/index.js

@@ -39,7 +39,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -47,50 +47,112 @@ category: components
 ---
 @tsProps
 **/
-let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class TextArea extends _react.Component {
-  static displayName = "TextArea";
-  static componentId = 'TextArea';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    size: 'medium',
-    autoGrow: true,
-    resize: 'none',
-    inline: false,
-    messages: [],
-    disabled: false,
-    readOnly: false,
-    layout: 'stacked',
-    required: false
-  };
-  _listener;
-  _request;
-  _defaultId;
-  _textareaResizeListener;
-  _debounced;
-  _textarea = null;
-  _container = null;
-  _height;
-  _manuallyResized = false;
-  ref = null;
-
+let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TextArea extends _react.Component {
   constructor(props) {
     super(props);
+    this._listener = void 0;
+    this._request = void 0;
+    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.ref = null;
+
+    this._textareaResize = () => {
+      const textareaHeight = this._textarea.style.height;
+
+      if (textareaHeight !== '' && textareaHeight !== this._height) {
+        this._manuallyResized = true;
+        this._textarea.style.overflowY = 'auto'; // update container minHeight to ensure focus ring always wraps input
+
+        this._container.style.minHeight = textareaHeight;
+      }
+    };
+
+    this.grow = () => {
+      if (!this._textarea || this._manuallyResized) {
+        return;
+      }
+
+      const offset = this._textarea.offsetHeight - this._textarea.clientHeight;
+      let height = ''; // Notes:
+      // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
+      // 2. `this._textarea.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
+
+      this._textarea.style.height = 'auto';
+      this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
+
+      height = this._textarea.scrollHeight + offset + 'px';
+      const maxHeight = this.props.maxHeight ? (0, _px.px)(this.props.maxHeight, this._container) : void 0;
+
+      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 === '') {
+          height = this.props.height;
+        } else if ((0, _px.px)(this.props.height, this._container) > this._textarea.scrollHeight) {
+          this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
+
+          height = this.props.height;
+        }
+      } // preserve container height to prevent scroll jumping on long textareas,
+      // but make sure container doesn't exceed maxHeight prop
+
+
+      const heightExceedsMax = maxHeight !== void 0 && (0, _px.px)(height) > maxHeight;
+
+      if (!heightExceedsMax) {
+        this._container.style.minHeight = height;
+      }
+
+      this._height = height;
+      this._textarea.style.height = height;
+    };
+
+    this.handleChange = event => {
+      const _this$props = this.props,
+            onChange = _this$props.onChange,
+            value = _this$props.value,
+            disabled = _this$props.disabled,
+            readOnly = _this$props.readOnly;
+
+      if (disabled || readOnly) {
+        event.preventDefault();
+        return;
+      }
+
+      if (typeof value === 'undefined') {
+        // if uncontrolled
+        this.autoGrow();
+      }
+
+      if (typeof onChange === 'function') {
+        onChange(event);
+      }
+    };
+
+    this.handleContainerRef = node => {
+      this._container = node;
+    };
+
     this._defaultId = props.deterministicId();
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     this.autoGrow();
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
     this.autoGrow();
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   componentWillUnmount() {
@@ -111,17 +173,6 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }
   }
 
-  _textareaResize = () => {
-    const textareaHeight = this._textarea.style.height;
-
-    if (textareaHeight !== '' && textareaHeight !== this._height) {
-      this._manuallyResized = true;
-      this._textarea.style.overflowY = 'auto'; // update container minHeight to ensure focus ring always wraps input
-
-      this._container.style.minHeight = textareaHeight;
-    }
-  };
-
   autoGrow() {
     if (this.props.autoGrow) {
       if (!this._debounced) {
@@ -156,75 +207,10 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }
   }
 
-  grow = () => {
-    if (!this._textarea || this._manuallyResized) {
-      return;
-    }
-
-    const offset = this._textarea.offsetHeight - this._textarea.clientHeight;
-    let height = ''; // Notes:
-    // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
-    // 2. `this._textarea.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
-
-    this._textarea.style.height = 'auto';
-    this._textarea.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
-
-    height = this._textarea.scrollHeight + offset + 'px';
-    const maxHeight = this.props.maxHeight ? (0, _px.px)(this.props.maxHeight, this._container) : void 0;
-
-    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 === '') {
-        height = this.props.height;
-      } else if ((0, _px.px)(this.props.height, this._container) > this._textarea.scrollHeight) {
-        this._textarea.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
-
-        height = this.props.height;
-      }
-    } // preserve container height to prevent scroll jumping on long textareas,
-    // but make sure container doesn't exceed maxHeight prop
-
-
-    const heightExceedsMax = maxHeight !== void 0 && (0, _px.px)(height) > maxHeight;
-
-    if (!heightExceedsMax) {
-      this._container.style.minHeight = height;
-    }
-
-    this._height = height;
-    this._textarea.style.height = height;
-  };
-
   focus() {
     this._textarea.focus();
   }
 
-  handleChange = event => {
-    const _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          value = _this$props3.value,
-          disabled = _this$props3.disabled,
-          readOnly = _this$props3.readOnly;
-
-    if (disabled || readOnly) {
-      event.preventDefault();
-      return;
-    }
-
-    if (typeof value === 'undefined') {
-      // if uncontrolled
-      this.autoGrow();
-    }
-
-    if (typeof onChange === 'function') {
-      onChange(event);
-    }
-  };
-  handleContainerRef = node => {
-    this._container = node;
-  };
-
   get minHeight() {
     return this._textarea.style.minHeight;
   }
@@ -310,7 +296,17 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }) : null));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "TextArea", _class2.componentId = 'TextArea', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  size: 'medium',
+  autoGrow: true,
+  resize: 'none',
+  inline: false,
+  messages: [],
+  disabled: false,
+  readOnly: false,
+  layout: 'stacked',
+  required: false
+}, _class2)) || _class) || _class) || _class);
 exports.TextArea = TextArea;
 var _default = TextArea;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A styled HTML text area component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-form-field": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/uid": "8.25.1-snapshot-10",
+    "@instructure/debounce": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-form-field": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/uid": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"