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

package/es/TextInput/v2/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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)
  *
@@ -39,61 +37,45 @@ category: components
 tags: form, field, input
 ---
 **/
-let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends Component {
+let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _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.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 ? 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 = 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) {
@@ -101,11 +83,9 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
     }
   }
   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;
     }
@@ -117,16 +97,25 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       large: 'lg'
     };
     const iconSize = linkSizeToIconSize[this.props.size || 'medium'];
-    if (/*#__PURE__*/isValidElement(elementToRender) && ((_type = elementToRender.type) === null || _type === void 0 ? void 0 : _type.name) === 'WrappedIcon') {
+    if (/*#__PURE__*/isValidElement(elementToRender) && elementToRender.type?.name === 'WrappedIcon') {
       return safeCloneElement(rendered, {
         size: iconSize
       });
     }
     return rendered;
   }
+  makeStyleProps = () => {
+    const beforeElement = this.props.renderBeforeInput ? 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 getInteraction({
@@ -145,65 +134,88 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
     return 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 = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      type,
+      size,
+      htmlSize,
+      display,
+      textAlign,
+      placeholder,
+      value,
+      defaultValue,
+      isRequired,
+      onFocus,
+      ...rest
+    } = this.props;
     const props = passthroughProps(rest);
-    const interaction = this.interaction;
+    const {
+      interaction
+    } = this;
     let descriptionIds = '';
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
     return _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 = callRenderProp(renderLabel);
     return _jsx(FormField, {
       id: this.id,
@@ -221,16 +233,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       readOnly: this.interaction === 'readonly',
       "data-cid": "TextInput",
       children: _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        css: styles?.facade,
         children: renderBeforeOrAfter ? _jsxs("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.layout,
+          css: styles?.layout,
           children: [beforeElement && _jsx("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
+            css: styles?.beforeElement,
             children: beforeElement
           }), _jsxs("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
+            css: styles?.inputLayout,
             children: [this.renderInput(), afterElement && _jsx("span", {
-              css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+              css: styles?.afterElement,
               children: afterElement
             })]
           })]
@@ -239,16 +251,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle),
       })
     });
   }
-}, _TextInput.displayName = "TextInput", _TextInput.componentId = 'TextInput', _TextInput.allowedProps = 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);
 export default TextInput;
 export { TextInput };

package/es/TextInput/v2/styles.js

@@ -36,13 +36,17 @@ import { calcFocusOutlineStyles } from '@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,
@@ -150,7 +154,7 @@ const generateStyle = (componentTheme, props, sharedTokens, state) => {
     })
   };
   const focusOutline = 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`