@instructure/ui-text-input 8.13.0 → 8.13.1-snapshot.10

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 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.

package/es/TextInput/index.js

@@ -28,7 +28,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { callRenderProp, getInteraction, passthroughProps } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { FormField } from '@instructure/ui-form-field';
@@ -43,12 +43,16 @@ import { allowedProps, propTypes } from './props';
 category: components
 tags: form, field
 ---
+@tsProps
 **/
 
 let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TextInput extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
+    this._input = null;
+    this._defaultId = void 0;
+    this._messagesId = void 0;
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -70,22 +74,33 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
 
     this.handleInputRef = node => {
       this._input = node;
-      this.props.inputRef(node);
+
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(node);
+      }
     };
 
     this.handleChange = event => {
-      this.props.onChange(event, event.target.value);
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(event, event.target.value);
+      }
     };
 
     this.handleBlur = event => {
-      this.props.onBlur(event);
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
+
       this.setState({
         hasFocus: false
       });
     };
 
     this.handleFocus = event => {
-      this.props.onFocus(event);
+      if (typeof this.props.onFocus === 'function') {
+        this.props.onFocus(event);
+      }
+
       this.setState({
         hasFocus: true
       });
@@ -104,14 +119,16 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  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());
   }
 
   focus() {
-    this._input.focus();
+    var _this$_input;
+
+    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
   }
 
   get interaction() {
@@ -121,7 +138,7 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages && this.props.messages.length > 0;
   }
 
   get invalid() {
@@ -135,7 +152,9 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   get value() {
-    return this._input.value;
+    var _this$_input2;
+
+    return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
   }
 
   get id() {
@@ -178,10 +197,10 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       type: type,
       id: this.id,
       required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : null,
+      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur,
@@ -210,8 +229,7 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       inline: display === 'inline-block',
       width: width,
       inputContainerRef: inputContainerRef,
-      layout: this.props.layout // eslint-disable-line react/prop-types
-      ,
+      layout: this.props.layout,
       elementRef: this.handleRef
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
@@ -241,12 +259,7 @@ let TextInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   shouldNotWrap: false,
   size: 'medium',
   textAlign: 'start',
-  messages: [],
-  inputRef: function (input) {},
-  inputContainerRef: function (container) {},
-  onChange: function (event, value) {},
-  onBlur: function (event) {},
-  onFocus: function (event) {}
+  messages: []
 }, _temp)) || _class) || _class);
 export default TextInput;
 export { TextInput };

package/es/TextInput/props.js

@@ -25,131 +25,28 @@ import PropTypes from 'prop-types';
 import { FormPropTypes } from '@instructure/ui-form-field';
 import { controllable } from '@instructure/ui-prop-types';
 const propTypes = {
-  /**
-   * The form field label.
-   */
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Determines the underlying native HTML `<input>` element's `type`.
-   * For more see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
-   */
   type: PropTypes.oneOf(['text', 'email', 'url', 'tel', 'search', 'password']),
-
-  /**
-   * The id of the text input. One is generated if not supplied.
-   */
   id: PropTypes.string,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: controllable(PropTypes.string),
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: PropTypes.string,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
-   */
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * The size of the text input.
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * The text alignment of the input.
-   */
   textAlign: PropTypes.oneOf(['start', 'center']),
-
-  /**
-   * The width of the input.
-   */
   width: PropTypes.string,
-
-  /**
-   * The width of the input, in characters, if a width is not explicitly
-   * provided via the `width` prop. Only applicable if `isInline={true}`.
-   */
-  htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The display of the root element.
-   */
+  htmlSize: PropTypes.number,
   display: PropTypes.oneOf(['inline-block', 'block']),
-
-  /**
-   * Prevents the default behavior of wrapping the input and rendered content
-   * when available space is exceeded.
-   */
   shouldNotWrap: PropTypes.bool,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should be hint text, not a label
-   * replacement.
-   */
   placeholder: PropTypes.string,
-
-  /**
-   * Whether or not the text input is required.
-   */
   isRequired: PropTypes.bool,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * a function that provides a reference to the actual input element
-   */
   inputRef: PropTypes.func,
-
-  /**
-   * a function that provides a reference a parent of the input element
-   */
   inputContainerRef: PropTypes.func,
-
-  /**
-   * Content to display before the input text, such as an icon
-   */
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display after the input text, such as an icon
-   */
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Callback executed when the input fires a change event.
-   * @param {Object} event - the event object
-   * @param {Object} value - the string value of the input
-   */
   onChange: PropTypes.func,
-
-  /**
-   * Callback fired when input loses focus.
-   */
   onBlur: PropTypes.func,
-
-  /**
-   * Callback fired when input receives focus.
-   */
   onFocus: PropTypes.func
 };
 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'];

package/lib/TextInput/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = exports.TextInput = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 
@@ -42,11 +44,15 @@ var _dec, _dec2, _class, _class2, _temp;
 category: components
 tags: form, field
 ---
+@tsProps
 **/
 let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TextInput extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
