@telefonica/mistica 10.14.2 → 10.18.0

package/dist/skins/types.js.flow

@@ -31,22 +31,17 @@ export type Colors = {
   borderDark: string,
   borderSelected: string,
   buttonDangerBackground: string,
-  buttonDangerBackgroundDisabled: string,
   buttonDangerBackgroundSelected: string,
   buttonDangerBackgroundHover: string,
   buttonLinkBackgroundSelected: string,
   buttonLinkBackgroundSelectedInverse: string,
   buttonPrimaryBackground: string,
-  buttonPrimaryBackgroundDisabled: string,
-  buttonPrimaryBackgroundDisabledInverse: string,
   buttonPrimaryBackgroundInverse: string,
   buttonPrimaryBackgroundSelected: string,
   buttonPrimaryBackgroundSelectedInverse: string,
   buttonPrimaryBackgroundHover: string,
   buttonSecondaryBackground: string,
-  buttonSecondaryBackgroundDisabled: string,
   buttonSecondaryBackgroundSelected: string,
-  buttonSecondaryBorderDisabledInverse: string,
   buttonSecondaryBorderInverse: string,
   buttonSecondaryBorderSelectedInverse: string,
   control: string,
@@ -78,24 +73,17 @@ export type Colors = {
   textPrimaryInverse: string,
   textSecondary: string,
   textSecondaryInverse: string,
-  textDisabled: string,
   textAmount: string,
   textButtonPrimary: string,
-  textButtonPrimaryDisabled: string,
   textButtonPrimaryInverse: string,
-  textButtonPrimaryInverseDisabled: string,
   textButtonPrimaryInverseSelected: string,
   textButtonSecondary: string,
-  textButtonSecondaryDisabled: string,
   textButtonSecondarySelected: string,
   textButtonSecondaryInverse: string,
-  textButtonSecondaryInverseDisabled: string,
   textButtonSecondaryInverseSelected: string,
   textLink: string,
   textLinkInverse: string,
   textLinkDanger: string,
-  textLinkDangerDisabled: string,
-  textLinkDisabled: string,
   textLinkSnackbar: string,
   textNavigationBarPrimary: string,
   textNavigationBarSecondary: string,

package/dist/skins/vivo.js

@@ -60,40 +60,29 @@ var getVivoSkin = function getVivoSkin() {
             borderSelected: palette.vivoPurple,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundDisabled: palette.pepperLight30,
             buttonDangerBackgroundSelected: palette.pepperDark,
             buttonDangerBackgroundHover: palette.pepperDark,
             buttonLinkBackgroundSelected: palette.vivoPurpleLight10,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.vivoPurple,
-            buttonPrimaryBackgroundDisabled: palette.vivoPurpleLight20,
-            buttonPrimaryBackgroundDisabledInverse: palette.vivoPurpleLight50,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.vivoPurpleDark,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundSelectedInverse: palette.vivoPurpleLight50,
             buttonSecondaryBackground: palette.vivoPurple,
-            buttonSecondaryBackgroundDisabled: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundSelected: palette.vivoPurpleDark,
-            buttonSecondaryBorderDisabledInverse: palette.vivoPurpleLight50,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.vivoPurpleLight50,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.vivoPurple,
-            textButtonPrimaryInverseDisabled: palette.vivoPurpleLight20,
             textButtonPrimaryInverseSelected: palette.vivoPurple,
             textButtonSecondary: palette.vivoPurple,
-            textButtonSecondaryDisabled: palette.vivoPurpleLight20,
             textButtonSecondarySelected: palette.vivoPurpleDark,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.vivoPurpleLight50,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.vivoPurple,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkDangerDisabled: palette.pepperLight30,
-            textLinkDisabled: palette.vivoPurpleLight50,
             textLinkSnackbar: palette.vivoPurpleLight50,
             // CONTROLS
             control: palette.grey3,
@@ -127,7 +116,6 @@ var getVivoSkin = function getVivoSkin() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey4,
             textAmount: palette.vivoPurple,
             // STATES
             error: palette.pepper,
@@ -157,36 +145,26 @@ var getVivoSkin = function getVivoSkin() {
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
             borderSelected: palette.vivoPurpleLight80,
-            buttonDangerBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelected: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.vivoPurpleLight80,
             buttonPrimaryBackgroundSelected: palette.vivoPurpleDark,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundSelectedInverse: palette.vivoPurpleDark,
             buttonSecondaryBackground: palette.vivoPurpleLight80,
-            buttonSecondaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
             buttonSecondaryBackgroundSelected: palette.vivoPurpleDark,
-            buttonSecondaryBorderDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.vivoPurpleLight80,
             buttonSecondaryBorderSelectedInverse: palette.vivoPurpleDark,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.vivoPurpleLight50,
             textLinkInverse: palette.vivoPurpleLight50,
-            textLinkDisabled: palette.darkModeGrey6,
             control: palette.darkModeGrey6,
             controlActivated: palette.vivoPurpleLight80,
             loadingBar: palette.vivoPurpleLight80,
@@ -211,7 +189,6 @@ var getVivoSkin = function getVivoSkin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.vivoPurpleLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,

package/dist/switch-component.js

@@ -109,7 +109,8 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
     return {
         checkbox: {
             display: 'inline-block',
-            padding: isIos ? 0 : 4
+            padding: isIos ? 0 : 4,
+            cursor: 'pointer'
         },
         switchCheckboxContainer: {
             position: 'relative',
@@ -119,7 +120,6 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         switchCheckboxLabel: {
             display: 'block',
             overflow: 'hidden',
-            cursor: 'pointer',
             borderRadius: 40,
             '& > *': {
                 pointerEvents: 'none'
@@ -165,8 +165,8 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
             cursor: 'default'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            cursor: 'default',
+            opacity: 0.5
         }
     };
 });
@@ -212,7 +212,8 @@ var Switch = function Switch(props) {
         }
     };
     var switchEl = /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: classes.checkbox,
+        className: (0, _classnames).default(classes.checkbox, _defineProperty({
+        }, classes.disabled, disabled)),
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: classes.switchCheckboxContainer,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
@@ -236,8 +237,7 @@ var Switch = function Switch(props) {
         onKeyDown: disabled ? undefined : handleKeyDown,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: (0, _classnames).default(classes.container, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.container,
         "aria-disabled": disabled,
         "aria-labelledby": labelId
     }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes), {
@@ -248,11 +248,14 @@ var Switch = function Switch(props) {
             alignItems: "center",
             children: [
                 switchEl,
-                /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                props.children && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                     regular: true,
                     as: "div",
                     id: labelId,
-                    children: props.children
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: props.children
+                    })
                 })
             ]
         })

