@instructure/ui-text-area 11.7.3-snapshot-25 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-text-area
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/TextArea/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _TextArea;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,87 +40,36 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_TextArea = class TextArea extends Component {
+let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class TextArea extends Component {
+  static displayName = "TextArea";
+  static componentId = 'TextArea';
+  static allowedProps = allowedProps;
+  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;
+  _highlightRef = null;
+  myObserver = null;
+  resizeTimeout;
+  ref = null;
   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._highlightRef = null;
-    this.myObserver = null;
-    this.resizeTimeout = void 0;
-    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();
 
     //mock ResizeObserver for ssr
@@ -139,7 +88,6 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
     this.myObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         if (this._highlightRef) {
@@ -157,12 +105,11 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       }
     });
     this.autoGrow();
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
   }
   componentWillUnmount() {
     if (this._listener) {
@@ -181,6 +128,16 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       this.myObserver.disconnect();
     }
   }
+  _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) {
@@ -193,11 +150,14 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         this._listener = addEventListener(window, 'resize', this._debounced);
       }
       if (this._textarea && !this._textareaResizeListener) {
-        const _getBoundingClientRec = getBoundingClientRect(this._textarea),
-          origHeight = _getBoundingClientRec.height;
+        const {
+          height: origHeight
+        } = getBoundingClientRect(this._textarea);
         this._textareaResizeListener = new ResizeObserver(entries => {
           for (const entry of entries) {
-            const height = entry.contentRect.height;
+            const {
+              height
+            } = entry.contentRect;
             if (origHeight !== height) {
               this._textareaResize();
             }
@@ -208,9 +168,65 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       this._request = requestAnimationFrame(this.grow);
     }
   }
+  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) : undefined;
+    if (this.props.maxHeight && maxHeight !== undefined && 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 !== undefined && 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 {
+      onChange,
+      value,
+      disabled,
+      readOnly
+    } = this.props;
+    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;
   }
@@ -229,27 +245,27 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     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,
-      styles = _this$props4.styles,
-      margin = _this$props4.margin;
+    const {
+      autoGrow,
+      placeholder,
+      value,
+      defaultValue,
+      disabled,
+      readOnly,
+      required,
+      width,
+      height,
+      maxHeight,
+      textareaRef,
+      resize,
+      styles,
+      margin
+    } = this.props;
     const props = omitProps(this.props, TextArea.allowedProps);
     const style = {
       width,
       resize,
-      height: !autoGrow ? height : void 0,
+      height: !autoGrow ? height : undefined,
       maxHeight
     };
     const textarea = _jsx("textarea", {
@@ -259,8 +275,7 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       placeholder: placeholder,
       ref: textarea => {
         if (textarea) {
-          var _this$myObserver;
-          (_this$myObserver = this.myObserver) === null || _this$myObserver === void 0 ? void 0 : _this$myObserver.observe(textarea);
+          this.myObserver?.observe(textarea);
         }
         this._textarea = textarea;
         if (typeof textareaRef === 'function') {
@@ -271,14 +286,14 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       id: this.id,
       required: required,
       "aria-required": required,
-      "aria-invalid": this.invalid ? 'true' : void 0,
+      "aria-invalid": this.invalid ? 'true' : undefined,
       disabled: disabled || readOnly,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
+      css: this.props.styles?.textArea,
       onChange: this.handleChange
     });
     const label = hasVisibleChildren(this.props.label) ? _jsxs(Fragment, {
       children: [this.props.label, required && _jsxs("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+        css: this.invalid ? styles?.requiredInvalid : {},
         "aria-hidden": true,
         children: [' ', "*"]
       })]
@@ -294,14 +309,14 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       margin: margin,
       "data-cid": "TextArea",
       children: _jsxs("div", {
-        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
+        css: this.props.styles?.textAreaLayout,
         style: {
           width,
           maxHeight
         },
         ref: this.handleContainerRef,
         children: [textarea, !disabled && !readOnly ? _jsx("span", {
-          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
+          css: this.props.styles?.textAreaOutline,
           "aria-hidden": "true",
           ref: e => {
             this._highlightRef = e;
@@ -310,16 +325,6 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       })
     });
   }
-}, _TextArea.displayName = "TextArea", _TextArea.componentId = 'TextArea', _TextArea.allowedProps = allowedProps, _TextArea.defaultProps = {
-  size: 'medium',
-  autoGrow: true,
-  resize: 'none',
-  inline: false,
-  messages: [],
-  disabled: false,
-  readOnly: false,
-  layout: 'stacked',
-  required: false
-}, _TextArea)) || _class) || _class);
+}) || _class) || _class);
 export default TextArea;
 export { TextArea };

