@instructure/ui-text-input 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/TextInput/v2/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextInput = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
@@ -19,8 +18,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired", "onFocus"];
-var _dec, _dec2, _class, _TextInput;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -50,61 +48,45 @@ category: components
 tags: form, field, input
 ---
 **/
-let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends _react.Component {
+let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = class TextInput extends _react.Component {
+  static displayName = "TextInput";
+  static componentId = 'TextInput';
+  static allowedProps = _props.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.ref = null;
-    this._input = null;
-    this._defaultId = void 0;
-    this._messagesId = void 0;
-    this._focusListener = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.makeStyleProps = () => {
-      const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
-      const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
-      return {
-        interaction: this.interaction,
-        invalid: this.invalid,
-        success: success,
-        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.handleFocus = event => {
-      if (typeof this.props.onFocus === 'function') {
-        this.props.onFocus(event);
-      }
-    };
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
   }
+  ref = null;
+  _input = null;
+  _defaultId;
+  _messagesId;
+  _focusListener = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
     }
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   componentWillUnmount() {
     if (this._focusListener) {
@@ -112,11 +94,9 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   renderInstUIIcon(elementToRender) {
-    var _type;
     if (!elementToRender) {
       return null;
     }
@@ -128,16 +108,25 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       large: 'lg'
     };
     const iconSize = linkSizeToIconSize[this.props.size || 'medium'];
-    if (/*#__PURE__*/(0, _react.isValidElement)(elementToRender) && ((_type = elementToRender.type) === null || _type === void 0 ? void 0 : _type.name) === 'WrappedIcon') {
+    if (/*#__PURE__*/(0, _react.isValidElement)(elementToRender) && elementToRender.type?.name === 'WrappedIcon') {
       return (0, _safeCloneElement.safeCloneElement)(rendered, {
         size: iconSize
       });
     }
     return rendered;
   }
+  makeStyleProps = () => {
+    const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
+    const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
+    return {
+      interaction: this.interaction,
+      invalid: this.invalid,
+      success: success,
+      beforeElementExists: !!beforeElement
+    };
+  };
   focus() {
-    var _this$_input;
-    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+    this._input?.focus();
   }
   get interaction() {
     return (0, _getInteraction.getInteraction)({
@@ -156,65 +145,88 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     return (0, _isActiveElement.isActiveElement)(this._input);
   }
   get value() {
-    var _this$_input2;
-    return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.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);
+    }
+  };
+  handleChange = event => {
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(event, event.target.value);
+    }
+  };
+  handleBlur = event => {
+    if (typeof this.props.onBlur === 'function') {
+      this.props.onBlur(event);
+    }
+  };
+  handleFocus = event => {
+    if (typeof this.props.onFocus === 'function') {
+      this.props.onFocus(event);
+    }
+  };
   renderInput() {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      type = _this$props3.type,
-      size = _this$props3.size,
-      htmlSize = _this$props3.htmlSize,
-      display = _this$props3.display,
-      textAlign = _this$props3.textAlign,
-      placeholder = _this$props3.placeholder,
-      value = _this$props3.value,
-      defaultValue = _this$props3.defaultValue,
-      isRequired = _this$props3.isRequired,
-      onFocus = _this$props3.onFocus,
-      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const {
+      type,
+      size,
+      htmlSize,
+      display,
+      textAlign,
+      placeholder,
+      value,
+      defaultValue,
+      isRequired,
+      onFocus,
+      ...rest
+    } = this.props;
     const props = (0, _passthroughProps.passthroughProps)(rest);
-    const interaction = this.interaction;
+    const {
+      interaction
+    } = this;
     let descriptionIds = '';
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
     return (0, _jsxRuntime.jsx)("input", {
       ...props,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
+      css: this.props.styles?.textInput,
       defaultValue: defaultValue,
       value: value,
-      placeholder: interaction === 'enabled' ? placeholder : void 0,
+      placeholder: interaction === 'enabled' ? placeholder : undefined,
       ref: this.handleInputRef,
       type: type,
       id: this.id,
       required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : void 0,
+      "aria-invalid": this.invalid ? 'true' : undefined,
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
+      "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur
     });
   }
   render() {
-    const _this$props4 = this.props,
-      width = _this$props4.width,
-      display = _this$props4.display,
-      renderLabel = _this$props4.renderLabel,
-      renderBeforeInput = _this$props4.renderBeforeInput,
-      renderAfterInput = _this$props4.renderAfterInput,
-      messages = _this$props4.messages,
-      inputContainerRef = _this$props4.inputContainerRef,
-      isRequired = _this$props4.isRequired,
-      styles = _this$props4.styles;
+    const {
+      width,
+      display,
+      renderLabel,
+      renderBeforeInput,
+      renderAfterInput,
+      messages,
+      inputContainerRef,
+      isRequired,
+      styles
+    } = this.props;
     const beforeElement = this.renderInstUIIcon(renderBeforeInput);
     const afterElement = this.renderInstUIIcon(renderAfterInput);
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== void 0 || renderAfterInput !== void 0;
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
     const label = (0, _callRenderProp.callRenderProp)(renderLabel);
     return (0, _jsxRuntime.jsx)(_latest.FormField, {
       id: this.id,
@@ -232,16 +244,16 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       readOnly: this.interaction === 'readonly',
       "data-cid": "TextInput",
       children: (0, _jsxRuntime.jsx)("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        css: styles?.facade,
         children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.layout,
+          css: styles?.layout,
           children: [beforeElement && (0, _jsxRuntime.jsx)("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
+            css: styles?.beforeElement,
             children: beforeElement
           }), (0, _jsxRuntime.jsxs)("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
+            css: styles?.inputLayout,
             children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
-              css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+              css: styles?.afterElement,
               children: afterElement
             })]
           })]
@@ -250,15 +262,5 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       })
     });
   }