+    this._input = null;
+    this._defaultId = void 0;
+    this._messagesId = void 0;
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -68,22 +74,33 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
 
     this.handleInputRef = node => {
       this._input = node;
-      this.props.inputRef(node);
+
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(node);
+      }
     };
 
     this.handleChange = event => {
-      this.props.onChange(event, event.target.value);
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(event, event.target.value);
+      }
     };
 
     this.handleBlur = event => {
-      this.props.onBlur(event);
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
+
       this.setState({
         hasFocus: false
       });
     };
 
     this.handleFocus = event => {
-      this.props.onFocus(event);
+      if (typeof this.props.onFocus === 'function') {
+        this.props.onFocus(event);
+      }
+
       this.setState({
         hasFocus: true
       });
@@ -102,14 +119,16 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  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());
   }
 
   focus() {
-    this._input.focus();
+    var _this$_input;
+
+    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
   }
 
   get interaction() {
@@ -119,7 +138,7 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages && this.props.messages.length > 0;
   }
 
   get invalid() {
@@ -133,7 +152,9 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   get value() {
-    return this._input.value;
+    var _this$_input2;
+
+    return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
   }
 
   get id() {
@@ -175,10 +196,10 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       type: type,
       id: this.id,
       required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : null,
+      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur,
@@ -207,8 +228,7 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       inline: display === 'inline-block',
       width: width,
       inputContainerRef: inputContainerRef,
-      layout: this.props.layout // eslint-disable-line react/prop-types
-      ,
+      layout: this.props.layout,
       elementRef: this.handleRef
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
@@ -238,12 +258,7 @@ let TextInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   shouldNotWrap: false,
   size: 'medium',
   textAlign: 'start',
-  messages: [],
-  inputRef: function (input) {},
-  inputContainerRef: function (container) {},
-  onChange: function (event, value) {},
-  onBlur: function (event) {},
-  onFocus: function (event) {}
+  messages: []
 }, _temp)) || _class) || _class);
 exports.TextInput = TextInput;
 var _default = TextInput;

package/lib/TextInput/props.js

@@ -37,131 +37,28 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The form field label.
-   */
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Determines the underlying native HTML `<input>` element's `type`.
-   * For more see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
-   */
   type: _propTypes.default.oneOf(['text', 'email', 'url', 'tel', 'search', 'password']),
-
-  /**
-   * The id of the text input. One is generated if not supplied.
-   */
   id: _propTypes.default.string,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: (0, _controllable.controllable)(_propTypes.default.string),
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: _propTypes.default.string,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
-   */
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * The size of the text input.
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * The text alignment of the input.
-   */
   textAlign: _propTypes.default.oneOf(['start', 'center']),
-
-  /**
-   * The width of the input.
-   */
   width: _propTypes.default.string,
-
-  /**
-   * The width of the input, in characters, if a width is not explicitly
-   * provided via the `width` prop. Only applicable if `isInline={true}`.
-   */
-  htmlSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * The display of the root element.
-   */
+  htmlSize: _propTypes.default.number,
   display: _propTypes.default.oneOf(['inline-block', 'block']),
-
-  /**
-   * Prevents the default behavior of wrapping the input and rendered content
-   * when available space is exceeded.
-   */
   shouldNotWrap: _propTypes.default.bool,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should be hint text, not a label
-   * replacement.
-   */
   placeholder: _propTypes.default.string,
-
-  /**
-   * Whether or not the text input is required.
-   */
   isRequired: _propTypes.default.bool,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * a function that provides a reference to the actual input element
-   */
   inputRef: _propTypes.default.func,
-
-  /**
-   * a function that provides a reference a parent of the input element
-   */
   inputContainerRef: _propTypes.default.func,
-
-  /**
-   * Content to display before the input text, such as an icon
-   */
   renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Content to display after the input text, such as an icon
-   */
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Callback executed when the input fires a change event.
-   * @param {Object} event - the event object
-   * @param {Object} value - the string value of the input
-   */
   onChange: _propTypes.default.func,
-
-  /**
-   * Callback fired when input loses focus.
-   */
   onBlur: _propTypes.default.func,
-
-  /**
-   * Callback fired when input receives focus.
-   */
   onFocus: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "8.13.0",
+  "version": "8.13.1-snapshot.10+0ceb70745",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,25 +24,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.0",
-    "@instructure/ui-badge": "8.13.0",
-    "@instructure/ui-color-utils": "8.13.0",
-    "@instructure/ui-test-utils": "8.13.0",
-    "@instructure/ui-themes": "8.13.0"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-badge": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-themes": "8.13.1-snapshot.10+0ceb70745"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.0",
-    "@instructure/shared-types": "8.13.0",
-    "@instructure/ui-dom-utils": "8.13.0",
-    "@instructure/ui-form-field": "8.13.0",
-    "@instructure/ui-icons": "8.13.0",
-    "@instructure/ui-prop-types": "8.13.0",
-    "@instructure/ui-react-utils": "8.13.0",
-    "@instructure/ui-tag": "8.13.0",
-    "@instructure/ui-testable": "8.13.0",
-    "@instructure/ui-utils": "8.13.0",
-    "@instructure/uid": "8.13.0",
+    "@instructure/emotion": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/shared-types": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-dom-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-form-field": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-icons": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-prop-types": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-tag": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-testable": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/uid": "8.13.1-snapshot.10+0ceb70745",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -51,5 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "0ceb7074574b9c3a7249eecab3d1ac0e7175a5dd"
 }