package/dist/text-field-base.d.ts

@@ -71,5 +71,6 @@ interface TextFieldBaseProps {
     min?: string;
     max?: string;
 }
-declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
-export default TextFieldBase;
+export declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
+export declare const TextFieldBaseAutosuggest: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
+export {};

package/dist/text-field-base.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.TextFieldBase = exports.TextFieldBaseAutosuggest = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
@@ -171,10 +171,6 @@ var commonInputStyles = function commonInputStyles(theme) {
                 opacity: 0.5
             }
         },
-        '&:disabled': {
-            color: theme.colors.textDisabled,
-            cursor: 'not-allowed'
-        },
         boxShadow: 'none'
     };
 };
@@ -288,11 +284,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             paddingRight: 16,
             display: 'flex',
             alignItems: 'center',
-            alignSelf: 'center',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            alignSelf: 'center'
         },
         startIcon: {
             pointerEvents: 'none',
@@ -301,11 +293,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: 'flex',
             alignItems: 'center',
             height: '100%',
-            position: 'absolute',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            position: 'absolute'
         },
         prefix: (_obj2 = {
             alignSelf: 'baseline',
@@ -327,11 +315,7 @@ var useStyles = (0, _jss).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 fixAutoComplete(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && (0, _platform).isChrome(platformOverrides) ? 'nope' : autoComplete;
-};
-var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBase = /*#__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",
@@ -358,7 +342,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     ]);
     var id = (0, _hooks).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 = (0, _hooks).useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = (0, _hooks).useTheme(), colors = ref2.colors;
     var ref3 = (0, _hooks).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];
@@ -415,7 +399,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 ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
@@ -426,7 +410,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         width: "calc(((100% - ".concat(_textFieldComponents.LABEL_LEFT_POSITION + (startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
         paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    var prefixColor = rest.disabled ? colors.textDisabled : colors.textSecondary;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
         disabled: rest.disabled,
         helperText: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.HelperText, {
@@ -445,7 +428,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
             prefix && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.prefix,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                    color: prefixColor,
+                    color: colors.textSecondary,
                     regular: true,
                     children: prefix
                 })
@@ -495,7 +478,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
                 forId: id,
                 inputState: inputState,
                 shrinkLabel: shrinkLabel,
-                disabled: rest.disabled,
                 optional: !rest.required,
                 children: label
             }),
@@ -507,6 +489,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+exports.TextFieldBase = TextFieldBase;
 var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
     return {
         menuItem: {
@@ -541,7 +524,7 @@ var Autosuggest = /*#__PURE__*/ React.lazy(function() {
         return _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ 'react-autosuggest'));
     });
 });
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
@@ -556,13 +539,13 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
     return getSuggestions ? /*#__PURE__*/ (0, _jsxRuntime).jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+        fallback: /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _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: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
         })),
