@instructure/ui-text-input 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-text-input
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/es/TextInput/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired"];
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -37,6 +35,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
@@ -44,7 +43,6 @@ tags: form, field
 ---
 @tsProps
 **/
-
 let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TextInput extends Component {
   constructor(props) {
     super(props);
@@ -55,22 +53,19 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     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 interaction = this.interaction;
       const _this$state = this.state,
-            hasFocus = _this$state.hasFocus,
-            beforeElementHasWidth = _this$state.beforeElementHasWidth,
-            afterElementHasWidth = _this$state.afterElementHasWidth;
+        hasFocus = _this$state.hasFocus,
+        beforeElementHasWidth = _this$state.beforeElementHasWidth,
+        afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
@@ -79,41 +74,33 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         afterElementHasWidth
       };
     };
-
     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,
       beforeElementHasWidth: void 0,
@@ -122,10 +109,8 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     if (this._input) {
       this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
       this.setState({
@@ -133,31 +118,25 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
-
   componentWillUnmount() {
     if (this._focusListener) {
       this._focusListener.remove();
     }
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
       this.setState({
         beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
       });
     }
-
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
-
     if (getInteraction({
       props: prevProps
     }) !== 'disabled' && getInteraction({
@@ -167,73 +146,57 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         hasFocus: false
       });
     }
-
     (_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() {
     var _this$_input;
-
     (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _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';
     }) >= 0;
   }
-
   get focused() {
     return isActiveElement(this._input);
   }
-
   get value() {
     var _this$_input2;
-
     return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
   }
-
   get id() {
     return this.props.id || this._defaultId;
   }
-
   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,
-          rest = _objectWithoutProperties(_this$props3, _excluded);
-
+      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,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
     const props = passthroughProps(rest);
     const interaction = this.interaction;
     let descriptionIds = '';
-
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
-
     if (this.hasMessages) {
       descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
     }
-
     return jsx("input", Object.assign({}, props, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
       defaultValue: defaultValue,
@@ -252,30 +215,27 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       onBlur: this.handleBlur
     }));
   }
-
   getElementHasWidth(element) {
     if (!element) {
       return void 0;
     }
-
     const computedStyle = getComputedStyle(element);
     const width = computedStyle.width,
-          paddingInlineStart = computedStyle.paddingInlineStart,
-          paddingInlineEnd = computedStyle.paddingInlineEnd;
+      paddingInlineStart = computedStyle.paddingInlineStart,
+      paddingInlineEnd = computedStyle.paddingInlineEnd;
     const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
     return elementWidth > 0;
   }
-
   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,
-          styles = _this$props4.styles;
+      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,
+      styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
     const renderBeforeOrAfter = !!beforeElement || !!afterElement;
@@ -309,11 +269,9 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       ref: e => {
         this._afterElement = e;
       }
-    }, afterElement))))) :
-    /* If no prepended or appended content, don't render Flex layout */
+    }, afterElement))))) : /* If no prepended or appended content, don't render Flex layout */
     this.renderInput()));
   }
-
 }, _class2.displayName = "TextInput", _class2.componentId = 'TextInput', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   type: 'text',
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied

package/es/TextInput/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '@instructure/ui-form-field';
 import { controllable } from '@instructure/ui-prop-types';

package/es/TextInput/styles.js

@@ -34,13 +34,13 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        textAlign = props.textAlign,
-        shouldNotWrap = props.shouldNotWrap;
+    textAlign = props.textAlign,
+    shouldNotWrap = props.shouldNotWrap;
   const disabled = state.disabled,
-        invalid = state.invalid,
-        focused = state.focused,
-        beforeElementHasWidth = state.beforeElementHasWidth,
-        afterElementHasWidth = state.afterElementHasWidth;
+    invalid = state.invalid,
+    focused = state.focused,
+    beforeElementHasWidth = state.beforeElementHasWidth,
+    afterElementHasWidth = state.afterElementHasWidth;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,
@@ -115,13 +115,15 @@ const generateStyle = (componentTheme, props, state) => {
     overflow: 'visible',
     unicodeBidi: 'isolate'
   };