-}, _TextInput.displayName = "TextInput", _TextInput.componentId = 'TextInput', _TextInput.allowedProps = _props.allowedProps, _TextInput.defaultProps = {
-  type: 'text',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  display: 'block',
-  shouldNotWrap: false,
-  size: 'medium',
-  textAlign: 'start',
-  messages: []
-}, _TextInput)) || _class) || _class);
+}) || _class) || _class);
 var _default = exports.default = TextInput;

package/lib/TextInput/v2/styles.js

@@ -41,13 +41,17 @@ var _emotion = require("@instructure/emotion");
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, sharedTokens, state) => {
-  const size = props.size,
-    textAlign = props.textAlign,
-    shouldNotWrap = props.shouldNotWrap;
-  const interaction = state.interaction,
-    success = state.success,
-    invalid = state.invalid,
-    beforeElementExists = state.beforeElementExists;
+  const {
+    size,
+    textAlign,
+    shouldNotWrap
+  } = props;
+  const {
+    interaction,
+    success,
+    invalid,
+    beforeElementExists
+  } = state;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.fontSizeSm,
@@ -155,7 +159,7 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
     })
   };
   const focusOutline = (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
-    focusColor: invalid ? 'danger' : success ? 'success' : void 0,
+    focusColor: invalid ? 'danger' : success ? 'success' : undefined,
     // Only display the focus outline when the input is focused.
     // This is to prevent double focus ring when e.g., a Button is rendered in
     // `renderBeforeInput`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.7.3-snapshot-7",
+  "version": "11.7.3-snapshot-26",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -18,21 +18,21 @@
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
-    "@instructure/ui-axe-check": "11.7.3-snapshot-7",
-    "@instructure/ui-badge": "11.7.3-snapshot-7",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-7"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-26",
+    "@instructure/ui-axe-check": "11.7.3-snapshot-26",
+    "@instructure/ui-badge": "11.7.3-snapshot-26",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-26"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.7.3-snapshot-7",
-    "@instructure/ui-a11y-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-form-field": "11.7.3-snapshot-7",
-    "@instructure/shared-types": "11.7.3-snapshot-7",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-tag": "11.7.3-snapshot-7",
-    "@instructure/ui-themes": "11.7.3-snapshot-7"
+    "@babel/runtime": "^7.29.2",
+    "@instructure/emotion": "11.7.3-snapshot-26",
+    "@instructure/shared-types": "11.7.3-snapshot-26",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-a11y-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-form-field": "11.7.3-snapshot-26",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-tag": "11.7.3-snapshot-26",
+    "@instructure/ui-themes": "11.7.3-snapshot-26"
   },
   "peerDependencies": {
     "react": ">=18 <=19"