@instructure/ui-text-area 11.7.8 → 11.7.9-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
+
+**Note:** Version bump only for package @instructure/ui-text-area
+
+
+
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-text-area

package/lib/TextArea/v1/index.js

@@ -7,17 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TextArea = void 0;
 var _react = require("react");
 var _v11_ = require("@instructure/ui-form-field/v11_6");
-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 _uiDomUtils = require("@instructure/ui-dom-utils");
 var _debounce = require("@instructure/debounce");
 var _emotion = require("@instructure/emotion");
-var _px = require("@instructure/ui-utils/lib/px.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 _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _uiUtils = require("@instructure/ui-utils");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiA11yUtils = require("@instructure/ui-a11y-utils");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
 var _props = require("./props.js");
@@ -51,7 +46,7 @@ var _dec, _dec2, _class;
 category: components
 ---
 **/
-let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class TextArea extends _react.Component {
+let TextArea = exports.TextArea = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class TextArea extends _react.Component {
   static displayName = 'TextArea';
   static componentId = 'TextArea';
   static allowedProps = _props.allowedProps;
@@ -158,12 +153,12 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
         });
       }
       if (!this._listener) {
-        this._listener = (0, _addEventListener.addEventListener)(window, 'resize', this._debounced);
+        this._listener = (0, _uiDomUtils.addEventListener)(window, 'resize', this._debounced);
       }
       if (this._textarea && !this._textareaResizeListener) {
         const {
           height: origHeight
-        } = (0, _getBoundingClientRect.getBoundingClientRect)(this._textarea);
+        } = (0, _uiDomUtils.getBoundingClientRect)(this._textarea);
         this._textareaResizeListener = new ResizeObserver(entries => {
           for (const entry of entries) {
             const {
@@ -176,7 +171,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
         });
         this._textareaResizeListener.observe(this._textarea);
       }
-      this._request = (0, _requestAnimationFrame.requestAnimationFrame)(this.grow);
+      this._request = (0, _uiDomUtils.requestAnimationFrame)(this.grow);
     }
   }
   grow = () => {
@@ -192,13 +187,13 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
     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) : undefined;
+    const maxHeight = this.props.maxHeight ? (0, _uiUtils.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 ((0, _px.px)(this.props.height, this._container) > this._textarea.scrollHeight) {
+      } else if ((0, _uiUtils.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;
       }
@@ -206,7 +201,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
 
     // preserve container height to prevent scroll jumping on long textareas,
     // but make sure container doesn't exceed maxHeight prop
-    const heightExceedsMax = maxHeight !== undefined && (0, _px.px)(height) > maxHeight;
+    const heightExceedsMax = maxHeight !== undefined && (0, _uiUtils.px)(height) > maxHeight;
     if (!heightExceedsMax) {
       this._container.style.minHeight = height;
     }
@@ -250,7 +245,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
     return this.props.id || this._defaultId;
   }
   get focused() {
-    return (0, _isActiveElement.isActiveElement)(this._textarea);
+    return (0, _uiDomUtils.isActiveElement)(this._textarea);
   }
   get value() {
     return this._textarea.value;
@@ -272,7 +267,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
       styles,
       margin
     } = this.props;
-    const props = (0, _omitProps.omitProps)(this.props, TextArea.allowedProps);
+    const props = (0, _uiReactUtils.omitProps)(this.props, TextArea.allowedProps);
     const style = {
       width,
       resize,
@@ -302,7 +297,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
       css: this.props.styles?.textArea,
       onChange: this.handleChange
     });
-    const label = (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
+    const label = (0, _uiA11yUtils.hasVisibleChildren)(this.props.label) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [this.props.label, required && (0, _jsxRuntime.jsxs)("span", {
         css: this.invalid ? styles?.requiredInvalid : {},
         "aria-hidden": true,
@@ -310,7 +305,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
       })]
     }) : this.props.label;
     return (0, _jsxRuntime.jsx)(_v11_.FormField, {
-      ...(0, _pickProps.pickProps)(this.props, _v11_.FormField.allowedProps),
+      ...(0, _uiReactUtils.pickProps)(this.props, _v11_.FormField.allowedProps),
       label: label,
       vAlign: "top",
       id: this.id,

package/lib/TextArea/v2/index.js

@@ -7,16 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TextArea = void 0;
 var _react = require("react");
 var _latest = require("@instructure/ui-form-field/latest");
-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 _uiDomUtils = require("@instructure/ui-dom-utils");
 var _debounce = require("@instructure/debounce");
 var _emotion = require("@instructure/emotion");
-var _px = require("@instructure/ui-utils/lib/px.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
+var _uiUtils = require("@instructure/ui-utils");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -75,7 +70,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
   } = props;
 
   // SSR-safe deterministic ID generation (stable across server/client render)
-  const defaultId = (0, _useDeterministicId.useDeterministicId)('TextArea')();
+  const defaultId = (0, _uiReactUtils.useDeterministicId)('TextArea')();
   const id = propId || defaultId;
 
   // Use refs for mutable values
@@ -151,13 +146,13 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
     _textarea.current.style.height = 'auto';
     _textarea.current.style.overflowY = 'hidden'; // hide scrollbars for autoGrow textareas
     heightValue = _textarea.current.scrollHeight + offset + 'px';
-    const maxHeightPx = maxHeight ? (0, _px.px)(maxHeight, _container.current) : undefined;
+    const maxHeightPx = maxHeight ? (0, _uiUtils.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 === '') {
         heightValue = height;
-      } else if ((0, _px.px)(height, _container.current) > _textarea.current.scrollHeight) {
+      } else if ((0, _uiUtils.px)(height, _container.current) > _textarea.current.scrollHeight) {
         _textarea.current.style.overflowY = 'auto'; // add scroll if scrollHeight exceeds height in pixels
         heightValue = height;
       }
@@ -165,7 +160,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
 
     // preserve container height to prevent scroll jumping on long textareas,
     // but make sure container doesn't exceed maxHeight prop
-    const heightExceedsMax = maxHeightPx !== undefined && (0, _px.px)(heightValue) > maxHeightPx;
+    const heightExceedsMax = maxHeightPx !== undefined && (0, _uiUtils.px)(heightValue) > maxHeightPx;
     if (!heightExceedsMax && _container.current) {
       _container.current.style.minHeight = heightValue;
     }
@@ -198,12 +193,12 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
         });
       }
       if (!_listener.current) {
-        _listener.current = (0, _addEventListener.addEventListener)(window, 'resize', _debounced.current);
+        _listener.current = (0, _uiDomUtils.addEventListener)(window, 'resize', _debounced.current);
       }
       if (_textarea.current && !_textareaResizeListener.current) {
         const {
           height: origHeight
-        } = (0, _getBoundingClientRect.getBoundingClientRect)(_textarea.current);
+        } = (0, _uiDomUtils.getBoundingClientRect)(_textarea.current);
         _textareaResizeListener.current = new ResizeObserver(entries => {
           for (const entry of entries) {
             const {
@@ -216,7 +211,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
         });
         _textareaResizeListener.current.observe(_textarea.current);
       }
-      _request.current = (0, _requestAnimationFrame.requestAnimationFrame)(grow);
+      _request.current = (0, _uiDomUtils.requestAnimationFrame)(grow);
     }
   }, [autoGrow, grow, _textareaResize]);
 