package/es/TextArea/v1/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const disabled = props.disabled,
-    size = props.size;
+  const {
+    disabled,
+    size
+  } = props;
   const fontSizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize

package/es/TextArea/v1/theme.js

@@ -28,13 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1;
-  const colors = theme.colors,
-    typography = theme.typography,
-    borders = theme.borders,
-    spacing = theme.spacing,
-    forms = theme.forms,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    borders,
+    spacing,
+    forms,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -42,31 +43,31 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
-    borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
-    borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
-    borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey3045,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
-    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.red4570,
-    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.grey4570,
-    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
-    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    requiredInvalidColor: colors?.contrasts?.red5782,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
+    borderTopColor: colors?.contrasts?.grey3045,
+    borderRightColor: colors?.contrasts?.grey3045,
+    borderBottomColor: colors?.contrasts?.grey3045,
+    borderLeftColor: colors?.contrasts?.grey3045,
+    borderRadius: borders?.radiusMedium,
+    padding: spacing?.small,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineStyle: borders?.style,
+    errorBorderColor: colors?.contrasts?.red4570,
+    errorOutlineColor: colors?.contrasts?.red4570,
+    placeholderColor: colors?.contrasts?.grey4570,
+    smallFontSize: typography?.fontSizeSmall,
+    smallHeight: forms?.inputHeightSmall,
+    mediumFontSize: typography?.fontSizeMedium,
+    mediumHeight: forms?.inputHeightMedium,
+    largeFontSize: typography?.fontSizeLarge,
+    largeHeight: forms?.inputHeightLarge
   };
   return {
     ...componentVariables,

package/es/TextArea/v2/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["size", "autoGrow", "resize", "inline", "messages", "disabled", "readOnly", "layout", "required", "placeholder", "value", "defaultValue", "width", "height", "maxHeight", "textareaRef", "margin", "label", "onChange", "id", "themeOverride"];
 /*
  * The MIT License (MIT)
  *
@@ -39,37 +37,30 @@ category: components
 ---
 **/
 const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
-  const _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    _props$autoGrow = props.autoGrow,
-    autoGrow = _props$autoGrow === void 0 ? true : _props$autoGrow,
-    _props$resize = props.resize,
-    resize = _props$resize === void 0 ? 'none' : _props$resize,
-    _props$inline = props.inline,
-    inline = _props$inline === void 0 ? false : _props$inline,
-    _props$messages = props.messages,
-    messages = _props$messages === void 0 ? [] : _props$messages,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$readOnly = props.readOnly,
-    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'stacked' : _props$layout,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    placeholder = props.placeholder,
-    value = props.value,
-    defaultValue = props.defaultValue,
-    width = props.width,
-    height = props.height,
-    maxHeight = props.maxHeight,
-    textareaRef = props.textareaRef,
-    margin = props.margin,
-    label = props.label,
-    onChange = props.onChange,
-    propId = props.id,
-    themeOverride = props.themeOverride,
-    rest = _objectWithoutProperties(props, _excluded);
+  const {
+    size = 'medium',
+    autoGrow = true,
+    resize = 'none',
+    inline = false,
+    messages = [],
+    disabled = false,
+    readOnly = false,
+    layout = 'stacked',
+    required = false,
+    placeholder,
+    value,
+    defaultValue,
+    width,
+    height,
+    maxHeight,
+    textareaRef,
+    margin,
+    label,
+    onChange,
+    id: propId,
+    themeOverride,
+    ...rest
+  } = props;
 
   // Use deterministic ID
   const instanceCounterMap = useContext(DeterministicIdContext);
@@ -88,16 +79,17 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   const formFieldRef = useRef(null);
 
   // Compute invalid state
-  const _useMemo = useMemo(() => {
-      const isInvalid = messages && messages.findIndex(message => message.type === 'error' || message.type === 'newError') >= 0;
-      const isSuccess = messages && messages.findIndex(message => message.type === 'success') >= 0;
-      return {
-        isInvalid,
-        isSuccess
-      };
-    }, [messages]),
-    isInvalid = _useMemo.isInvalid,
-    isSuccess = _useMemo.isSuccess;
+  const {
+    isInvalid,
+    isSuccess
+  } = useMemo(() => {
+    const isInvalid = messages && messages.findIndex(message => message.type === 'error' || message.type === 'newError') >= 0;
+    const isSuccess = messages && messages.findIndex(message => message.type === 'success') >= 0;
+    return {
+      isInvalid,
+      isSuccess
+    };
+  }, [messages]);
 
   // Use styles
   const styles = useStyle({
@@ -145,8 +137,8 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     _textarea.current.style.height = 'auto';
     _textarea.current.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
     heightValue = _textarea.current.scrollHeight + offset + 'px';
-    const maxHeightPx = maxHeight ? px(maxHeight, _container.current) : void 0;
-    if (maxHeight && maxHeightPx !== void 0 && _textarea.current.scrollHeight > maxHeightPx) {
+    const maxHeightPx = maxHeight ? px(maxHeight, _container.current) : undefined;
+    if (maxHeight && maxHeightPx !== undefined && _textarea.current.scrollHeight > maxHeightPx) {
       _textarea.current.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds maxHeight in pixels
     } else if (height) {
       if (_textarea.current.value === '') {
@@ -159,7 +151,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
 
     // preserve container height to prevent scroll jumping on long textareas,
     // but make sure container doesn't exceed maxHeight prop
-    const heightExceedsMax = maxHeightPx !== void 0 && px(heightValue) > maxHeightPx;
+    const heightExceedsMax = maxHeightPx !== undefined && px(heightValue) > maxHeightPx;
     if (!heightExceedsMax && _container.current) {
       _container.current.style.minHeight = heightValue;
     }
@@ -195,11 +187,14 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
         _listener.current = addEventListener(window, 'resize', _debounced.current);
       }
       if (_textarea.current && !_textareaResizeListener.current) {
-        const _getBoundingClientRec = getBoundingClientRect(_textarea.current),
-          origHeight = _getBoundingClientRec.height;
+        const {
+          height: origHeight
+        } = getBoundingClientRect(_textarea.current);
         _textareaResizeListener.current = new ResizeObserver(entries => {
           for (const entry of entries) {
-            const entryHeight = entry.contentRect.height;
+            const {
+              height: entryHeight
+            } = entry.contentRect;
             if (origHeight !== entryHeight) {
               _textareaResize();
             }
@@ -248,11 +243,14 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
           _listener.current = addEventListener(window, 'resize', _debounced.current);
         }
         if (_textarea.current && !_textareaResizeListener.current) {
-          const _getBoundingClientRec2 = getBoundingClientRect(_textarea.current),
-            origHeight = _getBoundingClientRec2.height;
+          const {
+            height: origHeight
+          } = getBoundingClientRect(_textarea.current);
           _textareaResizeListener.current = new ResizeObserver(entries => {
             for (const entry of entries) {
-              const entryHeight = entry.contentRect.height;
+              const {
+                height: entryHeight
+              } = entry.contentRect;
               if (origHeight !== entryHeight) {
                 _textareaResize();
               }
@@ -271,16 +269,13 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   // Expose API through ref using useImperativeHandle
   useImperativeHandle(ref, () => ({
     focus: () => {
-      var _textarea$current;
-      (_textarea$current = _textarea.current) === null || _textarea$current === void 0 ? void 0 : _textarea$current.focus();
+      _textarea.current?.focus();
     },
     get value() {
-      var _textarea$current2;
-      return ((_textarea$current2 = _textarea.current) === null || _textarea$current2 === void 0 ? void 0 : _textarea$current2.value) || '';
+      return _textarea.current?.value || '';
     },
     get minHeight() {
-      var _textarea$current3;
-      return ((_textarea$current3 = _textarea.current) === null || _textarea$current3 === void 0 ? void 0 : _textarea$current3.style.minHeight) || '';
+      return _textarea.current?.style.minHeight || '';
     },
     get focused() {
       return isActiveElement(_textarea.current);
@@ -296,7 +291,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   const style = {
     width,
     resize,
-    height: !autoGrow ? height : void 0,
+    height: !autoGrow ? height : undefined,
     maxHeight
   };
   const textarea = _jsx("textarea", {
@@ -314,10 +309,10 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     required: required,
     "aria-required": required,
-    "aria-invalid": isInvalid ? 'true' : void 0,
+    "aria-invalid": isInvalid ? 'true' : undefined,
     disabled: disabled,
     readOnly: readOnly,
-    css: styles === null || styles === void 0 ? void 0 : styles.textArea,
+    css: styles?.textArea,
     onChange: handleChange
   });
   return _jsx(FormField, {
@@ -334,7 +329,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     readOnly: readOnly,
     "data-cid": "TextArea",
     children: _jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.textAreaLayout,
+      css: styles?.textAreaLayout,
       style: {
         width,
         maxHeight