@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.8

package/TextField/components/FormElement/style.js

@@ -1,6 +1,34 @@
-import{css}from'glamor';/**
+import { css } from 'glamor';
+
+/**
  * The styles for the input field.
- */var input=css({position:'relative',padding:0,width:'100%',marginTop:24,outline:0,fontSize:16,lineHeight:'19px'}).toString();/**
+ */
+const input = css({
+  position: 'relative',
+  padding: 0,
+  width: '100%',
+  marginTop: 24,
+  outline: 0,
+  fontSize: 16,
+  lineHeight: '19px'
+}).toString();
+
+/**
  * The styles for the multiLine.
- */var multiLine=css({position:'relative',marginTop:24,marginBottom:3,padding:0,width:'100%',outline:0,height:19,minHeight:19,lineHeight:'19px',verticalAlign:'top'// Important to avoid bottom whitespace.
-}).toString();export default{input:input,multiLine:multiLine};
+ */
+const multiLine = css({
+  position: 'relative',
+  marginTop: 24,
+  marginBottom: 3,
+  padding: 0,
+  width: '100%',
+  outline: 0,
+  height: 19,
+  minHeight: 19,
+  lineHeight: '19px',
+  verticalAlign: 'top' // Important to avoid bottom whitespace.
+}).toString();
+export default {
+  input,
+  multiLine
+};

package/TextField/components/Hint/index.js

@@ -1,6 +1,25 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * The form element hint component.
  * @param {string} hintText The hint text.
  * @param {boolean} visible Sets the hint visibility.
  * @return {JSX}
- */var Hint=function Hint(_ref){var hintText=_ref.hintText,visible=_ref.visible;return React.createElement("div",{className:classNames(styles.hintStyles(visible),'hint')},React.createElement(I18n.Text,{string:hintText}));};Hint.defaultProps={hintText:'',visible:false};export default Hint;
+ */
+const Hint = ({
+  hintText,
+  visible
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.hintStyles(visible), 'hint')
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  string: hintText
+}));
+Hint.defaultProps = {
+  hintText: '',
+  visible: false
+};
+export default Hint;

package/TextField/components/Hint/style.js

@@ -1,11 +1,46 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * The style object for a one line text element with an ellipsis on overflow.
- */var ellipsisLine={overflow:'hidden',width:'100%',whiteSpace:'nowrap',textOverflow:'ellipsis'};var easing='450ms cubic-bezier(0.23, 1, 0.32, 1)';/**
+ */
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+
+/**
  * The styles for the hint text.
- */var hint=css(_extends({position:'absolute',pointerEvents:'none',bottom:12,color:themeConfig.colors.shade4,willChange:'transform',transition:"opacity ".concat(easing)},ellipsisLine)).toString();/**
+ */
+const hint = css({
+  position: 'absolute',
+  pointerEvents: 'none',
+  bottom: 12,
+  color: themeConfig.colors.shade4,
+  willChange: 'transform',
+  transition: `opacity ${easing}`,
+  ...ellipsisLine
+}).toString();
+
+/**
  * The styles for the invisible hint text.
- */var hintInactive=css({opacity:0}).toString();/**
+ */
+const hintInactive = css({
+  opacity: 0
+}).toString();
+
+/**
  * Gets the style classes for the underline element.
  * @param {boolean} visible Whether the hint is visible.
  * @return {string} The style classes.
- */var hintStyles=function hintStyles(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;return classNames(hint,_defineProperty({},hintInactive,!visible));};export default{hintStyles:hintStyles};
+ */
+const hintStyles = (visible = false) => classNames(hint, {
+  [hintInactive]: !visible
+});
+export default {
+  hintStyles
+};

package/TextField/components/Label/index.js