@@ -254,12 +249,12 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
           });
         }
         if (!_listener.current) {
-          _listener.current = (0, _addEventListener.addEventListener)(window, 'resize', _debounced.current);
+          _listener.current = (0, _uiDomUtils.addEventListener)(window, 'resize', _debounced.current);
         }
         if (_textarea.current && !_textareaResizeListener.current) {
           const {
             height: origHeight
-          } = (0, _getBoundingClientRect.getBoundingClientRect)(_textarea.current);
+          } = (0, _uiDomUtils.getBoundingClientRect)(_textarea.current);
           _textareaResizeListener.current = new ResizeObserver(entries => {
             for (const entry of entries) {
               const {
@@ -272,7 +267,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
           });
           _textareaResizeListener.current.observe(_textarea.current);
         }
-        _request.current = (0, _requestAnimationFrame.requestAnimationFrame)(grow);
+        _request.current = (0, _uiDomUtils.requestAnimationFrame)(grow);
       }
     }
     if (typeof onChange === 'function') {
@@ -292,7 +287,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
       return _textarea.current?.style.minHeight || '';
     },
     get focused() {
-      return (0, _isActiveElement.isActiveElement)(_textarea.current);
+      return (0, _uiDomUtils.isActiveElement)(_textarea.current);
     },
     get invalid() {
       return messages && messages.findIndex(message => message.type === 'error' || message.type === 'newError') >= 0;
@@ -309,7 +304,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
     maxHeight
   };
   const textarea = (0, _jsxRuntime.jsx)("textarea", {
-    ...(0, _passthroughProps.passthroughProps)(rest),
+    ...(0, _uiReactUtils.passthroughProps)(rest),
     value: value,
     defaultValue: defaultValue,
     placeholder: placeholder,
@@ -334,7 +329,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
     onChange: handleChange
   });
   return (0, _jsxRuntime.jsx)(_latest.FormField, {
-    ...(0, _pickProps.pickProps)(props, _latest.FormField.allowedProps),
+    ...(0, _uiReactUtils.pickProps)(props, _latest.FormField.allowedProps),
     label: label,
     messagesId: messagesId,
     labelId: labelId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "11.7.8",
+  "version": "11.7.9-snapshot-1",
   "description": "A styled HTML text area component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/debounce": "11.7.8",
-    "@instructure/ui-a11y-utils": "11.7.8",
-    "@instructure/shared-types": "11.7.8",
-    "@instructure/ui-dom-utils": "11.7.8",
-    "@instructure/emotion": "11.7.8",
-    "@instructure/ui-form-field": "11.7.8",
-    "@instructure/ui-react-utils": "11.7.8",
-    "@instructure/ui-themes": "11.7.8",
-    "@instructure/ui-utils": "11.7.8",
-    "@instructure/uid": "11.7.8"
+    "@instructure/debounce": "11.7.9-snapshot-1",
+    "@instructure/emotion": "11.7.9-snapshot-1",
+    "@instructure/shared-types": "11.7.9-snapshot-1",
+    "@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
+    "@instructure/ui-dom-utils": "11.7.9-snapshot-1",
+    "@instructure/ui-form-field": "11.7.9-snapshot-1",
+    "@instructure/ui-themes": "11.7.9-snapshot-1",
+    "@instructure/ui-utils": "11.7.9-snapshot-1",
+    "@instructure/ui-react-utils": "11.7.9-snapshot-1",
+    "@instructure/uid": "11.7.9-snapshot-1"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-babel-preset": "11.7.8",
-    "@instructure/ui-axe-check": "11.7.8",
-    "@instructure/ui-color-utils": "11.7.8"
+    "@instructure/ui-axe-check": "11.7.9-snapshot-1",
+    "@instructure/ui-color-utils": "11.7.9-snapshot-1",
+    "@instructure/ui-babel-preset": "11.7.9-snapshot-1"
   },
   "peerDependencies": {
     "react": ">=18 <=19"