@instructure/ui-text-area 8.33.1-snapshot-1 → 8.33.2-snapshot-5

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.33.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1-snapshot-1) (2023-01-06)
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
 
 **Note:** Version bump only for package @instructure/ui-text-area
 
@@ -11,22 +11,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [8.33.0](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.33.0) (2023-01-04)
+## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-text-area
 
+# [8.33.0](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.33.0) (2023-01-04)
 
-
-
+**Note:** Version bump only for package @instructure/ui-text-area
 
 ## [8.32.1](https://github.com/instructure/instructure-ui/compare/v8.30.0...v8.32.1) (2022-12-01)
 
 **Note:** Version bump only for package @instructure/ui-text-area
 
-
-
-
-
 # [8.32.0](https://github.com/instructure/instructure-ui/compare/v8.31.0...v8.32.0) (2022-11-23)
 
 **Note:** Version bump only for package @instructure/ui-text-area

package/es/TextArea/TextAreaLocator.js

@@ -21,9 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
-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
+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

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,13 +35,13 @@ import { omitProps, pickProps, withDeterministicId } from '@instructure/ui-react
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 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);
@@ -56,34 +55,30 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     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._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:
+      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) {
@@ -91,84 +86,66 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
           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
-
+      }
 
+      // 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;
-
+        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$props2;
-
     this.autoGrow();
     (_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$props3;
-
     this.autoGrow();
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
-
   componentWillUnmount() {
     if (this._listener) {
       this._listener.remove();
     }
-
     if (this._textareaResizeListener) {
       this._textareaResizeListener.disconnect();
     }
-
     if (this._request) {
       this._request.cancel();
     }
-
     if (this._debounced) {
       this._debounced.cancel();
     }
   }
-
   autoGrow() {
     if (this.props.autoGrow) {
       if (!this._debounced) {
@@ -177,74 +154,60 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
           trailing: true
         });
       }
-
       if (!this._listener) {
         this._listener = addEventListener(window, 'resize', this._debounced);
       }
-
       if (this._textarea && !this._textareaResizeListener) {
         const _getBoundingClientRec = getBoundingClientRect(this._textarea),
-              origHeight = _getBoundingClientRec.height;
-
+          origHeight = _getBoundingClientRec.height;
         this._textareaResizeListener = new ResizeObserver(entries => {
           for (const entry of entries) {
             const height = entry.contentRect.height;
-
             if (origHeight !== height) {
               this._textareaResize();
             }
           }
         });
-
         this._textareaResizeListener.observe(this._textarea);
       }
-
       this._request = requestAnimationFrame(this.grow);
     }
   }
-
   focus() {
     this._textarea.focus();
   }
-
   get minHeight() {
     return this._textarea.style.minHeight;
   }
-
   get invalid() {
     return this.props.messages && this.props.messages.findIndex(message => {
       return message.type === 'error';
     }) >= 0;
   }
-
   get id() {
     return this.props.id || this._defaultId;
   }
-
   get focused() {
     return isActiveElement(this._textarea);
   }
-
   get value() {
     return this._textarea.value;
   }
-
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const _this$props4 = this.props,
-          autoGrow = _this$props4.autoGrow,
-          placeholder = _this$props4.placeholder,
-          value = _this$props4.value,
-          defaultValue = _this$props4.defaultValue,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          required = _this$props4.required,
-          width = _this$props4.width,
-          height = _this$props4.height,
-          maxHeight = _this$props4.maxHeight,
-          textareaRef = _this$props4.textareaRef,
-          resize = _this$props4.resize;
+      autoGrow = _this$props4.autoGrow,
+      placeholder = _this$props4.placeholder,
+      value = _this$props4.value,
+      defaultValue = _this$props4.defaultValue,
+      disabled = _this$props4.disabled,
+      readOnly = _this$props4.readOnly,
+      required = _this$props4.required,
+      width = _this$props4.width,
+      height = _this$props4.height,
+      maxHeight = _this$props4.maxHeight,
+      textareaRef = _this$props4.textareaRef,
+      resize = _this$props4.resize;
     const props = omitProps(this.props, TextArea.allowedProps);
     const style = {
       width,
@@ -258,7 +221,6 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       placeholder: placeholder,
       ref: textarea => {
         this._textarea = textarea;
-
         if (typeof textareaRef === 'function') {
           textareaRef(textarea);
         }
@@ -291,7 +253,6 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       "aria-hidden": "true"
     }) : null));
   }
-
 }, _class2.displayName = "TextArea", _class2.componentId = 'TextArea', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   size: 'medium',
   autoGrow: true,

package/es/TextArea/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { TextAreaLocator } from './TextAreaLocator';
 export { TextAreaLocator };
 export default TextAreaLocator;

package/es/TextArea/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 import { FormPropTypes } from '@instructure/ui-form-field';