@@ -571,7 +554,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             inputProps: _objectSpread({
             }, props, {
                 id: id,
-                autoComplete: fixAutoComplete(platformOverrides, 'off'),
+                autoComplete: 'off',
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: function onChange(e, param) {
                     var newValue = param.newValue;
@@ -589,7 +572,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }
             }),
             renderInputComponent: function renderInputComponent(inputProps) {
-                /*#__PURE__*/ return (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+                /*#__PURE__*/ return (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({
                 }, inputProps, {
                     inputRef: (0, _common).combineRefs(inputRef, props.inputRef, ref)
                 }));
@@ -629,11 +612,10 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }));
             }
         })
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({
     }, props, {
         id: id,
         ref: ref
     }));
 });
-var _default = TextFieldBase;
-exports.default = _default;
+exports.TextFieldBaseAutosuggest = TextFieldBaseAutosuggest;

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

@@ -97,10 +97,14 @@ declare type TextFieldBaseProps = {
   min?: string,
   max?: string,
 };
-declare var TextFieldBase: React.ComponentType<{
+declare export var TextFieldBase: React.ComponentType<{
   ...TextFieldBaseProps,
   ...{},
 }>;
-declare export default typeof TextFieldBase;
+declare export var TextFieldBaseAutosuggest: React.ComponentType<{
+  ...TextFieldBaseProps,
+  ...{},
+}>;
+declare export {};
 
 import { type CssStyle } from "./__types__.js.flow";

package/dist/text-field-components.d.ts

@@ -10,7 +10,6 @@ declare type LabelProps = {
     inputState: InputState;
     error?: boolean;
     children: string;
-    disabled?: boolean;
     style?: React.CSSProperties;
     optional?: boolean;
 };

package/dist/text-field-components.js

@@ -123,10 +123,7 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
             fontSize: 18,
             lineHeight: '24px',
             color: function color(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;
                 }
@@ -162,13 +159,11 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Label = function Label(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 = (0, _hooks).useTheme(), texts = ref1.texts;
@@ -264,6 +259,10 @@ var _obj1, _obj2;
 var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         fieldContainer: (_obj1 = {
+            opacity: function opacity(param) {
+                var disabled = param.disabled;
+                return disabled ? 0.5 : 1;
+            },
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
@@ -288,13 +287,7 @@ var useFieldContainerStyles = (0, _jss).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)
     };
 });
 var FieldContainer = function FieldContainer(param) {

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

@@ -12,7 +12,6 @@ declare type LabelProps = {
   inputState: InputState,
   error?: boolean,
   children: string,
-  disabled?: boolean,
   style?: CssStyle,
   optional?: boolean,
 };

package/dist/text-field.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import type { CommonFormFieldProps } from './text-field-base';
 export interface TextFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
+    onPress?: (event: React.MouseEvent) => void;
     multiline?: boolean;
     prefix?: React.ReactNode;
     endIcon?: React.ReactNode;
     getSuggestions?: (value: string) => Array<string>;
 }
