@telefonica/mistica 10.14.0 → 10.16.0

package/dist-es/text-field-base.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { createUseStyles } from './jss';
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from './text-field-components';
 import { Text3 } from './text';
-import { isIos, isRunningAcceptanceTest, isChrome, isFirefox } from './utils/platform';
+import { isIos, isRunningAcceptanceTest, isFirefox } from './utils/platform';
 import { useAriaId, useTheme, useScreenSize } from './hooks';
 import classNames from 'classnames';
 import { combineRefs } from './utils/common';
@@ -22,20 +23,6 @@ function _defineProperty(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);
-}
 function _iterableToArrayLimit(arr, i) {
     var _arr = [];
     var _n = true;
@@ -150,10 +137,6 @@ var commonInputStyles = function(theme) {
                 opacity: 0.5
             }
         },
-        '&:disabled': {
-            color: theme.colors.textDisabled,
-            cursor: 'not-allowed'
-        },
         boxShadow: 'none'
     };
 };
@@ -267,11 +250,7 @@ var useStyles = createUseStyles(function(theme) {
             paddingRight: 16,
             display: 'flex',
             alignItems: 'center',
-            alignSelf: 'center',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            alignSelf: 'center'
         },
         startIcon: {
             pointerEvents: 'none',
@@ -280,11 +259,7 @@ var useStyles = createUseStyles(function(theme) {
             display: 'flex',
             alignItems: 'center',
             height: '100%',
-            position: 'absolute',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            position: 'absolute'
         },
         prefix: (_obj2 = {
             alignSelf: 'baseline',
@@ -306,16 +281,12 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-// Chrome ignores 'off': https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
-var fixAutoComplete = function(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && isChrome(platformOverrides) ? 'nope' : autoComplete;
-};
 var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, ["error", "helperText", "label", "inputProps", "inputRef", "defaultValue", "value", "onFocus", "onBlur", "inputComponent", "prefix", "startIcon", "endIcon", "endIconOverlay", "shrinkLabel", "multiline", "focus", "fieldRef", "maxLength", "id",
         "autoComplete", "fullWidth"]);
     var id = useAriaId(idProp);
     var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
-    var ref2 = useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = useTheme(), colors = ref2.colors;
     var ref3 = useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
     var ref4;
     var ref5 = _slicedToArray(React.useState((ref4 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref4 !== void 0 ? ref4 : 0), 2), characterCount = ref5[0], setCharacterCount = ref5[1];
@@ -372,7 +343,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     var props = _objectSpread({
     }, rest, {
         maxLength: maxLength,
-        autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
+        autoComplete: autoCompleteProp
     }, inputProps);
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var scale = isShrinked ? isTabletOrSmaller ? LABEL_SCALE_MOBILE : LABEL_SCALE_DESKTOP : 1;
@@ -383,71 +354,84 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         width: "calc(((100% - ".concat(LABEL_LEFT_POSITION + (startIcon ? 48 : LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
         paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    var prefixColor = rest.disabled ? colors.textDisabled : colors.textSecondary;
-    return(/*#__PURE__*/ React.createElement(FieldContainer, {
+    return(/*#__PURE__*/ _jsxs(FieldContainer, {
         disabled: rest.disabled,
-        helperText: /*#__PURE__*/ React.createElement(HelperText, {
+        helperText: /*#__PURE__*/ _jsx(HelperText, {
             error: error,
             leftText: helperText,
             rightText: multiline && maxLength ? "".concat(characterCount, "/").concat(maxLength) : undefined
         }),
         multiline: multiline,
         fullWidth: fullWidth,
-        fieldRef: fieldRef
-    }, startIcon && /*#__PURE__*/ React.createElement("div", {
-        className: classes.startIcon
-    }, startIcon), prefix && /*#__PURE__*/ React.createElement("div", {
-        className: classes.prefix
-    }, /*#__PURE__*/ React.createElement(Text3, {
-        color: prefixColor,
-        regular: true
-    }, prefix)), /*#__PURE__*/ React.createElement("div", {
-        className: classes.fullWidth
-    }, /*#__PURE__*/ React.createElement(Text3, {
-        as: "div",
-        regular: true
-    }, /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({
-    }, inputRefProps, props, {
-        id: id,
-        className: multiline ? classes.textArea : classes.input,
-        onFocus: function(event) {
-            setInputState('focused');
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        },
-        onBlur: function(event) {
-            if (event.target.value.length > 0) {
-                setInputState('filled');
-            } else {
-                setInputState('default');
-            }
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        },
-        onChange: function(event) {
-            // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
-            if (maxLength === undefined || event.target.value.length <= maxLength) {
-                var ref;
-                setCharacterCount(event.target.value.length);
-                (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, event);
-            } else {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        },
-        defaultValue: defaultValue,
-        value: value
-    }, error && {
-        'aria-invalid': true
-    })))), label && /*#__PURE__*/ React.createElement(Label, {
-        style: labelStyle,
-        error: error,
-        forId: id,
-        inputState: inputState,
-        shrinkLabel: shrinkLabel,
-        disabled: rest.disabled,
-        optional: !rest.required
-    }, label), endIcon && /*#__PURE__*/ React.createElement("div", {
-        className: classes.endIcon
-    }, endIcon), endIconOverlay));
+        fieldRef: fieldRef,
+        children: [
+            startIcon && /*#__PURE__*/ _jsx("div", {
+                className: classes.startIcon,
+                children: startIcon
+            }),
+            prefix && /*#__PURE__*/ _jsx("div", {
+                className: classes.prefix,
+                children: /*#__PURE__*/ _jsx(Text3, {
+                    color: colors.textSecondary,
+                    regular: true,
+                    children: prefix
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: classes.fullWidth,
+                children: /*#__PURE__*/ _jsx(Text3, {
+                    as: "div",
+                    regular: true,
+                    children: /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({
+                    }, inputRefProps, props, {
+                        id: id,
+                        className: multiline ? classes.textArea : classes.input,
+                        onFocus: function(event) {
+                            setInputState('focused');
+                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                        },
+                        onBlur: function(event) {
+                            if (event.target.value.length > 0) {
+                                setInputState('filled');
+                            } else {
+                                setInputState('default');
+                            }
+                            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                        },
+                        onChange: function(event) {
+                            // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
+                            if (maxLength === undefined || event.target.value.length <= maxLength) {
+                                var ref;
+                                setCharacterCount(event.target.value.length);
+                                (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, event);
+                            } else {
+                                event.stopPropagation();
+                                event.preventDefault();
+                            }
+                        },
+                        defaultValue: defaultValue,
+                        value: value
+                    }, error && {
+                        'aria-invalid': true
+                    }))
+                })
+            }),
+            label && /*#__PURE__*/ _jsx(Label, {
+                style: labelStyle,
+                error: error,
+                forId: id,
+                inputState: inputState,
+                shrinkLabel: shrinkLabel,
+                optional: !rest.required,
+                children: label
+            }),
+            endIcon && /*#__PURE__*/ _jsx("div", {
+                className: classes.endIcon,
+                children: endIcon
+            }),
+            endIconOverlay
+        ]
+    }));
 });
 var useSuggestionsStyles = createUseStyles(function() {
     return {
@@ -493,77 +477,81 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
-    return getSuggestions ? /*#__PURE__*/ React.createElement(React.Suspense, {
-        fallback: /*#__PURE__*/ React.createElement(TextFieldBaseComponent, _extends({
+    return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
+        fallback: /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
         }, props, {
             // This label override while loading is needed in acceptance tests because
             // while the test is typing, the component could be remounted.
             // By hiding the label, we ensure that the test selects the loaded component
             label: isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
-        }))
-    }, /*#__PURE__*/ React.createElement(Autosuggest, {
-        id: autoSuggestId,
-        inputProps: _objectSpread({
-        }, props, {
-            id: id,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
-            // @ts-expect-error Autosuggest expects slightly different types
-            onChange: function(e, param) {
-                var newValue = param.newValue;
-                var ref;
-                // hack to mutate event value
-                e.target = _objectSpread({
-                }, e.target, {
-                    value: newValue
-                });
-                e.currentTarget = _objectSpread({
-                }, e.currentTarget, {
-                    value: newValue
+        })),
+        children: /*#__PURE__*/ _jsx(Autosuggest, {
+            id: autoSuggestId,
+            inputProps: _objectSpread({
+            }, props, {
+                id: id,
+                autoComplete: 'off',
+                // @ts-expect-error Autosuggest expects slightly different types
+                onChange: function(e, param) {
+                    var newValue = param.newValue;
+                    var ref;
+                    // hack to mutate event value
+                    e.target = _objectSpread({
+                    }, e.target, {
+                        value: newValue
+                    });
+                    e.currentTarget = _objectSpread({
+                    }, e.currentTarget, {
+                        value: newValue
+                    });
+                    (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, e);
+                }
+            }),
+            renderInputComponent: function(inputProps) {
+                /*#__PURE__*/ return _jsx(TextFieldBaseComponent, _objectSpread({
+                }, inputProps, {
+                    inputRef: combineRefs(inputRef, props.inputRef, ref)
+                }));
+            },
+            suggestions: suggestions,
+            onSuggestionsFetchRequested: function(param) {
+                var value = param.value;
+                return setSuggestions(getSuggestions(value));
+            },
+            onSuggestionsClearRequested: function() {
+                return setSuggestions([]);
+            },
+            getSuggestionValue: function(suggestion) {
+                return suggestion;
+            },
+            renderSuggestion: function(suggestion, param) {
+                var isHighlighted = param.isHighlighted;
+                /*#__PURE__*/ return _jsx("div", {
+                    role: "menuitem",
+                    className: classNames(classes.menuItem, _defineProperty({
+                    }, classes.menuItemSelected, isHighlighted)),
+                    children: /*#__PURE__*/ _jsx(Text3, {
+                        regular: true,
+                        children: suggestion
+                    })
                 });
-                (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, e);
+            },
+            renderSuggestionsContainer: function(options) {
+                /*#__PURE__*/ return _jsx("div", _objectSpread({
+                }, options.containerProps, {
+                    style: {
+                        width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
+                    },
+                    className: classes.suggestionsContainer,
+                    "aria-label": "".concat(props.label, " ").concat(texts.menuLabelSuffix),
+                    children: options.children
+                }));
             }
-        }),
-        renderInputComponent: function(inputProps) {
-            /*#__PURE__*/ return React.createElement(TextFieldBaseComponent, _extends({
-            }, inputProps, {
-                inputRef: combineRefs(inputRef, props.inputRef, ref)
-            }));
-        },
-        suggestions: suggestions,
-        onSuggestionsFetchRequested: function(param) {
-            var value = param.value;
-            return setSuggestions(getSuggestions(value));
-        },
-        onSuggestionsClearRequested: function() {
-            return setSuggestions([]);
-        },
-        getSuggestionValue: function(suggestion) {
-            return suggestion;
-        },
-        renderSuggestion: function(suggestion, param) {
-            var isHighlighted = param.isHighlighted;
-            /*#__PURE__*/ return React.createElement("div", {
-                role: "menuitem",
-                className: classNames(classes.menuItem, _defineProperty({
-                }, classes.menuItemSelected, isHighlighted))
-            }, /*#__PURE__*/ React.createElement(Text3, {
-                regular: true
-            }, suggestion));
-        },
-        renderSuggestionsContainer: function(options) {
-            /*#__PURE__*/ return React.createElement("div", _extends({
-            }, options.containerProps, {
-                style: {
-                    width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
-                },
-                className: classes.suggestionsContainer,
-                "aria-label": "".concat(props.label, " ").concat(texts.menuLabelSuffix)
-            }), options.children);
-        }
-    })) : /*#__PURE__*/ React.createElement(TextFieldBaseComponent, _extends({
+        })
+    }) : /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
     }, props, {
         id: id,
         ref: ref

package/dist-es/text-field-components.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import classnames from 'classnames';
 import { createUseStyles } from './jss';
@@ -85,10 +86,7 @@ var useLabelStyles = createUseStyles(function(theme) {
             fontSize: 18,
             lineHeight: '24px',
             color: function(param) {
-                var inputState = param.inputState, error = param.error, disabled = param.disabled;
-                if (inputState === 'default' && disabled) {
-                    return theme.colors.textDisabled;
-                }
+                var inputState = param.inputState, error = param.error;
                 if (error && inputState !== 'default') {
                     return theme.colors.error;
                 }
@@ -124,13 +122,11 @@ var useLabelStyles = createUseStyles(function(theme) {
     };
 });
 export var Label = function(param) {
-    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, disabled = param.disabled, style = param.style, optional = param.optional;
+    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, style = param.style, optional = param.optional;
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var classes = useLabelStyles({
-        isShrinked: isShrinked,
         inputState: inputState,
-        error: error,
-        disabled: disabled
+        error: error
     });
     var ref = _slicedToArray(React.useState(''), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
     var ref1 = useTheme(), texts = ref1.texts;
@@ -146,17 +142,28 @@ export var Label = function(param) {
             clearTimeout(tid);
         };
     }, []);
-    return(/*#__PURE__*/ React.createElement("label", {
+    return(/*#__PURE__*/ _jsxs("label", {
         className: classnames(classes.labelContainer, _defineProperty({
         }, classes.shrinked, isShrinked)),
         htmlFor: forId,
         style: _objectSpread({
         }, style, {
             transition: transitionStyle
-        })
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: classes.labelText
-    }, children), optional ? /*#__PURE__*/ React.createElement("span", null, "\xa0(", texts.formFieldOptionalLabelSuffix, ")") : null));
+        }),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: classes.labelText,
+                children: children
+            }),
+            optional ? /*#__PURE__*/ _jsxs("span", {
+                children: [
+                    "\xa0(",
+                    texts.formFieldOptionalLabelSuffix,
+                    ")"
+                ]
+            }) : null
+        ]
+    }));
 };
 var useHelperTextStyles = createUseStyles(function() {
     return {
@@ -185,26 +192,38 @@ export var HelperText = function(param) {
     var classes = useHelperTextStyles();
     var leftColor = isInverse ? colors.textPrimaryInverse : error ? colors.error : colors.textSecondary;
     var rightColor = isInverse ? colors.textPrimaryInverse : colors.textSecondary;
-    return(/*#__PURE__*/ React.createElement("div", {
-        className: classes.helperContainer
-    }, leftText && /*#__PURE__*/ React.createElement("div", {
-        className: classes.leftText
-    }, /*#__PURE__*/ React.createElement(Text1, {
-        color: leftColor,
-        regular: true,
-        as: "p"
-    }, leftText)), rightText && /*#__PURE__*/ React.createElement("div", {
-        className: classes.rightText
-    }, /*#__PURE__*/ React.createElement(Text1, {
-        color: rightColor,
-        regular: true,
-        as: "p"
-    }, rightText))));
+    return(/*#__PURE__*/ _jsxs("div", {
+        className: classes.helperContainer,
+        children: [
+            leftText && /*#__PURE__*/ _jsx("div", {
+                className: classes.leftText,
+                children: /*#__PURE__*/ _jsx(Text1, {
+                    color: leftColor,
+                    regular: true,
+                    as: "p",
+                    children: leftText
+                })
+            }),
+            rightText && /*#__PURE__*/ _jsx("div", {
+                className: classes.rightText,
+                children: /*#__PURE__*/ _jsx(Text1, {
+                    color: rightColor,
+                    regular: true,
+                    as: "p",
+                    children: rightText
+                })
+            })
+        ]
+    }));
 };
 var _obj1, _obj2;
 var useFieldContainerStyles = createUseStyles(function(theme) {
     return {
         fieldContainer: (_obj1 = {
+            opacity: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 0.5 : 1;
+            },
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
@@ -229,13 +248,7 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
-        }), _defineProperty(_obj2, "cursor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? 'not-allowed' : 'initial';
-        }), _obj2)
+        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", theme.colors.backgroundContainer), _obj2)
     };
 });
 export var FieldContainer = function(param) {
@@ -245,10 +258,15 @@ export var FieldContainer = function(param) {
         fullWidth: fullWidth,
         disabled: disabled
     });
-    return(/*#__PURE__*/ React.createElement("div", {
-        className: classes.fieldContainer
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classnames(classes.border, className),
-        ref: fieldRef
-    }, children), helperText));
+    return(/*#__PURE__*/ _jsxs("div", {
+        className: classes.fieldContainer,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: classnames(classes.border, className),
+                ref: fieldRef,
+                children: children
+            }),
+            helperText
+        ]
+    }));
 };

package/dist-es/text-field.js

@@ -1,19 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
 import TextFieldBase from './text-field-base';
-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];
-                }
-            }
+import { combineRefs } from './utils/common';
+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 _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {
+        };
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
         }
-        return target;
-    };
-    return _extends.apply(this, arguments);
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
 }
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
@@ -45,10 +62,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
-        "onFocus"
-    ]);
+var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
+        "onFocus", "onPress"]);
     var inputRef = React.useRef(null);
     var processValue = function(v) {
         return v;
@@ -89,15 +105,12 @@ var TextField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
-    return(/*#__PURE__*/ React.createElement(TextFieldBase, _extends({
+    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 export default TextField;