-  const flexBase = { ...viewBase,
+  const flexBase = {
+    ...viewBase,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
     flexDirection: 'row'
   };
-  const flexItemBase = { ...viewBase,
+  const flexItemBase = {
+    ...viewBase,
     flexShrink: 0
   };
   return {
@@ -200,5 +202,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/TextInput/theme.js

@@ -29,11 +29,11 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        borders = theme.borders,
-        spacing = theme.spacing,
-        forms = theme.forms,
-        themeName = theme.key;
+    typography = theme.typography,
+    borders = theme.borders,
+    spacing = theme.spacing,
+    forms = theme.forms,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -63,9 +63,9 @@ const generateComponentTheme = theme => {
     largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
     largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/lib/TextInput/index.js

@@ -1,46 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextInput = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
-
 var _FormField = require("@instructure/ui-form-field/lib/FormField");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired"];
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 category: components
@@ -58,22 +39,19 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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 interaction = this.interaction;
       const _this$state = this.state,
-            hasFocus = _this$state.hasFocus,
-            beforeElementHasWidth = _this$state.beforeElementHasWidth,
-            afterElementHasWidth = _this$state.afterElementHasWidth;
+        hasFocus = _this$state.hasFocus,
+        beforeElementHasWidth = _this$state.beforeElementHasWidth,
+        afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
@@ -82,41 +60,33 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         afterElementHasWidth
       };
     };
-
     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,
       beforeElementHasWidth: void 0,
@@ -125,10 +95,8 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
       this.setState({
@@ -136,31 +104,25 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
-
   componentWillUnmount() {
     if (this._focusListener) {
       this._focusListener.remove();
     }
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
       this.setState({
         beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
       });
     }
-
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
-
     if ((0, _getInteraction.getInteraction)({
       props: prevProps
     }) !== 'disabled' && (0, _getInteraction.getInteraction)({
@@ -170,72 +132,57 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         hasFocus: false
       });
     }
-
     (_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() {
     var _this$_input;
-
     (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
   }
-
   get interaction() {
     return (0, _getInteraction.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';
     }) >= 0;
   }
-
   get focused() {
     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;
   }
-
   get id() {
     return this.props.id || this._defaultId;
   }
-
   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,
-          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      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,
+      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const props = (0, _passthroughProps.passthroughProps)(rest);
     const interaction = this.interaction;
     let descriptionIds = '';
-
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
-
     if (this.hasMessages) {
       descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
     }
-
     return (0, _emotion.jsx)("input", Object.assign({}, props, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
       defaultValue: defaultValue,
@@ -254,30 +201,27 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       onBlur: this.handleBlur
     }));
   }
-
   getElementHasWidth(element) {
     if (!element) {
       return void 0;
     }
-
     const computedStyle = getComputedStyle(element);
     const width = computedStyle.width,
-          paddingInlineStart = computedStyle.paddingInlineStart,
-          paddingInlineEnd = computedStyle.paddingInlineEnd;
+      paddingInlineStart = computedStyle.paddingInlineStart,
+      paddingInlineEnd = computedStyle.paddingInlineEnd;
     const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
     return elementWidth > 0;
   }
-
   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,
-          styles = _this$props4.styles;
+      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,
+      styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
     const renderBeforeOrAfter = !!beforeElement || !!afterElement;
@@ -311,11 +255,9 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       ref: e => {
         this._afterElement = e;
       }
-    }, afterElement))))) :
-    /* If no prepended or appended content, don't render Flex layout */
+    }, afterElement))))) : /* If no prepended or appended content, don't render Flex layout */
     this.renderInput()));
   }
-
 }, _class2.displayName = "TextInput", _class2.componentId = 'TextInput', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   type: 'text',
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied

package/lib/TextInput/props.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-
 var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,6 +31,7 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   type: _propTypes.default.oneOf(['text', 'email', 'url', 'tel', 'search', 'password']),