@telefonica/mistica 10.0.1 → 10.3.1

package/dist-es/password-field.js

@@ -28,9 +28,9 @@ import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
 import VisibilityOff from './icons/icon-visibility-off';
 import { createUseStyles } from './jss';
-var usePasswordAdornmentStyles = createUseStyles(function () {
+var usePasswordAdornmentStyles = createUseStyles(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -87,6 +87,8 @@ var PasswordField = function PasswordField(_ref2) {
       isVisible = _React$useState2[0],
       setIsVisible = _React$useState2[1];
 
+  var caretPositionRef = React.useRef(0);
+
   var _inputRef = React.useRef(null);
 
   var processValue = function processValue(value) {
@@ -97,16 +99,22 @@ var PasswordField = function PasswordField(_ref2) {
     var input = _inputRef.current;
 
     if (input) {
-      input.focus(); // neeeded to place the caret at the end
+      if (input.selectionStart !== null) {
+        caretPositionRef.current = input.selectionStart;
+      }
 
-      setTimeout(function () {
-        var v = input.value;
-        input.value = '';
-        input.value = v;
-      }, 0);
+      input.focus();
     }
   };
 
+  React.useEffect(function () {
+    var input = _inputRef.current;
+
+    if (input) {
+      input.selectionStart = caretPositionRef.current;
+      input.selectionEnd = caretPositionRef.current;
+    }
+  }, [isVisible, caretPositionRef, _inputRef]);
   var fieldProps = useFieldProps({
     name: name,
     value: value,

package/dist-es/select.js

@@ -27,7 +27,7 @@ import { isAndroid, isIos } from './utils/platform';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
 var useStyles = createUseStyles(function (theme) {
-  var _selectContainer;
+  var _selectContainer, _menuItem;
 
   return {
     selectContainer: (_selectContainer = {
@@ -47,7 +47,8 @@ var useStyles = createUseStyles(function (theme) {
     }), _selectContainer),
     select: {
       fontFamily: 'inherit',
-      backgroundColor: theme.colors.backgroundContainer,
+      backgroundColor: 'transparent',
+      // FieldContainer gives the correct background color
       paddingTop: function paddingTop(_ref3) {
         var label = _ref3.label;
         return label ? 24 : 16;
@@ -66,51 +67,60 @@ var useStyles = createUseStyles(function (theme) {
       height: '100%',
       textOverflow: 'ellipsis',
       '&:disabled': {
-        color: theme.colors.border
+        color: theme.colors.textDisabled
       },
       appearance: 'none',
       cursor: function cursor(_ref5) {
         var disabled = _ref5.disabled;
-        return disabled ? 'initial' : 'pointer';
+        return disabled ? 'inherit' : 'pointer';
       }
     },
     arrowDown: {
       position: 'absolute',
       right: 16,
       top: 'calc(50% - 12px)',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      opacity: function opacity(_ref6) {
+        var disabled = _ref6.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     selectText: {
       position: 'absolute',
       pointerEvents: 'none',
-      left: 12,
-      top: function top(_ref6) {
-        var label = _ref6.label;
+      left: 12 + 1,
+      // 12 for select paddingLeft and +1 for border
+      right: 48 + 1,
+      // 48 for icon and +1 for border
+      overflow: 'hidden',
+      top: function top(_ref7) {
+        var label = _ref7.label;
         return label ? 27 : 17;
       },
       fontSize: 16,
-      color: function color(_ref7) {
-        var disabled = _ref7.disabled;
+      color: function color(_ref8) {
+        var disabled = _ref8.disabled;
         return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
       },
       maxWidth: '100%',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     },
     optionsContainer: {
       margin: 0,
       padding: 0,
       listStyleType: 'none',
       position: 'absolute',
-      top: function top(_ref8) {
-        var optionsComputedProps = _ref8.optionsComputedProps;
+      top: function top(_ref9) {
+        var optionsComputedProps = _ref9.optionsComputedProps;
         return optionsComputedProps.top;
       },
-      left: function left(_ref9) {
-        var optionsComputedProps = _ref9.optionsComputedProps;
+      left: function left(_ref10) {
+        var optionsComputedProps = _ref10.optionsComputedProps;
         return optionsComputedProps.left;
       },
-      width: function width(_ref10) {
-        var optionsComputedProps = _ref10.optionsComputedProps;
+      minWidth: function minWidth(_ref11) {
+        var optionsComputedProps = _ref11.optionsComputedProps;
         return optionsComputedProps.width;
       },
       borderRadius: 4,
@@ -118,23 +128,23 @@ var useStyles = createUseStyles(function (theme) {
       backgroundColor: theme.colors.backgroundContainer,
       paddingTop: 8,
       paddingBottom: 8,
-      transformOrigin: function transformOrigin(_ref11) {
-        var optionsComputedProps = _ref11.optionsComputedProps;
+      transformOrigin: function transformOrigin(_ref12) {
+        var optionsComputedProps = _ref12.optionsComputedProps;
         return optionsComputedProps.transformOrigin;
       },
       transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
-      opacity: function opacity(_ref12) {
-        var animateShowOptions = _ref12.animateShowOptions;
+      opacity: function opacity(_ref13) {
+        var animateShowOptions = _ref13.animateShowOptions;
         return animateShowOptions ? 1 : 0;
       },
-      transform: function transform(_ref13) {
-        var animateShowOptions = _ref13.animateShowOptions;
+      transform: function transform(_ref14) {
+        var animateShowOptions = _ref14.animateShowOptions;
         return animateShowOptions ? 'scale(1)' : 'scale(0)';
       },
-      maxHeight: function maxHeight(_ref14) {
+      maxHeight: function maxHeight(_ref15) {
         var _optionsComputedProps;
 
-        var optionsComputedProps = _ref14.optionsComputedProps;
+        var optionsComputedProps = _ref15.optionsComputedProps;
         return (_optionsComputedProps = optionsComputedProps.maxHeight) !== null && _optionsComputedProps !== void 0 ? _optionsComputedProps : '416px';
       },
       overflowY: 'auto'
@@ -142,40 +152,38 @@ var useStyles = createUseStyles(function (theme) {
     menuItemSelected: {
       backgroundColor: 'rgba(0, 0, 0, 0.14)'
     },
-    menuItem: {
+    menuItem: (_menuItem = {
       color: theme.colors.textPrimary,
       lineHeight: 1.5,
       padding: '6px 16px',
       height: 48,
-      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    }, _defineProperty(_menuItem, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
-      },
-      display: 'flex',
-      alignItems: 'center',
-      cursor: 'pointer'
-    }
+      }
+    }), _defineProperty(_menuItem, "display", 'flex'), _defineProperty(_menuItem, "alignItems", 'center'), _defineProperty(_menuItem, "cursor", 'pointer'), _menuItem)
   };
 });
 
-var Select = function Select(_ref15) {
-  var _ref19, _inputRef$current;
-
-  var id = _ref15.id,
-      label = _ref15.label,
-      helperTextProp = _ref15.helperText,
-      valueProp = _ref15.value,
-      onChangeValueProp = _ref15.onChangeValue,
-      name = _ref15.name,
-      fullWidth = _ref15.fullWidth,
-      options = _ref15.options,
-      optional = _ref15.optional,
-      disabledProp = _ref15.disabled,
-      errorProp = _ref15.error,
-      _onBlur = _ref15.onBlur,
-      _ref15$autoFocus = _ref15.autoFocus,
-      autoFocus = _ref15$autoFocus === void 0 ? false : _ref15$autoFocus,
-      native = _ref15.native;
+var Select = function Select(_ref16) {
+  var _ref20, _inputRef$current;
+
+  var id = _ref16.id,
+      label = _ref16.label,
+      helperTextProp = _ref16.helperText,
+      valueProp = _ref16.value,
+      onChangeValueProp = _ref16.onChangeValue,
+      name = _ref16.name,
+      fullWidth = _ref16.fullWidth,
+      options = _ref16.options,
+      optional = _ref16.optional,
+      disabledProp = _ref16.disabled,
+      errorProp = _ref16.error,
+      _onBlur = _ref16.onBlur,
+      _ref16$autoFocus = _ref16.autoFocus,
+      autoFocus = _ref16$autoFocus === void 0 ? false : _ref16$autoFocus,
+      native = _ref16.native;
   var inputRef = React.useRef(null);
   var focusableRef = React.useRef(null);
   var fieldRef = React.useRef(null);
@@ -378,8 +386,8 @@ var Select = function Select(_ref15) {
         var _options$value, _options;
 
         cancelEvent(e);
-        var newTentativeValueState = (_options$value = (_options = options[options.findIndex(function (_ref16) {
-          var value = _ref16.value;
+        var newTentativeValueState = (_options$value = (_options = options[options.findIndex(function (_ref17) {
+          var value = _ref17.value;
           return value === tentativeValueState;
         }) + operand]) === null || _options === void 0 ? void 0 : _options.value) !== null && _options$value !== void 0 ? _options$value : tentativeValueState;
         setTentativeValueState(newTentativeValueState);
@@ -400,8 +408,8 @@ var Select = function Select(_ref15) {
         if (e.keyCode === ENTER || e.keyCode === SPACE) {
           cancelEvent(e);
 
-          if (options.findIndex(function (_ref17) {
-            var value = _ref17.value;
+          if (options.findIndex(function (_ref18) {
+            var value = _ref18.value;
             return value === tentativeValueState;
           }) !== -1 && tentativeValueState !== valueState) {
             setValue(tentativeValueState);
@@ -439,8 +447,8 @@ var Select = function Select(_ref15) {
   var getOptionText = function getOptionText(val) {
     var _options$find;
 
-    return val ? (_options$find = options.find(function (_ref18) {
-      var value = _ref18.value;
+    return val ? (_options$find = options.find(function (_ref19) {
+      var value = _ref19.value;
       return value === val;
     })) === null || _options$find === void 0 ? void 0 : _options$find.text : '';
   };
@@ -465,6 +473,7 @@ var Select = function Select(_ref15) {
     }
   };
   return shouldUseNative ? /*#__PURE__*/React.createElement(FieldContainer, {
+    disabled: disabled,
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
       leftText: helperText
@@ -474,7 +483,7 @@ var Select = function Select(_ref15) {
   }, label && /*#__PURE__*/React.createElement(Label, {
     error: error,
     forId: inputId,
-    inputState: isFocused ? 'focused' : ((_ref19 = value !== null && value !== void 0 ? value : valueState) !== null && _ref19 !== void 0 ? _ref19 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) ? 'filled' : 'default',
+    inputState: isFocused ? 'focused' : ((_ref20 = value !== null && value !== void 0 ? value : valueState) !== null && _ref20 !== void 0 ? _ref20 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) ? 'filled' : 'default',
     disabled: disabled,
     optional: optional
   }, label), /*#__PURE__*/React.createElement("select", {
@@ -507,8 +516,8 @@ var Select = function Select(_ref15) {
       // Without this fix, the label is invisible when disabled
       opacity: 1
     }
-  }, options.every(function (_ref20) {
-    var value = _ref20.value;
+  }, options.every(function (_ref21) {
+    var value = _ref21.value;
     return !!value;
   }) &&
   /*#__PURE__*/
@@ -519,9 +528,9 @@ var Select = function Select(_ref15) {
     style: {
       display: 'none'
     }
-  }), options.map(function (_ref21) {
-    var val = _ref21.value,
-        text = _ref21.text;
+  }), options.map(function (_ref22) {
+    var val = _ref22.value,
+        text = _ref22.text;
     return /*#__PURE__*/React.createElement("option", {
       key: val,
       value: val
@@ -565,9 +574,9 @@ var Select = function Select(_ref15) {
     className: classes.optionsContainer,
     role: "listbox",
     ref: optionsMenuRef
-  }, options.map(function (_ref22) {
-    var val = _ref22.value,
-        text = _ref22.text;
+  }, options.map(function (_ref23) {
+    var val = _ref23.value,
+        text = _ref23.text;
     return /*#__PURE__*/React.createElement("li", {
       role: "option",
       "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : value),

package/dist-es/skins/movistar.js

@@ -127,7 +127,7 @@ export var getMovistarSkin = function getMovistarSkin(variant) {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.movistarBlue,
       // STATES
       error: palette.pepper,

package/dist-es/skins/o2-classic.js

@@ -133,7 +133,7 @@ export var getO2ClassicSkin = function getO2ClassicSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2SkyBlue,
       // STATES
       error: palette.pepper,

package/dist-es/skins/o2.js

@@ -133,7 +133,7 @@ export var getO2Skin = function getO2Skin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2BluePrimary,
       // STATES
       error: palette.pepper,

package/dist-es/skins/telefonica.js

@@ -127,7 +127,7 @@ export var getTelefonicaSkin = function getTelefonicaSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.telefonicaBlue,
       // STATES
       error: palette.coral,

package/dist-es/skins/vivo.js

@@ -121,7 +121,7 @@ export var getVivoSkin = function getVivoSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.vivoPurple,
       // STATES
       error: palette.pepper,

package/dist-es/tabs.js

@@ -25,6 +25,8 @@ var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
 var useStyles = createUseStyles(function (_ref) {
+  var _tab;
+
   var colors = _ref.colors,
       mq = _ref.mq;
   return {
@@ -52,7 +54,7 @@ var useStyles = createUseStyles(function (_ref) {
       height: TAB_HEIGHT,
       display: 'flex'
     },
-    tab: _defineProperty({
+    tab: (_tab = {
       flex: '1 0 80px',
       display: 'inline-flex',
       alignItems: 'center',
@@ -74,19 +76,19 @@ var useStyles = createUseStyles(function (_ref) {
         }
 
         return TAB_MAX_WIDTH;
-      },
+      }
+    }, _defineProperty(_tab, mq.supportsHover, {
       '&:hover': {
         color: colors.textPrimary
-      },
-      fallbacks: {
-        maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
-
       }
-    }, mq.desktopOrBigger, {
+    }), _defineProperty(_tab, "fallbacks", {
+      maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
+
+    }), _defineProperty(_tab, mq.desktopOrBigger, {
       flex: '0 1 208px',
       padding: "16px 32px",
       maxWidth: TAB_MAX_WIDTH
-    }),
+    }), _tab),
     tabWithIcon: _defineProperty({
       flexBasis: 112
     }, mq.desktopOrBigger, {

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

@@ -79,7 +79,8 @@ var commonInputStyles = function commonInputStyles(theme) {
       }
     },
     '&:disabled': {
-      color: theme.colors.border
+      color: theme.colors.textDisabled,
+      cursor: 'not-allowed'
     },
     boxShadow: 'none' // reset FF red shadow styles for required inputs
 
@@ -177,7 +178,11 @@ var useStyles = createUseStyles(function (theme) {
       paddingLeft: 8,
       paddingRight: 16,
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      opacity: function opacity(_ref8) {
+        var disabled = _ref8.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     startIcon: {
       pointerEvents: 'none',
@@ -187,24 +192,31 @@ var useStyles = createUseStyles(function (theme) {
       display: 'flex',
       alignItems: 'center',
       height: '100%',
-      position: 'absolute'
+      position: 'absolute',
+      opacity: function opacity(_ref9) {
+        var disabled = _ref9.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     prefix: {
-      paddingTop: function paddingTop(_ref8) {
-        var hasLabel = _ref8.hasLabel;
+      paddingTop: function paddingTop(_ref10) {
+        var hasLabel = _ref10.hasLabel;
         return hasLabel ? 25 : 16;
       },
-      paddingBottom: function paddingBottom(_ref9) {
-        var hasLabel = _ref9.hasLabel;
+      paddingBottom: function paddingBottom(_ref11) {
+        var hasLabel = _ref11.hasLabel;
         return hasLabel ? 8 : 16;
       },
       paddingLeft: 12,
       paddingRight: 16,
       display: 'flex',
       alignItems: 'center',
-      color: theme.colors.textSecondary,
-      opacity: function opacity(_ref10) {
-        var inputState = _ref10.inputState;
+      color: function color(_ref12) {
+        var disabled = _ref12.disabled;
+        return disabled ? theme.colors.textDisabled : theme.colors.textSecondary;
+      },
+      opacity: function opacity(_ref13) {
+        var inputState = _ref13.inputState;
         return inputState === 'default' ? 0 : 1;
       },
       transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'
@@ -216,33 +228,33 @@ var fixAutoComplete = function fixAutoComplete(platformOverrides, autoComplete)
   return autoComplete === 'off' && isChrome(platformOverrides) ? 'nope' : autoComplete;
 };
 
-var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
   var _defaultValue$length;
 
-  var error = _ref11.error,
-      helperText = _ref11.helperText,
-      label = _ref11.label,
-      inputProps = _ref11.inputProps,
-      inputRef = _ref11.inputRef,
-      defaultValue = _ref11.defaultValue,
-      value = _ref11.value,
-      _onFocus = _ref11.onFocus,
-      _onBlur = _ref11.onBlur,
-      inputComponent = _ref11.inputComponent,
-      prefix = _ref11.prefix,
-      startIcon = _ref11.startIcon,
-      endIcon = _ref11.endIcon,
-      endIconOverlay = _ref11.endIconOverlay,
-      shrinkLabelProp = _ref11.shrinkLabel,
-      _ref11$multiline = _ref11.multiline,
-      multiline = _ref11$multiline === void 0 ? false : _ref11$multiline,
-      focus = _ref11.focus,
-      fieldRef = _ref11.fieldRef,
-      maxLength = _ref11.maxLength,
-      idProp = _ref11.id,
-      autoCompleteProp = _ref11.autoComplete,
-      fullWidth = _ref11.fullWidth,
-      rest = _objectWithoutProperties(_ref11, _excluded);
+  var error = _ref14.error,
+      helperText = _ref14.helperText,
+      label = _ref14.label,
+      inputProps = _ref14.inputProps,
+      inputRef = _ref14.inputRef,
+      defaultValue = _ref14.defaultValue,
+      value = _ref14.value,
+      _onFocus = _ref14.onFocus,
+      _onBlur = _ref14.onBlur,
+      inputComponent = _ref14.inputComponent,
+      prefix = _ref14.prefix,
+      startIcon = _ref14.startIcon,
+      endIcon = _ref14.endIcon,
+      endIconOverlay = _ref14.endIconOverlay,
+      shrinkLabelProp = _ref14.shrinkLabel,
+      _ref14$multiline = _ref14.multiline,
+      multiline = _ref14$multiline === void 0 ? false : _ref14$multiline,
+      focus = _ref14.focus,
+      fieldRef = _ref14.fieldRef,
+      maxLength = _ref14.maxLength,
+      idProp = _ref14.id,
+      autoCompleteProp = _ref14.autoComplete,
+      fullWidth = _ref14.fullWidth,
+      rest = _objectWithoutProperties(_ref14, _excluded);
 
   var id = useAriaId(idProp);
 
@@ -272,7 +284,8 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
     hasLabel: hasLabel,
     prefix: prefix,
     multiline: multiline,
-    type: rest.type
+    type: rest.type,
+    disabled: rest.disabled
   });
   React.useEffect(function () {
     if (inputState !== 'focused' && value !== null && value !== void 0 && value.length) {
@@ -311,7 +324,27 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
     autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
   }, inputProps);
 
+  var labelStyle = {};
+  var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+
+  if (startIcon) {
+    labelStyle = isShrinked ? {
+      left: 48,
+      right: 0,
+      width: 'auto'
+    } : {
+      left: 48,
+      right: 12,
+      width: 'auto'
+    };
+  } else if (endIcon && !isShrinked) {
+    labelStyle = {
+      paddingRight: 36
+    };
+  }
+
   return /*#__PURE__*/React.createElement(FieldContainer, {
+    disabled: rest.disabled,
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
       leftText: helperText,
@@ -357,10 +390,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
   }, error && {
     'aria-invalid': true
   })), label && /*#__PURE__*/React.createElement(Label, {
-    style: startIcon ? {
-      marginLeft: 48,
-      left: 0
-    } : {},
+    style: labelStyle,
     error: error,
     forId: id,
     inputState: inputState,
@@ -407,10 +437,10 @@ var Autosuggest = /*#__PURE__*/React.lazy(function () {
   /* webpackChunkName: "react-autosuggest" */
   'react-autosuggest');
 });
-var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
-  var getSuggestions = _ref12.getSuggestions,
-      idProp = _ref12.id,
-      props = _objectWithoutProperties(_ref12, _excluded2);
+var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
+  var getSuggestions = _ref15.getSuggestions,
+      idProp = _ref15.id,
+      props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _React$useState5 = React.useState([]),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -447,10 +477,10 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
       id: id,
       autoComplete: fixAutoComplete(platformOverrides, 'off'),
       // @ts-expect-error Autosuggest expects slightly different types
-      onChange: function onChange(e, _ref13) {
+      onChange: function onChange(e, _ref16) {
         var _props$onChange2;
 
-        var newValue = _ref13.newValue;
+        var newValue = _ref16.newValue;
         // hack to mutate event value
         e.target = _objectSpread(_objectSpread({}, e.target), {}, {
           value: newValue
@@ -467,8 +497,8 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
       }));
     },
     suggestions: suggestions,
-    onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref14) {
-      var value = _ref14.value;
+    onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref17) {
+      var value = _ref17.value;
       return setSuggestions(getSuggestions(value));
     },
     onSuggestionsClearRequested: function onSuggestionsClearRequested() {
@@ -477,8 +507,8 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
     getSuggestionValue: function getSuggestionValue(suggestion) {
       return suggestion;
     },
-    renderSuggestion: function renderSuggestion(suggestion, _ref15) {
-      var isHighlighted = _ref15.isHighlighted;
+    renderSuggestion: function renderSuggestion(suggestion, _ref18) {
+      var isHighlighted = _ref18.isHighlighted;
       return /*#__PURE__*/React.createElement("div", {
         role: "menuitem",
         className: classNames(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted))