@telefonica/mistica 10.16.0 → 10.17.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [10.17.0](https://github.com/Telefonica/mistica-web/compare/v10.16.0...v10.17.0) (2022-01-18)
+
+
+### Bug Fixes
+
+* **Menu:** Menu component improvements ([#392](https://github.com/Telefonica/mistica-web/issues/392)) ([d8f1098](https://github.com/Telefonica/mistica-web/commit/d8f10988c7273da71645768c22d3a106dae0f15e))
+
+
+### Features
+
+* **Feedback:** show info/error icons in vivo ([c60e3a3](https://github.com/Telefonica/mistica-web/commit/c60e3a391174f0f6ff6e40c5bd795f2f950b5d69))
+* **TextFieldBase:** expose internal TextFieldBase component for advanced usage ([e917a99](https://github.com/Telefonica/mistica-web/commit/e917a99379d5f7fedddb0d5727cffd88af5a1d0f))
+
 # [10.16.0](https://github.com/Telefonica/mistica-web/compare/v10.15.0...v10.16.0) (2022-01-17)
 
 

package/dist/credit-card-expiration-field.js

@@ -7,12 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -243,7 +238,7 @@ var CreditCardExpirationField = function CreditCardExpirationField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/credit-card-number-field.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
 var _creditCard = require("./utils/credit-card");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCreditcard = _interopRequireDefault(require("./icons/icon-creditcard"));
 var _iconVisa = _interopRequireDefault(require("./icons/icon-visa"));
 var _iconMastercard = _interopRequireDefault(require("./icons/icon-mastercard"));
@@ -358,7 +358,7 @@ var CreditCardNumberField = function CreditCardNumberField(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/cvv-field.js

@@ -12,7 +12,7 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconInfoCvv = _interopRequireDefault(require("./icons/icon-info-cvv"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _integerField = require("./integer-field");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -178,7 +178,7 @@ var CvvField = function CvvField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function onChange(event) {

package/dist/date-field.js

@@ -6,7 +6,7 @@ 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"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -168,7 +168,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateString(min) : undefined,
         max: max ? (0, _time).getLocalDateString(max) : undefined,

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ 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"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _time = require("./utils/time");
@@ -169,7 +169,7 @@ var FormDateField = function FormDateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateTimeString(min) : undefined,
         max: max ? (0, _time).getLocalDateTimeString(max) : undefined,

package/dist/date-time-picker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
 var _reactDatetime = _interopRequireDefault(require("react-datetime"));
 var _overlay = _interopRequireDefault(require("./overlay"));
@@ -408,7 +408,7 @@ var DateTimePicker = function DateTimePicker(_param) {
     };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist/decimal-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _rifm = require("rifm");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -244,7 +239,7 @@ var DecimalField = function DecimalField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist/email-field.js

@@ -6,12 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -116,7 +111,7 @@ var EmailField = function EmailField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist/feedback.js

@@ -459,13 +459,12 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
         "children",
         "errorReference"
     ]);
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
+    var ref = (0, _hooks).useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
-        }) : undefined,
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
+        }),
         animateText: true,
         children: [
             children,
@@ -479,12 +478,10 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
 };
 exports.ErrorFeedbackScreen = ErrorFeedbackScreen;
 var InfoFeedbackScreen = function InfoFeedbackScreen(props) {
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
-        }) : undefined
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
+        })
     })));
 };
 exports.InfoFeedbackScreen = InfoFeedbackScreen;

package/dist/iban-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
 var _hooks = require("./hooks");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -297,7 +292,7 @@ var IbanField = function IbanField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { default as Image } from './image';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';

package/dist/index.js

@@ -584,6 +584,12 @@ Object.defineProperty(exports, "TextField", {
         return _textField.default;
     }
 });
