@instructure/ui-text-area 10.16.1-snapshot-0 → 10.16.1-snapshot-1

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.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-text-area
 

package/es/TextArea/__new-tests__/TextArea.test.js

@@ -23,13 +23,13 @@ var _TextArea, _TextArea2, _TextArea3, _TextArea4;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { TextArea } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('TextArea', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -43,7 +43,7 @@ describe('TextArea', () => {
     consoleErrorMock.mockRestore();
   });
   it('should accept a default value', async () => {
-    render(_TextArea || (_TextArea = /*#__PURE__*/React.createElement(TextArea, {
+    render(_TextArea || (_TextArea = _jsx(TextArea, {
       label: "Name",
       autoGrow: false,
       defaultValue: "Tom Servo"
@@ -52,7 +52,7 @@ describe('TextArea', () => {
     expect(input).toHaveTextContent('Tom Servo');
   });
   it('should include a label', async () => {
-    const _render = render(_TextArea2 || (_TextArea2 = /*#__PURE__*/React.createElement(TextArea, {
+    const _render = render(_TextArea2 || (_TextArea2 = _jsx(TextArea, {
         label: "Name",
         autoGrow: false
       }))),
@@ -61,7 +61,7 @@ describe('TextArea', () => {
     expect(textArea).toHaveTextContent('Name');
   });
   it('should set an initial height', async () => {
-    render(_TextArea3 || (_TextArea3 = /*#__PURE__*/React.createElement(TextArea, {
+    render(_TextArea3 || (_TextArea3 = _jsx(TextArea, {
       label: "Name",
       autoGrow: false,
       height: "100px"
@@ -71,7 +71,7 @@ describe('TextArea', () => {
   });
   it('should focus the textarea when focus is called', async () => {
     let ref;
-    render(/*#__PURE__*/React.createElement(TextArea, {
+    render(_jsx(TextArea, {
       label: "Name",
       autoGrow: false
       // @ts-expect-error this is managed by the testing framework
@@ -84,7 +84,7 @@ describe('TextArea', () => {
   });
   it('provides a focused getter', async () => {
     let ref;
-    render(/*#__PURE__*/React.createElement(TextArea, {
+    render(_jsx(TextArea, {
       label: "Name",
       autoGrow: false,
       ref: el => ref = el
@@ -94,7 +94,7 @@ describe('TextArea', () => {
   });
   it('should provide an textareaRef prop', async () => {
     const textareaRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(TextArea, {
+    render(_jsx(TextArea, {
       label: "Name",
       autoGrow: false,
       textareaRef: textareaRef
@@ -104,7 +104,7 @@ describe('TextArea', () => {
   });
   it('should provide a value getter', async () => {
     let ref;
-    render(/*#__PURE__*/React.createElement(TextArea, {
+    render(_jsx(TextArea, {
       label: "Name",
       autoGrow: false,
       defaultValue: "bar"
@@ -117,7 +117,7 @@ describe('TextArea', () => {
   describe('events', () => {
     it('responds to onChange event', async () => {
       const onChange = vi.fn();
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         label: "Name",
         autoGrow: false,
         onChange: onChange
@@ -134,7 +134,7 @@ describe('TextArea', () => {
     });
     it('does not respond to onChange event when disabled', async () => {
       const onChange = vi.fn();
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         disabled: true,
         label: "Name",
         autoGrow: false,
@@ -150,7 +150,7 @@ describe('TextArea', () => {
     });
     it('does not respond to onChange event when readOnly', async () => {
       const onChange = vi.fn();
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         readOnly: true,
         label: "Name",
         autoGrow: false,
@@ -166,7 +166,7 @@ describe('TextArea', () => {
     });
     it('responds to onBlur event', async () => {
       const onBlur = vi.fn();
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         label: "Name",
         autoGrow: false,
         onBlur: onBlur
@@ -179,7 +179,7 @@ describe('TextArea', () => {
     });
     it('responds to onFocus event', async () => {
       const onFocus = vi.fn();
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         label: "Name",
         autoGrow: false,
         onFocus: onFocus
@@ -193,7 +193,7 @@ describe('TextArea', () => {
   });
   describe('for a11y', () => {
     it('should meet standards', async () => {
-      const _render2 = render(_TextArea4 || (_TextArea4 = /*#__PURE__*/React.createElement(TextArea, {
+      const _render2 = render(_TextArea4 || (_TextArea4 = _jsx(TextArea, {
           label: "Name",
           autoGrow: false
         }))),
@@ -202,7 +202,7 @@ describe('TextArea', () => {
       expect(axeCheck).toBe(true);
     });
     it('should set aria-invalid when errors prop is set', async () => {
-      render(/*#__PURE__*/React.createElement(TextArea, {
+      render(_jsx(TextArea, {
         label: "Name",
         autoGrow: false,
         messages: [{

package/es/TextArea/index.js

@@ -23,12 +23,11 @@ var _dec, _dec2, _dec3, _class, _TextArea;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Fragment, Component } from 'react';
 import { FormField } from '@instructure/ui-form-field';
 import { addEventListener, isActiveElement, requestAnimationFrame, getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { px } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
 import { omitProps, pickProps, withDeterministicId } from '@instructure/ui-react-utils';
@@ -42,6 +41,7 @@ import { allowedProps, propTypes } from './props';
 category: components
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_TextArea = class TextArea extends Component {
   constructor(props) {
     super(props);
@@ -254,7 +254,8 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       height: !autoGrow ? height : void 0,
       maxHeight
     };
-    const textarea = jsx("textarea", Object.assign({}, props, {
+    const textarea = _jsx("textarea", {
+      ...props,
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
@@ -276,31 +277,37 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       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
-    }));
-    const label = hasVisibleChildren(this.props.label) ? jsx(React.Fragment, null, this.props.label, required && jsx("span", {
-      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
-      "aria-hidden": true
-    }, ' ', "*")) : this.props.label;
-    return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
+    });
+    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 : {},
+        "aria-hidden": true,
+        children: [' ', "*"]
+      })]
+    }) : this.props.label;
+    return _jsx(FormField, {
+      ...pickProps(this.props, FormField.allowedProps),
       label: label,
       vAlign: "top",
       id: this.id,
       elementRef: el => {
         this.ref = el;
       },
-      margin: margin
-    }), jsx("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
-      style: {
-        width,
-        maxHeight
-      },
-      ref: this.handleContainerRef
-    }, textarea, !disabled && !readOnly ? jsx("span", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
-      "aria-hidden": "true",
-      ref: e => this._highlightRef = e
-    }) : null));
+      margin: margin,
+      children: _jsxs("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.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,
+          "aria-hidden": "true",
+          ref: e => this._highlightRef = e
+        }) : null]
+      })
+    });
   }
 }, _TextArea.displayName = "TextArea", _TextArea.componentId = 'TextArea', _TextArea.allowedProps = allowedProps, _TextArea.propTypes = propTypes, _TextArea.defaultProps = {
   size: 'medium',

package/lib/TextArea/__new-tests__/TextArea.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 require("@testing-library/jest-dom");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _TextArea, _TextArea2, _TextArea3, _TextArea4;
 /*
  * The MIT License (MIT)
@@ -45,16 +45,16 @@ describe('TextArea', () => {
     consoleErrorMock.mockRestore();
   });
   it('should accept a default value', async () => {
-    (0, _react2.render)(_TextArea || (_TextArea = /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)(_TextArea || (_TextArea = (0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false,
       defaultValue: "Tom Servo"
     })));
-    const input = _react2.screen.getByRole('textbox');
+    const input = _react.screen.getByRole('textbox');
     expect(input).toHaveTextContent('Tom Servo');
   });
   it('should include a label', async () => {
-    const _render = (0, _react2.render)(_TextArea2 || (_TextArea2 = /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    const _render = (0, _react.render)(_TextArea2 || (_TextArea2 = (0, _jsxRuntime.jsx)(_index.TextArea, {
         label: "Name",
         autoGrow: false
       }))),
@@ -63,30 +63,30 @@ describe('TextArea', () => {
     expect(textArea).toHaveTextContent('Name');
   });
   it('should set an initial height', async () => {
-    (0, _react2.render)(_TextArea3 || (_TextArea3 = /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)(_TextArea3 || (_TextArea3 = (0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false,
       height: "100px"
     })));
-    const input = _react2.screen.getByRole('textbox');
+    const input = _react.screen.getByRole('textbox');
     expect(input).toHaveStyle('height: 100px');
   });
   it('should focus the textarea when focus is called', async () => {
     let ref;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false
       // @ts-expect-error this is managed by the testing framework
       ,
       textareaRef: el => ref = el
     }));
-    const input = _react2.screen.getByRole('textbox');
+    const input = _react.screen.getByRole('textbox');
     ref.focus();
     expect(input).toHaveFocus();
   });
   it('provides a focused getter', async () => {
     let ref;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false,
       ref: el => ref = el
@@ -96,17 +96,17 @@ describe('TextArea', () => {
   });
   it('should provide an textareaRef prop', async () => {
     const textareaRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false,
       textareaRef: textareaRef
     }));
-    const input = _react2.screen.getByRole('textbox');
+    const input = _react.screen.getByRole('textbox');
     expect(textareaRef).toHaveBeenCalledWith(input);
   });
   it('should provide a value getter', async () => {
     let ref;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
       label: "Name",
       autoGrow: false,
       defaultValue: "bar"
@@ -119,31 +119,31 @@ describe('TextArea', () => {
   describe('events', () => {
     it('responds to onChange event', async () => {
       const onChange = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         label: "Name",
         autoGrow: false,
         onChange: onChange
       }));
-      const input = _react2.screen.getByRole('textbox');
-      _react2.fireEvent.change(input, {
+      const input = _react.screen.getByRole('textbox');
+      _react.fireEvent.change(input, {
         target: {
           value: 'foo'
         }
       });
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onChange).toHaveBeenCalledTimes(1);
       });
     });
     it('does not respond to onChange event when disabled', async () => {
       const onChange = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         disabled: true,
         label: "Name",
         autoGrow: false,
         onChange: onChange
       }));
-      const input = _react2.screen.getByRole('textbox');
-      _react2.fireEvent.change(input, {
+      const input = _react.screen.getByRole('textbox');
+      _react.fireEvent.change(input, {
         target: {
           value: 'foo'
         }
@@ -152,14 +152,14 @@ describe('TextArea', () => {
     });
     it('does not respond to onChange event when readOnly', async () => {
       const onChange = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         readOnly: true,
         label: "Name",
         autoGrow: false,
         onChange: onChange
       }));
-      const input = _react2.screen.getByRole('textbox');
-      _react2.fireEvent.change(input, {
+      const input = _react.screen.getByRole('textbox');
+      _react.fireEvent.change(input, {
         target: {
           value: 'foo'
         }
@@ -168,34 +168,34 @@ describe('TextArea', () => {
     });
     it('responds to onBlur event', async () => {
       const onBlur = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         label: "Name",
         autoGrow: false,
         onBlur: onBlur
       }));
       _userEvent.default.tab();
       _userEvent.default.tab();
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onBlur).toHaveBeenCalled();
       });
     });
     it('responds to onFocus event', async () => {
       const onFocus = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         label: "Name",
         autoGrow: false,
         onFocus: onFocus
       }));
-      const input = _react2.screen.getByRole('textbox');
+      const input = _react.screen.getByRole('textbox');
       input.focus();
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onFocus).toHaveBeenCalled();
       });
     });
   });
   describe('for a11y', () => {
     it('should meet standards', async () => {
-      const _render2 = (0, _react2.render)(_TextArea4 || (_TextArea4 = /*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      const _render2 = (0, _react.render)(_TextArea4 || (_TextArea4 = (0, _jsxRuntime.jsx)(_index.TextArea, {
           label: "Name",
           autoGrow: false
         }))),
@@ -204,7 +204,7 @@ describe('TextArea', () => {
       expect(axeCheck).toBe(true);
     });
     it('should set aria-invalid when errors prop is set', async () => {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextArea, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TextArea, {
         label: "Name",
         autoGrow: false,
         messages: [{
@@ -212,7 +212,7 @@ describe('TextArea', () => {
           text: 'some error message'
         }]
       }));
-      const input = _react2.screen.getByRole('textbox');
+      const input = _react.screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-invalid');
     });
   });

package/lib/TextArea/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextArea = void 0;
-var _react = _interopRequireWildcard(require("react"));
+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");
@@ -23,6 +22,7 @@ var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChil
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _dec3, _class, _TextArea;
 /*
  * The MIT License (MIT)
@@ -47,7 +47,6 @@ var _dec, _dec2, _dec3, _class, _TextArea;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -265,7 +264,8 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
       height: !autoGrow ? height : void 0,
       maxHeight
     };
-    const textarea = (0, _emotion.jsx)("textarea", Object.assign({}, props, {
+    const textarea = (0, _jsxRuntime.jsx)("textarea", {
+      ...props,
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
@@ -287,31 +287,37 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
       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
-    }));
-    const label = (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label) ? (0, _emotion.jsx)(_react.default.Fragment, null, this.props.label, required && (0, _emotion.jsx)("span", {
-      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
-      "aria-hidden": true
-    }, ' ', "*")) : this.props.label;
-    return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
+    });
+    const label = (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [this.props.label, required && (0, _jsxRuntime.jsxs)("span", {
+        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+        "aria-hidden": true,
+        children: [' ', "*"]
+      })]
+    }) : this.props.label;
+    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
+      ...(0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps),
       label: label,
       vAlign: "top",
       id: this.id,
       elementRef: el => {
         this.ref = el;
       },
-      margin: margin
-    }), (0, _emotion.jsx)("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
-      style: {
-        width,
-        maxHeight
-      },
-      ref: this.handleContainerRef
-    }, textarea, !disabled && !readOnly ? (0, _emotion.jsx)("span", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
-      "aria-hidden": "true",
-      ref: e => this._highlightRef = e
-    }) : null));
+      margin: margin,
+      children: (0, _jsxRuntime.jsxs)("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
+        style: {
+          width,
+          maxHeight
+        },
+        ref: this.handleContainerRef,
+        children: [textarea, !disabled && !readOnly ? (0, _jsxRuntime.jsx)("span", {
+          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
+          "aria-hidden": "true",
+          ref: e => this._highlightRef = e
+        }) : null]
+      })
+    });
   }
 }, _TextArea.displayName = "TextArea", _TextArea.componentId = 'TextArea', _TextArea.allowedProps = _props.allowedProps, _TextArea.propTypes = _props.propTypes, _TextArea.defaultProps = {
   size: 'medium',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "10.16.1-snapshot-0",
+  "version": "10.16.1-snapshot-1",
   "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.26.0",
-    "@instructure/debounce": "10.16.1-snapshot-0",
-    "@instructure/emotion": "10.16.1-snapshot-0",
-    "@instructure/shared-types": "10.16.1-snapshot-0",
-    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-form-field": "10.16.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-testable": "10.16.1-snapshot-0",
-    "@instructure/ui-utils": "10.16.1-snapshot-0",
-    "@instructure/uid": "10.16.1-snapshot-0",
+    "@instructure/debounce": "10.16.1-snapshot-1",
+    "@instructure/emotion": "10.16.1-snapshot-1",
+    "@instructure/shared-types": "10.16.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.16.1-snapshot-1",
+    "@instructure/ui-form-field": "10.16.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.16.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.16.1-snapshot-1",
+    "@instructure/ui-testable": "10.16.1-snapshot-1",
+    "@instructure/ui-utils": "10.16.1-snapshot-1",
+    "@instructure/uid": "10.16.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-themes": "10.16.1-snapshot-0",
+    "@instructure/ui-axe-check": "10.16.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.16.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.16.1-snapshot-1",
+    "@instructure/ui-themes": "10.16.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/TextArea/__new-tests__/TextArea.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/TextArea/index.tsx

@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react'
+import { Fragment, Component } from 'react'
 import { FormField } from '@instructure/ui-form-field'
 import {
   addEventListener,
@@ -34,7 +33,7 @@ import {
 import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils'
 import { debounce } from '@instructure/debounce'
 import type { Debounced } from '@instructure/debounce'
-import { withStyle, jsx } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import { px } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
 import {
@@ -356,7 +355,7 @@ class TextArea extends Component<TextAreaProps> {
     )
 
     const label = hasVisibleChildren(this.props.label) ? (
-      <React.Fragment>
+      <Fragment>
         {this.props.label}
         {required && (
           <span
@@ -367,7 +366,7 @@ class TextArea extends Component<TextAreaProps> {
             *
           </span>
         )}
-      </React.Fragment>
+      </Fragment>
     ) : (
       this.props.label
     )