@telefonica/mistica 10.14.1 → 10.17.0

package/dist/list.js

@@ -16,7 +16,7 @@ var _hooks = require("./hooks");
 var _themeVariantContext = require("./theme-variant-context");
 var _iconChevron = _interopRequireDefault(require("./icons/icon-chevron"));
 var _switchComponent = _interopRequireDefault(require("./switch-component"));
-var _radioButton = _interopRequireDefault(require("./radio-button"));
+var _radioButton = _interopRequireWildcard(require("./radio-button"));
 var _checkbox = _interopRequireDefault(require("./checkbox"));
 var _boxed = require("./boxed");
 var _divider = _interopRequireDefault(require("./divider"));
@@ -113,18 +113,24 @@ function _slicedToArray(arr, i) {
 var useStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors, mq = param.mq;
     return {
+        disabled: {
+            opacity: 0.5
+        },
         hover: _defineProperty({
         }, mq.supportsHover, {
             '&:hover': {
                 background: function background(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 cursor(param) {
+                var disabled = param.disabled;
+                return disabled ? 'default' : 'pointer';
+            }
         },
         hoverDisabled: {
             cursor: 'initial',
@@ -195,8 +201,9 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         }
     };
 });
+var _obj;
 var Content = function Content(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 = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -217,7 +224,8 @@ var Content = function Content(param) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
             paddingLeft: 16,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: (0, _classnames).default(classes.center, classes.badge),
+                className: (0, _classnames).default(classes.center, classes.badge, _defineProperty({
+                }, classes.disabled, disabled)),
                 children: badge === true ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_badge.default, {
                 }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_badge.default, {
                     value: badge
@@ -225,21 +233,49 @@ var Content = function Content(param) {
             })
         }));
     };
+    var renderRight = function renderRight() {
+        switch(type){
+            case 'chevron':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                    paddingLeft: 16,
+                    className: (0, _classnames).default(classes.center, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                        color: isInverse ? colors.inverse : colors.neutralMedium,
+                        direction: "right"
+                    })
+                }));
+            case 'control':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.right,
+                    children: right
+                }));
+            case 'custom':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: (0, _classnames).default(classes.right, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: right
+                }));
+            default:
+                return null;
+        }
+    };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
         paddingY: 16,
         className: classes.content,
         children: [
             asset && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
-                className: (0, _classnames).default(_defineProperty({
-                }, classes.center, shouldCenter)),
+                className: (0, _classnames).default((_obj = {
+                }, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.asset,
                     children: asset
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.rowBody,
+                className: (0, _classnames).default(classes.rowBody, _defineProperty({
+                }, classes.disabled, disabled)),
                 style: {
                     justifyContent: shouldCenter ? 'center' : 'flex-start'
                 },
@@ -284,17 +320,7 @@ var Content = function Content(param) {
                 })
             }),
             renderBadge(),
-            type === 'chevron' ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                paddingLeft: 16,
-                className: classes.center,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
-                    color: isInverse ? colors.inverse : colors.neutralMedium,
-                    direction: "right"
-                })
-            }) : right ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.right,
-                children: right
-            }) : null
+            renderRight()
         ]
     }));
 };
