@instructure/ui-text-input 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)
 
 ### Bug Fixes

package/es/TextInput/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 { callRenderProp, getInteraction, passthroughProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { isActiveElement, addEventListener, getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
@@ -32,289 +9,244 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-
-/**
----
-category: components
-tags: form, field
----
-**/
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class TextInput extends Component {
-  static displayName = 'TextInput';
-  static componentId = 'TextInput';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'text',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
-    isRequired: false,
-    display: 'block',
-    shouldNotWrap: false,
-    size: 'medium',
-    textAlign: 'start',
-    messages: []
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-      afterElementHasWidth: undefined
-    };
-    this._defaultId = props.deterministicId();
-    this._messagesId = props.deterministicId('TextInput-messages');
-  }
-  ref = null;
-  _input = null;
-  _afterElement = null;
-  _defaultId;
-  _messagesId;
-  _focusListener = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+class TextInput extends Component {
+    static{
+        this.displayName = 'TextInput';
+    }
+    static{
+        this.componentId = 'TextInput';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            type: 'text',
+            interaction: undefined,
+            isRequired: false,
+            display: 'block',
+            shouldNotWrap: false,
+            size: 'medium',
+            textAlign: 'start',
+            messages: []
+        };
+    }
+    constructor(props){
+        super(props), this.ref = null, this._input = null, this._afterElement = null, this._focusListener = null, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        }, this.makeStyleProps = ()=>{
+            const { interaction } = this;
+            const { hasFocus, afterElementHasWidth } = this.state;
+            const beforeElement = this.props.renderBeforeInput ? callRenderProp(this.props.renderBeforeInput) : null;
+            return {
+                disabled: interaction === 'disabled',
+                invalid: this.invalid,
+                focused: hasFocus,
+                afterElementHasWidth: afterElementHasWidth,
+                beforeElementExists: !!beforeElement
+            };
+        }, this.handleInputRef = (node)=>{
+            this._input = node;
+            if (typeof this.props.inputRef === 'function') {
+                this.props.inputRef(node);
+            }
+        }, this.handleChange = (event)=>{
+            if (typeof this.props.onChange === 'function') {
+                this.props.onChange(event, event.target.value);
+            }
+        }, this.handleBlur = (event)=>{
+            if (typeof this.props.onBlur === 'function') {
+                this.props.onBlur(event);
+            }
+            this.setState({
+                hasFocus: false
+            });
+        }, this.handleFocus = (event)=>{
+            if (typeof this.props.onFocus === 'function') {
+                this.props.onFocus(event);
+            }
+            this.setState({
+                hasFocus: true
+            });
+        };
+        this.state = {
+            hasFocus: false,
+            afterElementHasWidth: undefined
+        };
+        this._defaultId = props.deterministicId();
+        this._messagesId = props.deterministicId('TextInput-messages');
+    }
+    componentDidMount() {
+        if (this._input) {
+            this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
+            this.setState({
+                afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+            });
+        }
+        this.adjustAfterElementHeight();
+        this.props.makeStyles?.(this.makeStyleProps());
     }
