@instructure/ui-text-area 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [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/es/TextArea/v1/index.js

@@ -1,28 +1,5 @@
-var _dec, _dec2, _class;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment, Component } from 'react';
 import { FormField } from '@instructure/ui-form-field/v11_6';
 import { addEventListener, isActiveElement, requestAnimationFrame, getBoundingClientRect } from '@instructure/ui-dom-utils';
@@ -34,298 +11,253 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-
-/**
----
-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 = 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._defaultId = props.deterministicId();
-
-    //mock ResizeObserver for ssr
-    if (typeof window === 'undefined') {
-      globalThis.ResizeObserver = class ResizeObserver {
-        observe() {
-          // do nothing
-        }
-        unobserve() {
-          // do nothing
-        }
-        disconnect() {
-          // do nothing
-        }
-      };
+class TextArea extends Component {
+    static{
+        this.displayName = 'TextArea';
     }
-  }
-  componentDidMount() {
-    this.myObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        if (this._highlightRef) {
-          const entryStyle = window.getComputedStyle(entry.target);
-          this._highlightRef.style.transition = 'none';
-          this._highlightRef.style.width = `calc(${entryStyle.width} + 0.5rem)`;
-          this._highlightRef.style.height = `calc(${entryStyle.height} + 0.5rem)`;
-          clearTimeout(this.resizeTimeout);
-          this.resizeTimeout = setTimeout(() => {
-            if (this._highlightRef) {
-              this._highlightRef.style.transition = 'all 0.2s';
-            }
-          }, 500);
-        }
-      }
-    });
-    this.autoGrow();
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.autoGrow();
-    this.props.makeStyles?.();
-  }
-  componentWillUnmount() {
-    if (this._listener) {
-      this._listener.remove();
+    static{
+        this.componentId = 'TextArea';
     }
-    if (this._textareaResizeListener) {
-      this._textareaResizeListener.disconnect();
+    static{
+        this.allowedProps = allowedProps;
     }
-    if (this._request) {
-      this._request.cancel();
+    static{
+        this.defaultProps = {
+            size: 'medium',
+            autoGrow: true,
+            resize: 'none',
+            inline: false,
+            messages: [],
+            disabled: false,
+            readOnly: false,
+            layout: 'stacked',
+            required: false
+        };
     }
-    if (this._debounced) {
-      this._debounced.cancel();
+    constructor(props){
+        super(props), this._textarea = null, this._container = null, this._manuallyResized = false, this._highlightRef = null, this.myObserver = null, this.ref = null, this._textareaResize = ()=>{
+            const textareaHeight = this._textarea.style.height;
+            if (textareaHeight !== '' && textareaHeight !== this._height) {
+                this._manuallyResized = true;
+                this._textarea.style.overflowY = 'auto';
+                this._container.style.minHeight = textareaHeight;
+            }
+        }, this.grow = ()=>{
+            if (!this._textarea || this._manuallyResized) {
+                return;
+            }
+            const offset = this._textarea.offsetHeight - this._textarea.clientHeight;
+            let height = '';
+            this._textarea.style.height = 'auto';
+            this._textarea.style.overflowY = 'hidden';
+            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';
+            } 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';
+                    height = this.props.height;
+                }
+            }
+            const heightExceedsMax = maxHeight !== undefined && px(height) > maxHeight;
+            if (!heightExceedsMax) {
+                this._container.style.minHeight = height;
+            }
+            this._height = height;
+            this._textarea.style.height = height;
+        }, this.handleChange = (event)=>{
+            const { onChange, value, disabled, readOnly } = this.props;
+            if (disabled || readOnly) {
+                event.preventDefault();
+                return;
+            }
+            if (typeof value === 'undefined') {
+                this.autoGrow();
+            }
+            if (typeof onChange === 'function') {
+                onChange(event);
+            }
+        }, this.handleContainerRef = (node)=>{
+            this._container = node;
+        };
+        this._defaultId = props.deterministicId();
+        if (typeof window === 'undefined') {
+            globalThis.ResizeObserver = class ResizeObserver1 {
+                observe() {}
+                unobserve() {}
+                disconnect() {}
+            };
+        }
     }
-    if (this.myObserver) {
-      this.myObserver.disconnect();
+    componentDidMount() {
+        this.myObserver = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                if (this._highlightRef) {
+                    const entryStyle = window.getComputedStyle(entry.target);
+                    this._highlightRef.style.transition = 'none';
+                    this._highlightRef.style.width = `calc(${entryStyle.width} + 0.5rem)`;
+                    this._highlightRef.style.height = `calc(${entryStyle.height} + 0.5rem)`;
+                    clearTimeout(this.resizeTimeout);
+                    this.resizeTimeout = setTimeout(()=>{
+                        if (this._highlightRef) {
+                            this._highlightRef.style.transition = 'all 0.2s';
+                        }
+                    }, 500);
+                }
+            }
+        });
+        this.autoGrow();
+        this.props.makeStyles?.();
     }
-  }
-  _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;
+    componentDidUpdate() {
+        this.autoGrow();
+        this.props.makeStyles?.();
     }
-  };
-  autoGrow() {
-    if (this.props.autoGrow) {
-      if (!this._debounced) {
-        this._debounced = debounce(this.grow, 200, {
-          leading: false,
-          trailing: true
-        });
-      }
-      if (!this._listener) {
-        this._listener = addEventListener(window, 'resize', this._debounced);
-      }
-      if (this._textarea && !this._textareaResizeListener) {
-        const {
-          height: origHeight
-        } = getBoundingClientRect(this._textarea);
-        this._textareaResizeListener = new ResizeObserver(entries => {
-          for (const entry of entries) {
-            const {
-              height
-            } = entry.contentRect;
-            if (origHeight !== height) {
-              this._textareaResize();
+    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();
+        }
+        if (this.myObserver) {
+            this.myObserver.disconnect();
+        }
+    }
+    autoGrow() {
+        if (this.props.autoGrow) {
+            if (!this._debounced) {
+                this._debounced = debounce(this.grow, 200, {
+                    leading: false,
+                    trailing: true
+                });
             }
-          }
-        });
-        this._textareaResizeListener.observe(this._textarea);
-      }
-      this._request = requestAnimationFrame(this.grow);
+            if (!this._listener) {
+                this._listener = addEventListener(window, 'resize', this._debounced);
+            }
+            if (this._textarea && !this._textareaResizeListener) {
+                const { height: origHeight } = getBoundingClientRect(this._textarea);
+                this._textareaResizeListener = new ResizeObserver((entries)=>{
+                    for (const entry of entries){
+                        const { height } = entry.contentRect;
+                        if (origHeight !== height) {
+                            this._textareaResize();
+                        }
+                    }
+                });
+                this._textareaResizeListener.observe(this._textarea);
+            }
+            this._request = requestAnimationFrame(this.grow);
+        }
     }
-  }
-  grow = () => {
-    if (!this._textarea || this._manuallyResized) {
-      return;
+    focus() {
+        this._textarea.focus();
     }
-    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;
-      }
+    get minHeight() {
+        return this._textarea.style.minHeight;
     }
-
-    // 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;
+    get invalid() {
+        return this.props.messages && this.props.messages.findIndex((message)=>{
+            return message.type === 'error' || message.type === 'newError';
+        }) >= 0;
     }
-    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;
+    get id() {
+        return this.props.id || this._defaultId;
     }
-    if (typeof value === 'undefined') {
-      // if uncontrolled
-      this.autoGrow();
+    get focused() {
+        return isActiveElement(this._textarea);
     }
-    if (typeof onChange === 'function') {
-      onChange(event);
+    get value() {
+        return this._textarea.value;
     }
-  };
-  handleContainerRef = node => {
-    this._container = node;
-  };
-  get minHeight() {
-    return this._textarea.style.minHeight;
-  }
-  get invalid() {
-    return this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  get focused() {
-    return isActiveElement(this._textarea);
-  }
-  get value() {
-    return this._textarea.value;
-  }
-  render() {
-    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 : undefined,
-      maxHeight
-    };
-    const textarea = _jsx("textarea", {
-      ...props,
-      value: value,
-      defaultValue: defaultValue,
-      placeholder: placeholder,
-      ref: textarea => {
-        if (textarea) {
-          this.myObserver?.observe(textarea);
-        }
-        this._textarea = textarea;
-        if (typeof textareaRef === 'function') {
-          textareaRef(textarea);
-        }
-      },
-      style: style,
-      id: this.id,
-      required: required,
-      "aria-required": required,
-      "aria-invalid": this.invalid ? 'true' : undefined,
-      disabled: disabled || readOnly,
-      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?.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,
-      "data-cid": "TextArea",
-      children: _jsxs("div", {
-        css: this.props.styles?.textAreaLayout,
-        style: {
-          width,
-          maxHeight
-        },
-        ref: this.handleContainerRef,
-        children: [textarea, !disabled && !readOnly ? _jsx("span", {
-          css: this.props.styles?.textAreaOutline,
-          "aria-hidden": "true",
-          ref: e => {
-            this._highlightRef = e;
-          }
-        }) : null]
-      })
-    });
-  }
-}) || _class) || _class);
+    render() {
+        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 : undefined,
+            maxHeight
+        };
+        const textarea = /*#__PURE__*/ _jsx("textarea", {
+            ...props,
+            value: value,
+            defaultValue: defaultValue,
+            placeholder: placeholder,
+            ref: (textarea)=>{
+                if (textarea) {
+                    this.myObserver?.observe(textarea);
+                }
+                this._textarea = textarea;
+                if (typeof textareaRef === 'function') {
+                    textareaRef(textarea);
+                }
+            },
+            style: style,
+            id: this.id,
+            required: required,
+            "aria-required": required,
+            "aria-invalid": this.invalid ? 'true' : undefined,
+            disabled: disabled || readOnly,
+            css: this.props.styles?.textArea,
+            onChange: this.handleChange
+        });
+        const label = hasVisibleChildren(this.props.label) ? /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                this.props.label,
+                required && /*#__PURE__*/ _jsxs("span", {
+                    css: this.invalid ? styles?.requiredInvalid : {},
+                    "aria-hidden": true,
+                    children: [
+                        ' ',
+                        "*"
+                    ]
+                })
+            ]
+        }) : this.props.label;
+        return /*#__PURE__*/ _jsx(FormField, {
+            ...pickProps(this.props, FormField.allowedProps),
+            label: label,
+            vAlign: "top",
+            id: this.id,
+            elementRef: (el)=>{
+                this.ref = el;
+            },
+            margin: margin,
+            "data-cid": "TextArea",
+            children: /*#__PURE__*/ _jsxs("div", {
+                css: this.props.styles?.textAreaLayout,
+                style: {
+                    width,
+                    maxHeight
+                },
+                ref: this.handleContainerRef,
+                children: [
+                    textarea,
+                    !disabled && !readOnly ? /*#__PURE__*/ _jsx("span", {
+                        css: this.props.styles?.textAreaOutline,
+                        "aria-hidden": "true",
+                        ref: (e)=>{
+                            this._highlightRef = e;
+                        }
+                    }) : null
+                ]
+            })
+        });
+    }
+}
+TextArea = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], TextArea);
 export default TextArea;
-export { TextArea };
+export { TextArea };

package/es/TextArea/v1/props.js

@@ -1,26 +1,23 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const allowedProps = ['label', 'id', 'size', 'layout', 'autoGrow', 'resize', 'width', 'height', 'maxHeight', 'messages', 'inline', 'placeholder', 'disabled', 'readOnly', 'required', 'textareaRef', 'defaultValue', 'value', 'onChange', 'margin'];
-export { allowedProps };
+const allowedProps = [
+    'label',
+    'id',
+    'size',
+    'layout',
+    'autoGrow',
+    'resize',
+    'width',
+    'height',
+    'maxHeight',
+    'messages',
+    'inline',
+    'placeholder',
+    'disabled',
+    'readOnly',
+    'required',
+    'textareaRef',
+    'defaultValue',
+    'value',
+    'onChange',
+    'margin'
+];
+export { allowedProps };