@@ -1,6 +1,35 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * Renders the label element.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Label=function Label(props){var labelStyles=styles.labelStyles(props.isFocused,props.isFloating,props.hasErrorMessage);return(// eslint-disable-next-line jsx-a11y/label-has-associated-control
-React.createElement("label",{htmlFor:props.name,"aria-hidden":true,className:classNames(labelStyles,'label',{floating:props.isFloating})},React.createElement(I18n.Text,{string:props.label})));};Label.defaultProps={name:'',label:'',isFocused:false,isFloating:false,hasErrorMessage:false};export default Label;
+ */
+const Label = props => {
+  const labelStyles = styles.labelStyles(props.isFocused, props.isFloating, props.hasErrorMessage);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    React.createElement("label", {
+      htmlFor: props.name,
+      "aria-hidden": true,
+      className: classNames(labelStyles, 'label', {
+        floating: props.isFloating
+      })
+    }, /*#__PURE__*/React.createElement(I18n.Text, {
+      string: props.label
+    }))
+  );
+};
+Label.defaultProps = {
+  name: '',
+  label: '',
+  isFocused: false,
+  isFloating: false,
+  hasErrorMessage: false
+};
+export default Label;

package/TextField/components/Label/style.js

@@ -1,20 +1,80 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * The style object for a one line text element with an ellipsis on overflow.
- */var ellipsisLine={overflow:'hidden',width:'100%',whiteSpace:'nowrap',textOverflow:'ellipsis'};var colors=themeConfig.colors;var easing='450ms cubic-bezier(0.23, 1, 0.32, 1)';/**
+ */
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const {
+  colors
+} = themeConfig;
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+
+/**
  * The styles for the error label.
- */var labelError=css({color:"var(--color-state-alert, ".concat(colors.error,")")}).toString();/**
+ */
+const labelError = css({
+  color: `var(--color-state-alert, ${colors.error})`
+}).toString();
+
+/**
  * The styles for the regular label.
- */var labelRegular=css({color:colors.shade4}).toString();/**
+ */
+const labelRegular = css({
+  color: colors.shade4
+}).toString();
+
+/**
  * The styles for the focused label.
- */var labelFocus=css({color:colors.focus}).toString();/**
+ */
+const labelFocus = css({
+  color: colors.focus
+}).toString();
+
+/**
  * The styles for the floating label.
- */var labelFloating=css({transform:'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'}).toString();/**
+ */
+const labelFloating = css({
+  transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'
+}).toString();
+
+/**
  * The basic styles for the label.
  * @type {string}
- */var label=css(_extends({position:'absolute',left:0,top:24,lineHeight:'19px',pointerEvents:'none',userSelect:'none',color:"var(--color-text-medium-emphasis, ".concat(colors.shade6,")"),transformOrigin:'left top 0px',willChange:'transform, color',transition:"transform ".concat(easing,", color ").concat(easing)},ellipsisLine)).toString();/**
+ */
+const label = css({
+  position: 'absolute',
+  left: 0,
+  top: 24,
+  lineHeight: '19px',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  color: `var(--color-text-medium-emphasis, ${colors.shade6})`,
+  transformOrigin: 'left top 0px',
+  willChange: 'transform, color',
+  transition: `transform ${easing}, color ${easing}`,
+  ...ellipsisLine
+}).toString();
+
+/**
  * Gets the style classes for the label.
  * @param {boolean} focused Whether the input field is focused.
  * @param {boolean} floating Whether the label is floating.
  * @param {boolean} error Whether the input field shows an error message.
  * @return {string} The style classes.
- */var labelStyles=function labelStyles(){var focused=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var floating=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var error=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;return classNames(label,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},labelFloating,floating),labelRegular,!focused),labelFocus,!error&&focused),labelError,error&&focused));};export default{labelStyles:labelStyles};
+ */
+const labelStyles = (focused = false, floating = false, error = false) => classNames(label, {
+  [labelFloating]: floating,
+  [labelRegular]: !focused,
+  [labelFocus]: !error && focused,
+  [labelError]: error && focused
+});
+export default {
+  labelStyles
+};

package/TextField/components/Underline/index.js

@@ -1,5 +1,22 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  *  Renders the label element.
  * @param {Object} props  The component props.
  * @return {JSX}
- */var Underline=function Underline(props){return React.createElement("div",{className:classNames(styles.underlineWrapper,'underline'),"aria-hidden":true},React.createElement("div",{className:styles.underline,style:styles.underlineStyle(props.isFocused,props.hasErrorMessage)}));};Underline.defaultProps={isFocused:false,hasErrorMessage:false};export default Underline;
+ */
+const Underline = props => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.underlineWrapper, 'underline'),
+  "aria-hidden": true
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.underline,
+  style: styles.underlineStyle(props.isFocused, props.hasErrorMessage)
+}));
+Underline.defaultProps = {
+  isFocused: false,
+  hasErrorMessage: false
+};
+export default Underline;