@@ -324,10 +350,13 @@ var useControlState = function useControlState(param) {
 var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = (0, _hooks).useAriaId();
     var isInverse = (0, _themeVariantContext).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 = (0, _radioButton).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 renderContent(param) {
@@ -345,7 +374,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             type: type,
             right: right,
             extra: extra,
-            labelId: labelId
+            labelId: labelId,
+            disabled: disabled
         });
     };
     var renderTouchableContent = function renderTouchableContent(props) {
@@ -373,6 +403,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             onPress: props.onPress,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -384,6 +415,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             fullPageOnWebView: props.fullPageOnWebView,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -395,6 +427,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             newTab: props.newTab,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -406,19 +439,22 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             className: classes.dualActionContainer,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    disabled: disabled,
                     onPress: props.onPress,
                     role: role,
                     className: (0, _classnames).default(classes.dualActionLeft, classes.hover),
                     children: renderContent({
-                        type: 'custom',
+                        type: 'basic',
                         labelId: titleId
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    disabled: disabled,
                     className: classes.dualActionRight,
                     onPress: toggle,
                     dataAttributes: dataAttributes,
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Control, {
+                        disabled: disabled,
                         name: name,
                         checked: isChecked,
                         "aria-labelledby": titleId,
@@ -431,6 +467,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
         }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Control, {
+                disabled: disabled,
                 dataAttributes: dataAttributes,
                 name: name,
                 checked: isChecked,
@@ -441,7 +478,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                         role: role,
                         children: renderContent({
                             labelId: labelId,
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
                                 space: "around",
                                 children: control
@@ -471,7 +508,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                     /*#__PURE__*/ return (0, _jsxRuntime).jsx(_box.default, {
                         paddingX: 16,
                         children: renderContent({
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
                                 space: "around",
                                 children: radio

package/dist/list.js.flow

@@ -15,6 +15,7 @@ declare type CommonProps = {
   role?: string,
   extra?: React.Node,
   dataAttributes?: DataAttributes,
+  disabled?: boolean,
 };
 declare type ControlProps = {
   name?: string,

package/dist/menu.d.ts

@@ -6,7 +6,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
     ref: (element: HTMLElement | null) => void;
-    onPress: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onPress: () => void;
     isMenuOpen: boolean;
 };
 export declare type MenuProps = {

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/menu.js.flow

@@ -8,7 +8,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
   ref: (element: HTMLElement | null) => void,
-  onPress: (event: SyntheticMouseEvent<> | SyntheticKeyboardEvent<>) => void,
+  onPress: () => void,
   isMenuOpen: boolean,
 };
 export type MenuProps = {

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.14.1';
+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/radio-button.js

@@ -137,6 +137,7 @@ var useRadioButtonStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors, isIos = param.isIos;
     return {
         outerCircle: {
+            cursor: 'pointer',
             flexShrink: 0,
             width: 20,
             height: 20,
@@ -169,11 +170,11 @@ var useRadioButtonStyles = (0, _jss).createUseStyles(function(param) {
             transform: 'scale(1)'
         },
         radioButton: {
-            cursor: 'default',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.5 : 1;
-            }
+            cursor: 'default'
+        },
+        disabled: {
+            opacity: 0.5,
+            cursor: 'default'
         }
     };
 });
@@ -192,6 +193,7 @@ var useRadioContext = function useRadioContext() {
     return React.useContext(RadioContext);
 };
 exports.useRadioContext = useRadioContext;
+var _obj;
 var RadioButton = function RadioButton(_param) {
     var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, [
         "value",
@@ -203,7 +205,6 @@ var RadioButton = function RadioButton(_param) {
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;
     var classes = useRadioButtonStyles({
-        disabled: disabled,
         checked: checked
     });
     var ref2 = (0, _hooks).useTheme(), isIos = ref2.isIos;
@@ -230,8 +231,8 @@ var RadioButton = function RadioButton(_param) {
         }
     };
     var radio = /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: (0, _classnames).default(classes.outerCircle, _defineProperty({
-        }, classes.outerCircleChecked, checked)),
+        className: (0, _classnames).default(classes.outerCircle, (_obj = {
+        }, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: !isIos && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: (0, _classnames).default(classes.innerCircle, _defineProperty({
             }, classes.innerCircleChecked, checked))
@@ -268,7 +269,10 @@ var RadioButton = function RadioButton(_param) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                     regular: true,
                     as: "div",
-                    children: rest.children
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: rest.children
+                    })
                 })
             ]
         })

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");
@@ -111,10 +111,6 @@ var _obj, _obj1;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         selectContainer: (_obj = {
-            cursor: function cursor(param) {
-                var disabled = param.disabled;
-                return disabled ? 'auto' : 'pointer';
-            },
             position: 'relative',
             outline: 0
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
@@ -145,24 +141,17 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: '100%',
             height: '100%',
             textOverflow: 'ellipsis',
-            '&:disabled': {
-                color: theme.colors.textDisabled
-            },
             appearance: 'none',
             cursor: function cursor(param) {
                 var disabled = param.disabled;
-                return disabled ? 'inherit' : 'pointer';
+                return disabled ? 'default' : 'pointer';
             }
         },
         arrowDown: {
             position: 'absolute',
             right: 16,
             top: 'calc(50% - 10px)',
-            pointerEvents: 'none',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            pointerEvents: 'none'
         },
         selectText: {
             position: 'absolute',
@@ -175,9 +164,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return label ? 27 : 17;
             },
             fontSize: 16,
-            color: function color(param) {
+            color: theme.colors.textPrimary,
+            opacity: function opacity(param) {
                 var disabled = param.disabled;
-                return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
+                return disabled ? 0.5 : 1;
             },
             maxWidth: '100%',
             textOverflow: 'ellipsis',
@@ -485,7 +475,6 @@ var Select = function Select(param) {
                 error: error,
                 forId: inputId,
                 inputState: isFocused ? 'focused' : ((ref15 = value !== null && value !== void 0 ? value : valueState) !== null && ref15 !== void 0 ? ref15 : (ref11 = inputRef.current) === null || ref11 === void 0 ? void 0 : ref11.value) ? 'filled' : 'default',
-                disabled: disabled,
                 optional: optional,
                 children: label
             }),
@@ -559,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'
                         },