package/es/TextArea/styles.js

@@ -34,7 +34,7 @@
  */
 const generateStyle = (componentTheme, props) => {
   const disabled = props.disabled,
-        size = props.size;
+    size = props.size;
   const fontSizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize
@@ -113,5 +113,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/TextArea/theme.js

@@ -29,11 +29,11 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        borders = theme.borders,
-        spacing = theme.spacing,
-        forms = theme.forms,
-        themeName = theme.key;
+    typography = theme.typography,
+    borders = theme.borders,
+    spacing = theme.spacing,
+    forms = theme.forms,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -66,9 +66,9 @@ const generateComponentTheme = theme => {
     largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
     largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/lib/TextArea/TextAreaLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextAreaLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,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 () {

package/lib/TextArea/index.js

@@ -1,46 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextArea = void 0;
-
 var _react = require("react");
-
 var _FormField = require("@instructure/ui-form-field/lib/FormField");
-
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _debounce = require("@instructure/debounce");
-
 var _emotion = require("@instructure/emotion");
-
 var _px = require("@instructure/ui-utils/lib/px.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 category: components
@@ -60,34 +41,30 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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._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:
+      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) {
@@ -95,84 +72,66 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           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
-
+      }
 
+      // 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;
-
+        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$props2;
-
     this.autoGrow();
     (_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$props3;
-
     this.autoGrow();
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
-
   componentWillUnmount() {
     if (this._listener) {
       this._listener.remove();
     }
-
     if (this._textareaResizeListener) {
       this._textareaResizeListener.disconnect();
     }
-
     if (this._request) {
       this._request.cancel();
     }
-
     if (this._debounced) {
       this._debounced.cancel();
     }
   }
-
   autoGrow() {
     if (this.props.autoGrow) {
       if (!this._debounced) {
@@ -181,74 +140,60 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           trailing: true
         });
       }
-
       if (!this._listener) {
         this._listener = (0, _addEventListener.addEventListener)(window, 'resize', this._debounced);
       }
-
       if (this._textarea && !this._textareaResizeListener) {
         const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this._textarea),
-              origHeight = _getBoundingClientRec.height;
-
+          origHeight = _getBoundingClientRec.height;
         this._textareaResizeListener = new ResizeObserver(entries => {
           for (const entry of entries) {
             const height = entry.contentRect.height;
-
             if (origHeight !== height) {
               this._textareaResize();
             }
           }
         });
-
         this._textareaResizeListener.observe(this._textarea);
       }
-
       this._request = (0, _requestAnimationFrame.requestAnimationFrame)(this.grow);
     }
   }
-
   focus() {
     this._textarea.focus();
   }
-
   get minHeight() {
     return this._textarea.style.minHeight;
   }
-
   get invalid() {
     return this.props.messages && this.props.messages.findIndex(message => {
       return message.type === 'error';
     }) >= 0;
   }
-
   get id() {
     return this.props.id || this._defaultId;
   }
-
   get focused() {
     return (0, _isActiveElement.isActiveElement)(this._textarea);
   }
-
   get value() {
     return this._textarea.value;
   }
-
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const _this$props4 = this.props,
-          autoGrow = _this$props4.autoGrow,
-          placeholder = _this$props4.placeholder,
-          value = _this$props4.value,
-          defaultValue = _this$props4.defaultValue,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          required = _this$props4.required,
-          width = _this$props4.width,
-          height = _this$props4.height,
-          maxHeight = _this$props4.maxHeight,
-          textareaRef = _this$props4.textareaRef,
-          resize = _this$props4.resize;
+      autoGrow = _this$props4.autoGrow,
+      placeholder = _this$props4.placeholder,
+      value = _this$props4.value,
+      defaultValue = _this$props4.defaultValue,
+      disabled = _this$props4.disabled,
+      readOnly = _this$props4.readOnly,
+      required = _this$props4.required,
+      width = _this$props4.width,
+      height = _this$props4.height,
+      maxHeight = _this$props4.maxHeight,
+      textareaRef = _this$props4.textareaRef,
+      resize = _this$props4.resize;
     const props = (0, _omitProps.omitProps)(this.props, TextArea.allowedProps);
     const style = {
       width,
@@ -262,7 +207,6 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       placeholder: placeholder,
       ref: textarea => {
         this._textarea = textarea;
-
         if (typeof textareaRef === 'function') {
           textareaRef(textarea);
         }
@@ -295,7 +239,6 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       "aria-hidden": "true"
     }) : null));
   }
-
 }, _class2.displayName = "TextArea", _class2.componentId = 'TextArea', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   size: 'medium',
   autoGrow: true,

package/lib/TextArea/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "TextAreaLocator", {
   }
 });
 exports.default = void 0;
-
 var _TextAreaLocator = require("./TextAreaLocator");
-
 /*
  * The MIT License (MIT)
  *