package/TextField/components/Underline/style.js

@@ -1,13 +1,60 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import color from'color';import{getCSSCustomProp}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var easing='450ms cubic-bezier(0.23, 1, 0.32, 1)';/**
+import { css } from 'glamor';
+import color from 'color';
+import { getCSSCustomProp } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+
+/**
  * The styles for the underline wrapper element.
- */var underlineWrapper=css({position:'relative',width:'100%',borderBottom:"1px solid ".concat(colors.shade12),marginTop:2,marginBottom:7}).toString();/**
+ */
+const underlineWrapper = css({
+  position: 'relative',
+  width: '100%',
+  borderBottom: `1px solid ${colors.shade12}`,
+  marginTop: 2,
+  marginBottom: 7
+}).toString();
+
+/**
  * The styles for the underline element.
  * @param {boolean} focused Whether the input field is focused.
  * @param {boolean} error Whether the input field shows an error message.
  * @return {string} The style class.
- */var underline=css({position:'relative',width:'100%',top:1,borderBottomWidth:2,borderBottomStyle:'solid',willChange:'transform',transition:"transform ".concat(easing)}).toString();/**
+ */
+const underline = css({
+  position: 'relative',
+  width: '100%',
+  top: 1,
+  borderBottomWidth: 2,
+  borderBottomStyle: 'solid',
+  willChange: 'transform',
+  transition: `transform ${easing}`
+}).toString();
+
+/**
  * Returns the underline style.
  * @param {boolean} focused Is focused set or not.
  * @param {boolean} hasError Has error set or not.
  * @return {Object} style
- */var underlineStyle=function underlineStyle(focused,hasError){var primaryColor=getCSSCustomProp('--color-primary')||colors.primary;var focusColor='--color-primary';if(color(primaryColor).luminosity()>=0.8){focusColor='--color-secondary';}return _extends({borderBottomColor:hasError?"var(--color-state-alert, ".concat(colors.error,")"):"var(".concat(focusColor,", ").concat(colors.focus,")")},!focused&&!hasError&&{transform:'scale3d(0,1,1)'});};export default{underline:underline,underlineWrapper:underlineWrapper,underlineStyle:underlineStyle};
+ */
+const underlineStyle = (focused, hasError) => {
+  const primaryColor = getCSSCustomProp('--color-primary') || colors.primary;
+  let focusColor = '--color-primary';
+  if (color(primaryColor).luminosity() >= 0.8) {
+    focusColor = '--color-secondary';
+  }
+  return {
+    borderBottomColor: hasError ? `var(--color-state-alert, ${colors.error})` : `var(${focusColor}, ${colors.focus})`,
+    ...(!focused && !hasError && {
+      transform: 'scale3d(0,1,1)'
+    })
+  };
+};
+export default {
+  underline,
+  underlineWrapper,
+  underlineStyle
+};

package/TextField/index.js

@@ -1,36 +1,198 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Label from"./components/Label";import Underline from"./components/Underline";import ErrorText from"./components/ErrorText";import Hint from"./components/Hint";import styles from"./style";import FormElement from"./components/FormElement/index";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Label from "./components/Label";
+import Underline from "./components/Underline";
+import ErrorText from "./components/ErrorText";
+import Hint from "./components/Hint";
+import styles from "./style";
+import FormElement from "./components/FormElement/index";
+
+/**
  * A component that provides a styled text field for user input in material design.
- */var TextField=/*#__PURE__*/function(_Component){/**
+ */
+class TextField extends Component {
+  /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
-   */function TextField(props){var _this2;_classCallCheck(this,TextField);_this2=_callSuper(this,TextField,[props]);/**
-   * Internal focus event handler.
-   * @param {boolean} isFocused Whether the input component is focused.
-   */_defineProperty(_this2,"handleFocusChange",function(isFocused){_this2.setState({isFocused:isFocused});_this2.props.onFocusChange(isFocused);});/**
-   * Updates the state if the input value has been changed.
-   * @param {string} value The entered text.
-   * @param {Object} event The original event object.
-   */_defineProperty(_this2,"handleChange",function(value,event){_this2.props.onChange(value,event);});/**
-   * Updates the validation error text if required.
-   * @param {string} value The entered text.
-   * @param {boolean} isInitial Whether this is the initial value of the input field.
-   * @return {boolean} Whether the validation was successful.
-   */_defineProperty(_this2,"handleValidate",function(value,isInitial){var validationError=_this2.props.onValidate(value);if(validationError!==true&&validationError){/**
-       * An error message was returned by the validation callback. Update the state.
-       * Because the validation is performed when the component is constructed, we need to make
-       * sure we're not calling setState() in this situation.
-       */if(!isInitial){_this2.setState({validationError:validationError});}else{_this2.state.validationError=validationError;}}else if(_this2.state.validationError){// There was no error, clear the state variable.
-_this2.setState({validationError:null});}// Forward the boolean result to the input field.
-return validationError===true;});_this2.state={isFocused:false,validationError:null};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Internal focus event handler.
+     * @param {boolean} isFocused Whether the input component is focused.
+     */
+    this.handleFocusChange = isFocused => {
+      this.setState({
+        isFocused
+      });
+      this.props.onFocusChange(isFocused);
+    };
+    /**
+     * Updates the state if the input value has been changed.
+     * @param {string} value The entered text.
+     * @param {Object} event The original event object.
+     */
+    this.handleChange = (value, event) => {
+      this.props.onChange(value, event);
+    };
+    /**
+     * Updates the validation error text if required.
+     * @param {string} value The entered text.
+     * @param {boolean} isInitial Whether this is the initial value of the input field.
+     * @return {boolean} Whether the validation was successful.
+     */
+    this.handleValidate = (value, isInitial) => {
+      const validationError = this.props.onValidate(value);
+      if (validationError !== true && validationError) {
+        /**
+         * An error message was returned by the validation callback. Update the state.
+         * Because the validation is performed when the component is constructed, we need to make
+         * sure we're not calling setState() in this situation.
+         */
+        if (!isInitial) {
+          this.setState({
+            validationError
+          });
+        } else {
+          this.state.validationError = validationError;
+        }
+      } else if (this.state.validationError) {
+        // There was no error, clear the state variable.
+        this.setState({
+          validationError: null
+        });
+      }
+
+      // Forward the boolean result to the input field.
+      return validationError === true;
+    };
+    this.state = {
+      isFocused: false,
+      validationError: null
+    };
+  }
+
+  /**
    * @returns {boolean} Whether the text field is currently focused.
-   */_inherits(TextField,_Component);return _createClass(TextField,[{key:"isFocused",get:function get(){return this.state.isFocused;}/**
+   */
+  get isFocused() {
+    return this.state.isFocused;
+  }
+
+  /**
    * @returns {boolean} Whether the label is currently floating.
-   */},{key:"isLabelFloating",get:function get(){// On Firefox empty date inputs always show a placeholder with date pattern
-if(navigator.userAgent.includes('Firefox')&&this.props.type==='date'){return true;}return this.isFocused||!!this.props.value;}/**
+   */
+  get isLabelFloating() {
+    // On Firefox empty date inputs always show a placeholder with date pattern
+    if (navigator.userAgent.includes('Firefox') && this.props.type === 'date') {
+      return true;
+    }
+    return this.isFocused || !!this.props.value;
+  }
+
+  /**
    * @returns {boolean} Whether the hint text is currently visible.
-   */},{key:"isHintVisible",get:function get(){return this.isFocused&&!this.props.value;}/**
+   */
+  get isHintVisible() {
+    return this.isFocused && !this.props.value;
+  }
+
+  /**
    * @return {boolean} Whether the error message is set.
-   */},{key:"hasErrorMessage",get:function get(){return!!(this.state.validationError||this.props.errorText);}},{key:"render",value:/**
+   */
+  get hasErrorMessage() {
+    return !!(this.state.validationError || this.props.errorText);
+  }
+  /**
    * Renders the text field.
    * @return {JSX.Element}
-   */function render(){var styleType=this.props.multiLine?'multiLine':'input';var style=styles.container[styleType];var _this$props=this.props,multiLine=_this$props.multiLine,className=_this$props.className,disabled=_this$props.disabled,hintText=_this$props.hintText,name=_this$props.name,label=_this$props.label,setRef=_this$props.setRef,onSanitize=_this$props.onSanitize,password=_this$props.password,type=_this$props.type,value=_this$props.value,isControlled=_this$props.isControlled,inputComponent=_this$props.inputComponent,showErrorText=_this$props.showErrorText,errorText=_this$props.errorText,translateErrorText=_this$props.translateErrorText,required=_this$props.required;return React.createElement("div",{className:classNames(style,className,'textField','ui-shared__text-field',{disabled:disabled})},React.createElement(Hint,{visible:this.isHintVisible,hintText:hintText}),React.createElement(Label,{name:name,label:label,isFocused:this.isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),React.createElement(FormElement,{id:name,multiLine:multiLine,name:name,setRef:setRef,onFocusChange:this.handleFocusChange,onChange:this.handleChange,onSanitize:onSanitize,onValidate:this.handleValidate,password:password,type:type,value:value,isControlled:isControlled,inputComponent:inputComponent,disabled:disabled,required:required,attributes:{'aria-invalid':!!errorText,'aria-describedby':this.hasErrorMessage?"ariaError-".concat(name):null}}),React.createElement(Underline,{isFocused:this.isFocused,hasErrorMessage:this.hasErrorMessage}),showErrorText&&React.createElement(ErrorText,{validationError:this.state.validationError,errorText:errorText,translate:translateErrorText,elementName:name}));}}]);}(Component);_defineProperty(TextField,"defaultProps",{className:'',errorText:'',showErrorText:true,setRef:function setRef(){},hintText:'',isControlled:false,label:'',multiLine:false,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},required:false,password:false,translateErrorText:true,type:'text',value:'',inputComponent:'input',disabled:false});export default TextField;
+   */
+  render() {
+    const styleType = this.props.multiLine ? 'multiLine' : 'input';
+    const style = styles.container[styleType];
+    const {
+      multiLine,
+      className,
+      disabled,
+      hintText,
+      name,
+      label,
+      setRef,
+      onSanitize,
+      password,
+      type,
+      value,
+      isControlled,
+      inputComponent,
+      showErrorText,
+      errorText,
+      translateErrorText,
+      required
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(style, className, 'textField', 'ui-shared__text-field', {
+        disabled
+      })
+    }, /*#__PURE__*/React.createElement(Hint, {
+      visible: this.isHintVisible,
+      hintText: hintText
+    }), /*#__PURE__*/React.createElement(Label, {
+      name: name,
+      label: label,
+      isFocused: this.isFocused,
+      isFloating: this.isLabelFloating,
+      hasErrorMessage: this.hasErrorMessage
+    }), /*#__PURE__*/React.createElement(FormElement, {
+      id: name,
+      multiLine: multiLine,
+      name: name,
+      setRef: setRef,
+      onFocusChange: this.handleFocusChange,
+      onChange: this.handleChange,
+      onSanitize: onSanitize,
+      onValidate: this.handleValidate,
+      password: password,
+      type: type,
+      value: value,
+      isControlled: isControlled,
+      inputComponent: inputComponent,
+      disabled: disabled,
+      required: required,
+      attributes: {
+        'aria-invalid': !!errorText,
+        'aria-describedby': this.hasErrorMessage ? `ariaError-${name}` : null
+      }
+    }), /*#__PURE__*/React.createElement(Underline, {
+      isFocused: this.isFocused,
+      hasErrorMessage: this.hasErrorMessage
+    }), showErrorText && /*#__PURE__*/React.createElement(ErrorText, {
+      validationError: this.state.validationError,
+      errorText: errorText,
+      translate: translateErrorText,
+      elementName: name
+    }));
+  }
+}
+TextField.defaultProps = {
+  className: '',
+  errorText: '',
+  showErrorText: true,
+  setRef: () => {},
+  hintText: '',
+  isControlled: false,
+  label: '',
+  multiLine: false,
+  onChange: () => {},
+  onFocusChange: () => {},
+  onSanitize: value => value,
+  onValidate: () => true,
+  required: false,
+  password: false,
+  translateErrorText: true,
+  type: 'text',
+  value: '',
+  inputComponent: 'input',
+  disabled: false
+};
+export default TextField;