+Object.defineProperty(exports, "TextFieldBase", {
+    enumerable: true,
+    get: function() {
+        return _textFieldBase.TextFieldBase;
+    }
+});
 Object.defineProperty(exports, "SearchField", {
     enumerable: true,
     get: function() {
@@ -8295,6 +8301,7 @@ var _image = _interopRequireDefault(require("./image"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));
 var _textField = _interopRequireDefault(require("./text-field"));
+var _textFieldBase = require("./text-field-base");
 var _searchField = _interopRequireDefault(require("./search-field"));
 var _emailField = _interopRequireDefault(require("./email-field"));
 var _phoneNumberField = _interopRequireDefault(require("./phone-number-field"));

package/dist/index.js.flow

@@ -101,6 +101,7 @@ declare export { default as Image } from "./image";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";
 declare export { default as TextField } from "./text-field";
+declare export { TextFieldBase } from "./text-field-base";
 declare export { default as SearchField } from "./search-field";
 declare export { default as EmailField } from "./email-field";
 declare export { default as PhoneNumberField } from "./phone-number-field";

package/dist/integer-field.js

@@ -6,12 +6,7 @@ exports.default = exports.IntegerInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -137,7 +132,7 @@ var IntegerField = function IntegerField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist/menu.js

@@ -6,9 +6,9 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _keyCodes = require("./utils/key-codes");
-var _overlay = _interopRequireDefault(require("./overlay"));
 var _jss = require("./jss");
 var _dom = require("./utils/dom");
+var _overlay = _interopRequireDefault(require("./overlay"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -103,6 +103,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -111,13 +112,17 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function left(param) {
+            bottom: function bottom(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function right(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function width(param) {
-                var itemsComputedProps = param.itemsComputedProps, width1 = param.width;
-                return width1 !== null && width1 !== void 0 ? width1 : itemsComputedProps.width;
+                var width1 = param.width;
+                return width1 !== null && width1 !== void 0 ? width1 : '100%';
             },
             borderRadius: 4,
             boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
@@ -158,28 +163,27 @@ var Menu = function Menu(param) {
             return;
         }
         var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, left = targetRect.left, right = targetRect.right, height = targetRect.height;
+        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
         var top = topTarget + height;
         var ref;
         var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue('height'))) !== null && ref !== void 0 ? ref : 0;
-        var leftDirection = position === 'left' ? left : right - (width !== null && width !== void 0 ? width : widthTarget);
+        var rightDirection = position === 'left' ? 'auto' : "calc(100% - ".concat(widthTarget, "px)");
         // if it doesn't fit on bottom
         if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
             var availableSpaceBottom = window.innerHeight - top;
             if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                var newTop = topTarget - spaceTaken;
                 setItemsComputedProps({
-                    width: widthTarget,
-                    left: leftDirection,
-                    top: Math.max(newTop, MARGIN_THRESHOLD),
-                    maxHeight: topTarget - MARGIN_THRESHOLD,
+                    right: rightDirection,
+                    bottom: '100%',
+                    top: 'auto',
+                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center bottom'
                 });
             } else {
                 setItemsComputedProps({
-                    width: widthTarget,
-                    top: top,
-                    left: leftDirection,
+                    top: '100%',
+                    bottom: 'auto',
+                    right: rightDirection,
                     maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center top'
                 });
@@ -187,9 +191,9 @@ var Menu = function Menu(param) {
         } else {
             // if it fits on bottom
             setItemsComputedProps({
-                width: widthTarget,
-                top: top,
-                left: leftDirection,
+                top: '100%',
+                bottom: 'auto',
+                right: rightDirection,
                 maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                 transformOrigin: 'center top'
             });
@@ -257,20 +261,23 @@ var Menu = function Menu(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                 onPress: function onPress(e) {
-                    setIsMenuOpen(false);
                     (0, _dom).cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist/month-field.js

@@ -6,7 +6,7 @@ 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"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -163,7 +163,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalYearMonthString(min) : undefined,
         max: max ? (0, _time).getLocalYearMonthString(max) : undefined,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.16.0';
+var PACKAGE_VERSION = '10.17.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/password-field.js

@@ -6,7 +6,7 @@ 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"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconVisibility = _interopRequireDefault(require("./icons/icon-visibility"));
@@ -221,7 +221,7 @@ var PasswordField = function PasswordField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function inputRef1(field) {

package/dist/phone-number-field.js

@@ -8,15 +8,10 @@ var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _libphonenumber = require("@telefonica/libphonenumber");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -252,7 +247,7 @@ var PhoneNumberField = function PhoneNumberField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist/search-field.js

@@ -6,7 +6,7 @@ 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"));
+var _textFieldBase = require("./text-field-base");
 var _iconSearch = _interopRequireDefault(require("./icons/icon-search"));
 var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
@@ -185,7 +185,7 @@ var SearchField = function SearchField(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconSearch.default, {
         }),

package/dist/select.js

@@ -10,7 +10,7 @@ var _hooks = require("./hooks");
 var _keyCodes = require("./utils/key-codes");
 var _textFieldComponents = require("./text-field-components");
 var _iconChevronDownRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _overlay = _interopRequireDefault(require("./overlay"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _platform = require("./utils/platform");
@@ -548,7 +548,7 @@ var Select = function Select(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, {
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

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");
@@ -315,7 +315,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-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",
@@ -489,6 +489,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+exports.TextFieldBase = TextFieldBase;
 var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
     return {
         menuItem: {
@@ -523,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"
@@ -538,7 +539,7 @@ 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.
@@ -571,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)
                 }));
@@ -611,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.js

@@ -6,13 +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"));
+var _textFieldBase = require("./text-field-base");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -152,7 +147,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onClick: onPress,
         inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),

package/dist-es/credit-card-expiration-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useForm, useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -192,7 +192,7 @@ var CreditCardExpirationField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

package/dist-es/credit-card-number-field.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useForm, useFieldProps } from './form-context';
 import { useTheme } from './hooks';
 import { getCreditCardNumberLength, isAmericanExpress, isVisa, isMasterCard, isValidCreditCardNumber } from './utils/credit-card';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCreditcard from './icons/icon-creditcard';
 import IconVisa from './icons/icon-visa';
 import IconMastercard from './icons/icon-mastercard';
@@ -305,7 +305,7 @@ var CreditCardNumberField = function(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

package/dist-es/cvv-field.js

@@ -7,7 +7,7 @@ import Tooltip from './tooltip';
 import IconButton from './icon-button';
 import IcnInfo from './icons/icon-info-cvv';
 import { useFieldProps, useForm } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { IntegerInput } from './integer-field';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -152,7 +152,7 @@ var CvvField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function(event) {

package/dist-es/date-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
@@ -118,7 +118,7 @@ var DateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateString(min) : undefined,
         max: max ? getLocalDateString(max) : undefined,

package/dist-es/date-time-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import { getLocalDateTimeString } from './utils/time';
@@ -119,7 +119,7 @@ var FormDateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateTimeString(min) : undefined,
         max: max ? getLocalDateTimeString(max) : undefined,

package/dist-es/date-time-picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
 import Datetime from 'react-datetime';
 import Overlay from './overlay';
@@ -367,7 +367,7 @@ var DateTimePicker = function(_param) {
     };
     return(/*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+            /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist-es/decimal-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { useRifm } from 'rifm';
 import { combineRefs } from './utils/common';
@@ -191,7 +191,7 @@ var DecimalField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist-es/email-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,7 +92,7 @@ var EmailField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist-es/feedback.js

@@ -420,13 +420,12 @@ export var SuccessFeedbackScreen = function(props) {
 };
 var ErrorFeedbackScreen = function(_param) {
     var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, ["children", "errorReference"]);
-    var ref = useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== VIVO_SKIN;
+    var ref = useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ _jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnError, {
-        }) : undefined,
+        icon: /*#__PURE__*/ _jsx(IcnError, {
+        }),
         animateText: true,
         children: [
             children,
@@ -440,12 +439,10 @@ var ErrorFeedbackScreen = function(_param) {
 };
 export { ErrorFeedbackScreen };
 export var InfoFeedbackScreen = function(props) {
-    var ref = useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== VIVO_SKIN;
     return(/*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnInfo, {
-        }) : undefined
+        icon: /*#__PURE__*/ _jsx(IcnInfo, {
+        })
     })));
 };
 export var SuccessFeedback = function(param) {

package/dist-es/iban-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRifm } from 'rifm';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
 import { useTheme } from './hooks';
@@ -246,7 +246,7 @@ var IbanField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

package/dist-es/index.js

@@ -60,6 +60,7 @@ export { default as Image } from './image';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';

package/dist-es/integer-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -110,7 +110,7 @@ var IntegerField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist-es/menu.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ESC, TAB } from './utils/key-codes';
-import Overlay from './overlay';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
+import Overlay from './overlay';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -69,6 +69,7 @@ var useStyles = createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -77,13 +78,17 @@ var useStyles = createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function(param) {
+            bottom: function(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function(param) {
-                var itemsComputedProps = param.itemsComputedProps, width = param.width;
-                return width !== null && width !== void 0 ? width : itemsComputedProps.width;
+                var width = param.width;
+                return width !== null && width !== void 0 ? width : '100%';
             },
             borderRadius: 4,
             boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
@@ -124,28 +129,27 @@ var Menu = function(param) {
             return;
         }
         var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, left = targetRect.left, right = targetRect.right, height = targetRect.height;
+        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
         var top = topTarget + height;
         var ref;
         var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue('height'))) !== null && ref !== void 0 ? ref : 0;
-        var leftDirection = position === 'left' ? left : right - (width !== null && width !== void 0 ? width : widthTarget);
+        var rightDirection = position === 'left' ? 'auto' : "calc(100% - ".concat(widthTarget, "px)");
         // if it doesn't fit on bottom
         if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
             var availableSpaceBottom = window.innerHeight - top;
             if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                var newTop = topTarget - spaceTaken;
                 setItemsComputedProps({
-                    width: widthTarget,
-                    left: leftDirection,
-                    top: Math.max(newTop, MARGIN_THRESHOLD),
-                    maxHeight: topTarget - MARGIN_THRESHOLD,
+                    right: rightDirection,
+                    bottom: '100%',
+                    top: 'auto',
+                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center bottom'
                 });
             } else {
                 setItemsComputedProps({
-                    width: widthTarget,
-                    top: top,
-                    left: leftDirection,
+                    top: '100%',
+                    bottom: 'auto',
+                    right: rightDirection,
                     maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center top'
                 });
@@ -153,9 +157,9 @@ var Menu = function(param) {
         } else {
             // if it fits on bottom
             setItemsComputedProps({
-                width: widthTarget,
-                top: top,
-                left: leftDirection,
+                top: '100%',
+                bottom: 'auto',
+                right: rightDirection,
                 maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                 transformOrigin: 'center top'
             });
@@ -223,20 +227,23 @@ var Menu = function(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ _jsx(Overlay, {
                 onPress: function(e) {
-                    setIsMenuOpen(false);
                     cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist-es/month-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
@@ -113,7 +113,7 @@ var DateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalYearMonthString(min) : undefined,
         max: max ? getLocalYearMonthString(max) : undefined,

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.16.0';
+export var PACKAGE_VERSION = '10.17.0';

package/dist-es/password-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
@@ -174,7 +174,7 @@ var PasswordField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function(field) {

package/dist-es/phone-number-field.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useRifm } from 'rifm';
 import { formatAsYouType, formatToE164, parse, getRegionCodeForCountryCode } from '@telefonica/libphonenumber';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
@@ -199,7 +199,7 @@ var PhoneNumberField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist-es/search-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconSearch from './icons/icon-search';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
@@ -139,7 +139,7 @@ var SearchField = function(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ _jsx(IconSearch, {
         }),

package/dist-es/select.js

@@ -5,7 +5,7 @@ import { useAriaId, useTheme } from './hooks';
 import { DOWN, ENTER, ESC, SPACE, TAB, UP } from './utils/key-codes';
 import { FieldContainer, HelperText, Label } from './text-field-components';
 import ChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import Overlay from './overlay';
 import classNames from 'classnames';
 import { isAndroid, isIos } from './utils/platform';
@@ -515,7 +515,7 @@ var Select = function(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ _jsx(TextFieldBase, {
+                    /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

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

@@ -281,7 +281,7 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-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", "label", "inputProps", "inputRef", "defaultValue", "value", "onFocus", "onBlur", "inputComponent", "prefix", "startIcon", "endIcon", "endIconOverlay", "shrinkLabel", "multiline", "focus", "fieldRef", "maxLength", "id",
         "autoComplete", "fullWidth"]);
     var id = useAriaId(idProp);
@@ -433,6 +433,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+export { TextFieldBase };
 var useSuggestionsStyles = createUseStyles(function() {
     return {
         menuItem: {
@@ -465,7 +466,7 @@ var useSuggestionsStyles = createUseStyles(function() {
 var Autosuggest = /*#__PURE__*/ React.lazy(function() {
     return import(/* 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"
     ]);
     var ref1 = _slicedToArray(React.useState([]), 2), suggestions = ref1[0], setSuggestions = ref1[1];
@@ -478,7 +479,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
     return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+        fallback: /*#__PURE__*/ _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.
@@ -511,7 +512,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }
             }),
             renderInputComponent: function(inputProps) {
-                /*#__PURE__*/ return _jsx(TextFieldBaseComponent, _objectSpread({
+                /*#__PURE__*/ return _jsx(TextFieldBase, _objectSpread({
                 }, inputProps, {
                     inputRef: combineRefs(inputRef, props.inputRef, ref)
                 }));
@@ -551,10 +552,10 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }));
             }
         })
-    }) : /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+    }) : /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
     }, props, {
         id: id,
         ref: ref
     }));
 });
-export default TextFieldBase;
+export { TextFieldBaseAutosuggest };

package/dist-es/text-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { combineRefs } from './utils/common';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -105,7 +105,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onClick: onPress,
         inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.16.0",
+    "version": "10.17.0",
     "license": "MIT",
     "repository": {
         "type": "git",