-  };
-  componentDidMount() {
-    if (this._input) {
-      this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
+    componentWillUnmount() {
+        if (this._focusListener) {
+            this._focusListener.remove();
+        }
     }
-    this.adjustAfterElementHeight();
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  componentWillUnmount() {
-    if (this._focusListener) {
-      this._focusListener.remove();
+    componentDidUpdate(prevProps) {
+        if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
+            this.setState({
+                afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+            });
+        }
+        if (getInteraction({
+            props: prevProps
+        }) !== 'disabled' && getInteraction({
+            props: this.props
+        }) === 'disabled') {
+            this.setState({
+                hasFocus: false
+            });
+        }
+        this.props.makeStyles?.(this.makeStyleProps());
     }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
+    adjustAfterElementHeight() {
+        const afterElementChild = this._afterElement?.firstElementChild;
+        const buttonContentSpan = afterElementChild?.tagName === 'BUTTON' ? afterElementChild.firstElementChild : null;
+        const popoverContentSpan = afterElementChild?.tagName === 'SPAN' && afterElementChild.firstElementChild?.tagName === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
+        const targetSpan = buttonContentSpan ?? popoverContentSpan;
+        if (targetSpan) {
+            targetSpan.style.height = '36px';
+        }
     }
-    if (getInteraction({
-      props: prevProps
-    }) !== 'disabled' && getInteraction({
-      props: this.props
-    }) === 'disabled') {
-      this.setState({
-        hasFocus: false
-      });
+    focus() {
+        this._input?.focus();
     }
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  adjustAfterElementHeight() {
-    const afterElementChild = this._afterElement?.firstElementChild;
-
-    // Check if the child is a button, then get the button's first child (the content span)
-    const buttonContentSpan = afterElementChild?.tagName === 'BUTTON' ? afterElementChild.firstElementChild : null;
-
-    // This is a necessary workaround for DateInput2 because it uses a Popover, which has a nested Button as an afterElement
-    // Check if the child is a Popover's inner span containing a button, then get the button's first child (the content span)
-    const popoverContentSpan = afterElementChild?.tagName === 'SPAN' && afterElementChild.firstElementChild?.tagName === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
-    const targetSpan = buttonContentSpan ?? popoverContentSpan;
-    if (targetSpan) {
-      // Set the height to 36px (the height of a medium TextInput) to avoid layout shift when the afterElement content changes
-      // this temporary workaround is necessary because otherwise the layout breaks, later on IconButton's default height will be adjusted to the TextInput size
-      // so this workaround will not be needed anymore
-      targetSpan.style.height = '36px';
+    get interaction() {
+        return getInteraction({
+            props: this.props
+        });
     }
-  }
-  makeStyleProps = () => {
-    const {
-      interaction
-    } = this;
-    const {
-      hasFocus,
-      afterElementHasWidth
-    } = this.state;
-    const beforeElement = this.props.renderBeforeInput ? callRenderProp(this.props.renderBeforeInput) : null;
-    return {
-      disabled: interaction === 'disabled',
-      invalid: this.invalid,
-      focused: hasFocus,
-      afterElementHasWidth: afterElementHasWidth,
-      beforeElementExists: !!beforeElement
-    };
-  };
-  focus() {
-    this._input?.focus();
-  }
-  get interaction() {
-    return getInteraction({
-      props: this.props
-    });
-  }
-  get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0;
-  }
-  get invalid() {
-    return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
-  get focused() {
-    return isActiveElement(this._input);
-  }
-  get value() {
-    return this._input?.value;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  handleInputRef = node => {
-    this._input = node;
-    if (typeof this.props.inputRef === 'function') {
-      this.props.inputRef(node);
+    get hasMessages() {
+        return !!this.props.messages && this.props.messages.length > 0;
     }
-  };
-  handleChange = event => {
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(event, event.target.value);
+    get invalid() {
+        return !!this.props.messages && this.props.messages.findIndex((message)=>{
+            return message.type === 'error' || message.type === 'newError';
+        }) >= 0;
     }
-  };
-  handleBlur = event => {
-    if (typeof this.props.onBlur === 'function') {
-      this.props.onBlur(event);
+    get focused() {
+        return isActiveElement(this._input);
     }
-    this.setState({
-      hasFocus: false
-    });
-  };
-  handleFocus = event => {
-    if (typeof this.props.onFocus === 'function') {
-      this.props.onFocus(event);
+    get value() {
+        return this._input?.value;
     }
-    this.setState({
-      hasFocus: true
-    });
-  };
-  renderInput() {
-    const {
-      type,
-      size,
-      htmlSize,
-      display,
-      textAlign,
-      placeholder,
-      value,
-      defaultValue,
-      isRequired,
-      onFocus,
-      ...rest
-    } = this.props;
-    const props = passthroughProps(rest);
-    const {
-      interaction
-    } = this;
-    let descriptionIds = '';
-    if (props['aria-describedby']) {
-      descriptionIds = `${props['aria-describedby']}`;
+    get id() {
+        return this.props.id || this._defaultId;
     }
-    return _jsx("input", {
-      ...props,
-      css: this.props.styles?.textInput,
-      defaultValue: defaultValue,
-      value: value,
-      placeholder: placeholder,
-      ref: this.handleInputRef,
-      type: type,
-      id: this.id,
-      required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : undefined,
-      disabled: interaction === 'disabled',
-      readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
-      size: htmlSize,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur
-    });
-  }
-  getElementHasWidth(element) {
-    if (!element) {
-      return undefined;
+    renderInput() {
+        const { type, size, htmlSize, display, textAlign, placeholder, value, defaultValue, isRequired, onFocus, ...rest } = this.props;
+        const props = passthroughProps(rest);
+        const { interaction } = this;
+        let descriptionIds = '';
+        if (props['aria-describedby']) {
+            descriptionIds = `${props['aria-describedby']}`;
+        }
+        return /*#__PURE__*/ _jsx("input", {
+            ...props,
+            css: this.props.styles?.textInput,
+            defaultValue: defaultValue,
+            value: value,
+            placeholder: placeholder,
+            ref: this.handleInputRef,
+            type: type,
+            id: this.id,
+            required: isRequired,
+            "aria-invalid": this.invalid ? 'true' : undefined,
+            disabled: interaction === 'disabled',
+            readOnly: interaction === 'readonly',
+            "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
+            size: htmlSize,
+            onChange: this.handleChange,
+            onBlur: this.handleBlur
+        });
     }
-    const computedStyle = getCSSStyleDeclaration(element);
-    if (!computedStyle) {
-      return undefined;
+    getElementHasWidth(element) {
+        if (!element) {
+            return undefined;
+        }
+        const computedStyle = getCSSStyleDeclaration(element);
+        if (!computedStyle) {
+            return undefined;
+        }
+        const { width, paddingInlineStart, paddingInlineEnd } = computedStyle;
+        if (width === 'auto' || width === '') {
+            return true;
+        }
+        const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
+        return elementWidth > 0;
     }
-    const {
-      width,
-      paddingInlineStart,
-      paddingInlineEnd
-    } = computedStyle;
-    if (width === 'auto' || width === '') {
-      // This is a workaround for an edge-case, when the TextInput's parent
-      // is hidden on load, so the element is not visible either.
-      // In this case the computed width is going to be either 'auto' or '',
-      // so we assume it has width so that the padding won't be removed.
-      return true;
+    render() {
+        const { width, display, renderLabel, renderBeforeInput, renderAfterInput, messages, inputContainerRef, isRequired, styles } = this.props;
+        const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
+        const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
+        const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
+        const rawLabel = callRenderProp(renderLabel);
+        const label = hasVisibleChildren(rawLabel) ? /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                rawLabel,
+                isRequired && /*#__PURE__*/ _jsxs("span", {
+                    css: this.invalid ? styles?.requiredInvalid : {},
+                    "aria-hidden": true,
+                    children: [
+                        ' ',
+                        "*"
+                    ]
+                })
+            ]
+        }) : rawLabel;
+        return /*#__PURE__*/ _jsx(FormField, {
+            id: this.id,
+            label: label,
+            messagesId: this._messagesId,
+            messages: messages,
+            inline: display === 'inline-block',
+            width: width,
+            inputContainerRef: inputContainerRef,
+            layout: this.props.layout,
+            elementRef: this.handleRef,
+            margin: this.props.margin,
+            "data-cid": "TextInput",
+            children: /*#__PURE__*/ _jsx("span", {
+                css: styles?.facade,
+                children: renderBeforeOrAfter ? /*#__PURE__*/ _jsxs("span", {
+                    css: styles?.layout,
+                    children: [
+                        beforeElement,
+                        /*#__PURE__*/ _jsxs("span", {
+                            css: styles?.inputLayout,
+                            children: [
+                                this.renderInput(),
+                                afterElement && /*#__PURE__*/ _jsx("span", {
+                                    css: styles?.afterElement,
+                                    ref: (e)=>{
+                                        this._afterElement = e;
+                                    },
+                                    children: afterElement
+                                })
+                            ]
+                        })
+                    ]
+                }) : this.renderInput()
+            })
+        });
     }
-    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
-    return elementWidth > 0;
-  }
-  render() {
-    const {
-      width,
-      display,
-      renderLabel,
-      renderBeforeInput,
-      renderAfterInput,
-      messages,
-      inputContainerRef,
-      isRequired,
-      styles
-    } = this.props;
-    const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
-    const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
-    const rawLabel = callRenderProp(renderLabel);
-    const label = hasVisibleChildren(rawLabel) ? _jsxs(Fragment, {
-      children: [rawLabel, isRequired && _jsxs("span", {
-        css: this.invalid ? styles?.requiredInvalid : {},
-        "aria-hidden": true,
-        children: [' ', "*"]
-      })]
-    }) : rawLabel;
-    return _jsx(FormField, {
-      id: this.id,
-      label: label,
-      messagesId: this._messagesId,
-      messages: messages,
-      inline: display === 'inline-block',
-      width: width,
-      inputContainerRef: inputContainerRef,
-      layout: this.props.layout,
-      elementRef: this.handleRef,
-      margin: this.props.margin,
-      "data-cid": "TextInput",
-      children: _jsx("span", {
-        css: styles?.facade,
-        children: renderBeforeOrAfter ? _jsxs("span", {
-          css: styles?.layout,
-          children: [beforeElement, _jsxs("span", {
-            css: styles?.inputLayout,
-            children: [this.renderInput(), afterElement && _jsx("span", {
-              css: styles?.afterElement,
-              ref: e => {
-                this._afterElement = e;
-              },
-              children: afterElement
-            })]
-          })]
-        }) : (/* If no prepended or appended content, don't render Flex layout */
-        this.renderInput())
-      })
-    });
-  }
-}) || _class) || _class);
+}
+TextInput = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], TextInput);
 export default TextInput;
-export { TextInput };
+export { TextInput };

package/es/TextInput/v1/props.js

@@ -1,26 +1,27 @@
-/*
- * 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 = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
-export { allowedProps };
+const allowedProps = [
+    'renderLabel',
+    'type',
+    'id',
+    'value',
+    'defaultValue',
+    'interaction',
+    'messages',
+    'size',
+    'textAlign',
+    'width',
+    'htmlSize',
+    'display',
+    'shouldNotWrap',
+    'placeholder',
+    'isRequired',
+    'elementRef',
+    'inputRef',
+    'inputContainerRef',
+    'renderBeforeInput',
+    'renderAfterInput',
+    'onChange',
+    'onBlur',
+    'onFocus',
+    'margin'
+];
+export { allowedProps };