@telefonica/mistica 10.14.1 → 10.17.0

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';
@@ -182,7 +182,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker td span.rdtOld': {
                 color: '#999999'
@@ -190,7 +190,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker th': {
                 borderBottom: '1px solid #f9f9f9',
@@ -215,7 +215,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker thead tr:first-of-type th': {
                 cursor: 'pointer'
@@ -291,11 +291,16 @@ var useStyles = createUseStyles(function() {
 });
 var DateTimePicker = function(_param) {
     var withTime = _param.withTime, mode = _param.mode, isValidDate = _param.isValidDate, optional = _param.optional, rest = _objectWithoutProperties(_param, ["withTime", "mode", "isValidDate", "optional"]);
-    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], setShowPicker = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], realSetShowPicker = ref[1];
     var classes = useStyles();
     var ref1 = useTheme(), texts = ref1.texts;
     var fieldRef = React.useRef(null);
     var ref2 = useElementDimensions(), pickerContainerHeight = ref2.height, pickerContainerRef = ref2.ref;
+    var setShowPicker = function(show) {
+        if (!rest.disabled) {
+            realSetShowPicker(show);
+        }
+    };
     var getPickerContainerStyles = function() {
         var ref;
         var ref3 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {
@@ -350,6 +355,7 @@ var DateTimePicker = function(_param) {
             }));
         }
         return(/*#__PURE__*/ _jsx(IconButton, {
+            disabled: rest.disabled,
             "aria-label": "",
             size: 32,
             onPress: function() {
@@ -361,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';
@@ -75,7 +76,7 @@ export { default as DecimalField } from './decimal-field';
 export { default as PasswordField } from './password-field';
 export { default as DoubleField } from './double-field';
 export { default as IbanField } from './iban-field';
-export { useForm } from './form-context';
+export { useForm, useFieldProps } from './form-context';
 // Icons
 // @deprecated use IconCloseRegular instead
 export { default as IconClose } from './icons/icon-close';

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/list.js

@@ -16,7 +16,7 @@ import { useAriaId, useTheme } from './hooks';
 import { useIsInverseVariant } from './theme-variant-context';
 import IconChevron from './icons/icon-chevron';
 import Switch from './switch-component';
-import RadioButton from './radio-button';
+import RadioButton, { useRadioContext } from './radio-button';
 import Checkbox from './checkbox';
 import { Boxed } from './boxed';
 import Divider from './divider';
@@ -84,18 +84,24 @@ function _slicedToArray(arr, i) {
 var useStyles = createUseStyles(function(param) {
     var colors = param.colors, mq = param.mq;
     return {
+        disabled: {
+            opacity: 0.5
+        },
         hover: _defineProperty({
         }, mq.supportsHover, {
             '&:hover': {
                 background: function(param) {
-                    var isInverse = param.isInverse;
-                    return isInverse ? 'initial' : colors.backgroundAlternative;
+                    var isInverse = param.isInverse, disabled = param.disabled;
+                    return isInverse || disabled ? 'initial' : colors.backgroundAlternative;
                 }
             }
         }),
         rowContent: {
             width: '100%',
-            cursor: 'pointer'
+            cursor: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 'default' : 'pointer';
+            }
         },
         hoverDisabled: {
             cursor: 'initial',
@@ -166,8 +172,9 @@ var useStyles = createUseStyles(function(param) {
         }
     };
 });
+var _obj;
 var Content = function(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId;
+    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -188,7 +195,8 @@ var Content = function(param) {
         return(/*#__PURE__*/ _jsx(Box, {
             paddingLeft: 16,
             children: /*#__PURE__*/ _jsx("div", {
-                className: classNames(classes.center, classes.badge),
+                className: classNames(classes.center, classes.badge, _defineProperty({
+                }, classes.disabled, disabled)),
                 children: badge === true ? /*#__PURE__*/ _jsx(Badge, {
                 }) : /*#__PURE__*/ _jsx(Badge, {
                     value: badge
@@ -196,21 +204,49 @@ var Content = function(param) {
             })
         }));
     };
+    var renderRight = function() {
+        switch(type){
+            case 'chevron':
+                return(/*#__PURE__*/ _jsx(Box, {
+                    paddingLeft: 16,
+                    className: classNames(classes.center, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: /*#__PURE__*/ _jsx(IconChevron, {
+                        color: isInverse ? colors.inverse : colors.neutralMedium,
+                        direction: "right"
+                    })
+                }));
+            case 'control':
+                return(/*#__PURE__*/ _jsx("div", {
+                    className: classes.right,
+                    children: right
+                }));
+            case 'custom':
+                return(/*#__PURE__*/ _jsx("div", {
+                    className: classNames(classes.right, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: right
+                }));
+            default:
+                return null;
+        }
+    };
     return(/*#__PURE__*/ _jsxs(Box, {
         paddingY: 16,
         className: classes.content,
         children: [
             asset && /*#__PURE__*/ _jsx(Box, {
                 paddingRight: 16,
-                className: classNames(_defineProperty({
-                }, classes.center, shouldCenter)),
+                className: classNames((_obj = {
+                }, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ _jsx("div", {
                     className: classes.asset,
                     children: asset
                 })
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: classes.rowBody,
+                className: classNames(classes.rowBody, _defineProperty({
+                }, classes.disabled, disabled)),
                 style: {
                     justifyContent: shouldCenter ? 'center' : 'flex-start'
                 },
@@ -255,17 +291,7 @@ var Content = function(param) {
                 })
             }),
             renderBadge(),
-            type === 'chevron' ? /*#__PURE__*/ _jsx(Box, {
-                paddingLeft: 16,
-                className: classes.center,
-                children: /*#__PURE__*/ _jsx(IconChevron, {
-                    color: isInverse ? colors.inverse : colors.neutralMedium,
-                    direction: "right"
-                })
-            }) : right ? /*#__PURE__*/ _jsx("div", {
-                className: classes.right,
-                children: right
-            }) : null
+            renderRight()
         ]
     }));
 };
@@ -295,10 +321,13 @@ var useControlState = function(param) {
 var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = useAriaId();
     var isInverse = useIsInverseVariant();
+    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
+    var radioContext = useRadioContext();
+    var disabled = props.disabled || props.radioValue !== undefined && radioContext.disabled;
     var classes = useStyles({
-        isInverse: isInverse
+        isInverse: isInverse,
+        disabled: disabled
     });
-    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
     var ref1 = _slicedToArray(useControlState(props.switch || props.checkbox || {
     }), 2), isChecked = ref1[0], toggle = ref1[1];
     var renderContent = function(param) {
@@ -316,7 +345,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             type: type,
             right: right,
             extra: extra,
-            labelId: labelId
+            labelId: labelId,
+            disabled: disabled
         });
     };
     var renderTouchableContent = function(props) {
@@ -344,6 +374,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             onPress: props.onPress,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -355,6 +386,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             fullPageOnWebView: props.fullPageOnWebView,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -366,6 +398,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             newTab: props.newTab,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -377,19 +410,22 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             className: classes.dualActionContainer,
             children: [
                 /*#__PURE__*/ _jsx(Touchable, {
+                    disabled: disabled,
                     onPress: props.onPress,
                     role: role,
                     className: classNames(classes.dualActionLeft, classes.hover),
                     children: renderContent({
-                        type: 'custom',
+                        type: 'basic',
                         labelId: titleId
                     })
                 }),
                 /*#__PURE__*/ _jsx(Touchable, {
+                    disabled: disabled,
                     className: classes.dualActionRight,
                     onPress: toggle,
                     dataAttributes: dataAttributes,
                     children: /*#__PURE__*/ _jsx(Control, {
+                        disabled: disabled,
                         name: name,
                         checked: isChecked,
                         "aria-labelledby": titleId,
@@ -402,6 +438,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
         }) : /*#__PURE__*/ _jsx("div", {
             className: classNames(classes.rowContent, classes.hover),
             children: /*#__PURE__*/ _jsx(Control, {
+                disabled: disabled,
                 dataAttributes: dataAttributes,
                 name: name,
                 checked: isChecked,
@@ -412,7 +449,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                         role: role,
                         children: renderContent({
                             labelId: labelId,
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ _jsx(Stack, {
                                 space: "around",
                                 children: control
@@ -442,7 +479,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                     /*#__PURE__*/ return _jsx(Box, {
                         paddingX: 16,
                         children: renderContent({
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ _jsx(Stack, {
                                 space: "around",
                                 children: radio

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.14.1';
+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) {