-declare const TextField: React.FC<TextFieldProps>;
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/text-field.js

@@ -6,12 +6,8 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
+var _common = require("./utils/common");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -95,8 +91,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function TextField(_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, [
+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",
@@ -108,7 +104,8 @@ var TextField = function TextField(_param) {
         "value",
         "defaultValue",
         "onBlur",
-        "onFocus"
+        "onFocus",
+        "onPress"
     ]);
     var inputRef = React.useRef(null);
     var processValue = function processValue(v) {
@@ -150,16 +147,13 @@ var TextField = function TextField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function setInputRef(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 var _default = TextField;
 exports.default = _default;

package/dist/text-field.js.flow

@@ -6,10 +6,14 @@ export type TextFieldProps = {
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
+  onPress?: (event: SyntheticMouseEvent<>) => void,
   multiline?: boolean,
   prefix?: React.Node,
   endIcon?: React.Node,
   getSuggestions?: (value: string) => Array<string>,
 };
-declare var TextField: React.ComponentType<TextFieldProps>;
+declare var TextField: React.ComponentType<{
+  ...TextFieldProps,
+  ref?: React.Ref<HTMLInputElement>,
+}>;
 declare export default typeof TextField;

package/dist/text-link.d.ts

@@ -8,6 +8,7 @@ interface CommonProps {
         [className: string]: string;
     };
     small?: boolean;
+    disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;

package/dist/text-link.js

@@ -8,6 +8,7 @@ var _jss = require("./jss");
 var _touchable = _interopRequireDefault(require("./touchable"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _themeVariantContext = require("./theme-variant-context");
+var _formContext = require("./form-context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -73,19 +74,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+var _obj;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
-        textLink: _defineProperty({
+        textLink: (_obj = {
             width: 'auto',
             lineHeight: 'inherit',
             display: 'inline-block',
             color: theme.colors.textLink,
             wordBreak: 'break-word'
-        }, theme.mq.supportsHover, {
-            '&:hover': {
+        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            '&:hover:not([disabled])': {
                 textDecoration: 'underline'
             }
-        }),
+        }), _defineProperty(_obj, '&[disabled]', {
+            opacity: 0.5
+        }), _obj),
         inverse: {
             color: theme.colors.textLinkInverse
         },
@@ -94,19 +98,22 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
     };
 });
-var _obj;
+var _obj1;
 var TextLink = function TextLink(_param) {
-    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, props = _objectWithoutProperties(_param, [
+    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, [
         "children",
         "className",
-        "small"
+        "small",
+        "disabled"
     ]);
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var ref = (0, _formContext).useForm(), formStatus = ref.formStatus;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
     }, props, {
-        className: (0, _classnames).default(classes.textLink, className, (_obj = {
-        }, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
+        disabled: disabled || formStatus === 'sending',
+        className: (0, _classnames).default(classes.textLink, className, (_obj1 = {
+        }, _defineProperty(_obj1, classes.small, small), _defineProperty(_obj1, classes.inverse, isInverse), _obj1)),
         children: children
     })));
 };

package/dist/text-link.js.flow

@@ -10,6 +10,7 @@ declare type CommonProps = {
     [className: string]: string,
   },
   small?: boolean,
+  disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 
   /**

package/dist/touchable.js

@@ -102,8 +102,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
                 border: 'none'
             },
             '&[disabled]': {
-                cursor: 'auto',
-                pointerEvents: 'none'
+                cursor: 'default'
             },
             '&:active, &:hover': {
                 textDecoration: 'none'
@@ -207,7 +206,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             "aria-labelledby": props['aria-labelledby'],
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
-            href: props.disabled ? '' : getHref(),
+            href: props.disabled ? undefined : getHref(),
             target: openNewTab ? '_blank' : undefined,
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,