@telefonica/mistica 11.2.0 → 11.4.0

package/dist/text-field-base.js

@@ -142,11 +142,11 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 var commonInputStyles = function commonInputStyles(theme) {
     return {
-        background: 'none',
+        background: "none",
         border: 0,
         outline: 0,
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
+        fontSize: "inherit",
+        lineHeight: "inherit",
         paddingRight: function paddingRight(param) {
             var endIcon = param.endIcon;
             return endIcon ? 0 : 16;
@@ -163,48 +163,48 @@ var commonInputStyles = function commonInputStyles(theme) {
         },
         /* Workaround to avoid huge bullets on ios devices (-apple-system font related) */ fontFamily: function fontFamily(param) {
             var type = param.type;
-            return type === 'password' && (0, _platform).isIos(theme.platformOverrides) && !(0, _platform).isRunningAcceptanceTest(theme.platformOverrides) ? 'arial' : 'inherit';
+            return type === "password" && (0, _platform).isIos(theme.platformOverrides) && !(0, _platform).isRunningAcceptanceTest(theme.platformOverrides) ? "arial" : "inherit";
         },
         color: theme.colors.textPrimary,
         caretColor: theme.colors.controlActivated,
-        width: '100%',
+        width: "100%",
         // Seems like 'display: flex' is causing issues on firefox and the input takes over the whole space https://stackoverflow.com/questions/43314921/strange-input-widths-in-firefox-vs-chrome
         minWidth: 0,
-        textOverflow: 'ellipsis',
-        '&::placeholder ': {
+        textOverflow: "ellipsis",
+        "&::placeholder ": {
             opacity: 0,
-            transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'
+            transition: "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
         },
-        '&:focus': {
-            '&::placeholder ': {
+        "&:focus": {
+            "&::placeholder ": {
                 opacity: 0.5
             }
         },
-        boxShadow: 'none'
+        boxShadow: "none"
     };
 };
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;
     return {
         container: {
-            display: 'flex',
-            flexDirection: 'column',
+            display: "flex",
+            flexDirection: "column",
             minWidth: 96
         },
         fullWidth: {
-            width: '100%',
-            display: 'inline-flex',
+            width: "100%",
+            display: "inline-flex",
             alignSelf: function alignSelf(param) {
                 var prefix = param.prefix;
-                return prefix ? 'baseline' : 'initial';
+                return prefix ? "baseline" : "initial";
             },
-            '& > div': {
-                width: '100%',
-                display: 'inline-flex'
+            "& > div": {
+                width: "100%",
+                display: "inline-flex"
             }
         },
         textArea: _objectSpread((_obj = {
-            resize: 'none',
+            resize: "none",
             marginTop: function marginTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -214,9 +214,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 24 : 16;
             }
-        }), _defineProperty(_obj, "paddingBottom", '8px'), _obj), commonInputStyles(theme)),
+        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), commonInputStyles(theme)),
         input: _objectSpread((_obj1 = {
-            position: 'relative',
+            position: "relative",
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -229,80 +229,80 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }), _defineProperty(_obj1, "paddingBottom", function(param) {
             var hasLabel = param.hasLabel;
             return hasLabel ? 8 : 16;
-        }), _defineProperty(_obj1, "height", '100%'), _obj1), commonInputStyles(theme), {
-            WebkitAppearance: 'none',
-            '&::-webkit-search-cancel-button': {
-                WebkitAppearance: 'none'
+        }), _defineProperty(_obj1, "height", "100%"), _obj1), commonInputStyles(theme), {
+            WebkitAppearance: "none",
+            "&::-webkit-search-cancel-button": {
+                WebkitAppearance: "none"
             },
-            '&::-webkit-search-decoration': {
-                WebkitAppearance: 'none'
+            "&::-webkit-search-decoration": {
+                WebkitAppearance: "none"
             },
             // Chrome: make the native icon invisible and stretch it over the whole field so you can click
             // anywhere in the input field to trigger the native datepicker
-            '&::-webkit-calendar-picker-indicator': {
-                position: 'absolute',
+            "&::-webkit-calendar-picker-indicator": {
+                position: "absolute",
                 top: 0,
                 left: -24,
                 right: 0,
                 bottom: 0,
-                width: 'auto',
-                height: 'auto',
+                width: "auto",
+                height: "auto",
                 opacity: 0,
-                color: 'transparent',
-                background: 'transparent'
+                color: "transparent",
+                background: "transparent"
             },
             // Chrome: hide value if not valid or focused
             // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
             // be sure to check that case when updating these styles
             '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: 'transparent',
+                color: "transparent",
                 opacity: 0
             },
             '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: 'transparent',
+                color: "transparent",
                 opacity: 0
             },
             '&[type="datetime-local"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: 'transparent',
+                color: "transparent",
                 opacity: 0
             },
             // Firefox: hide value if not valid or focused
             // Only apply when Firefox, otherwise it breaks styles in safari mobile
             '&[type="month"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
-                color: 'transparent'
+                color: "transparent"
             } : {},
             '&[type="date"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
-                color: 'transparent'
+                color: "transparent"
             } : {},
             '&[type="datetime-local"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
-                color: 'transparent'
+                color: "transparent"
             } : {},
             // Override Chrome input autocomplete styles:
-            '&:-webkit-autofill': {
+            "&:-webkit-autofill": {
                 textFillColor: theme.colors.textPrimary,
                 // The background can not be overriden, but we can delay the background color transition to avoid the change
-                transitionProperty: 'background-color',
-                transitionDelay: '99999s'
+                transitionProperty: "background-color",
+                transitionDelay: "99999s"
             }
         }),
         endIcon: {
             paddingLeft: 8,
             paddingRight: 16,
-            display: 'flex',
-            alignItems: 'center',
-            alignSelf: 'center'
+            display: "flex",
+            alignItems: "center",
+            alignSelf: "center"
         },
         startIcon: {
-            pointerEvents: 'none',
+            pointerEvents: "none",
             paddingLeft: 12,
             paddingRight: 12,
-            display: 'flex',
-            alignItems: 'center',
-            height: '100%',
-            position: 'absolute'
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: 'baseline',
+            alignSelf: "baseline",
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -317,11 +317,11 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             return hasLabel ? 8 : 16;
         }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
             var inputState = param.inputState;
-            return inputState === 'default' ? 0 : 1;
-        }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
+            return inputState === "default" ? 0 : 1;
+        }), _defineProperty(_obj2, "transition", "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"), _obj2)
     };
 });
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
+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",
@@ -347,15 +347,15 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
         "fullWidth"
     ]);
     var id = (0, _hooks).useAriaId(idProp);
-    var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
+    var _$ref3 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref3[0], setInputState = _$ref3[1];
     var colors = (0, _hooks).useTheme().colors;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
-    var ref2;
-    var ref3 = _slicedToArray(React.useState((ref2 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref2 !== void 0 ? ref2 : 0), 2), characterCount = ref3[0], setCharacterCount = ref3[1];
+    var _$ref1;
+    var _$ref2 = _slicedToArray(React.useState((_$ref1 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && _$ref1 !== void 0 ? _$ref1 : 0), 2), characterCount = _$ref2[0], setCharacterCount = _$ref2[1];
     var hasLabel = !!label || !rest.required;
     // this shrinkLabel override is a workaround because I was unable to find a way to hide date
     // and date-time native placeholders when the input is not required
-    var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local' || rest.type === 'month') && !rest.required;
+    var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -369,19 +369,19 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
         disabled: rest.disabled
     });
     React.useEffect(function() {
-        if (inputState !== 'focused' && (value === null || value === void 0 ? void 0 : value.length)) {
+        if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
             setCharacterCount(value.length);
-            setInputState('filled');
+            setInputState("filled");
         }
         if (focus) {
-            setInputState('focused');
+            setInputState("focused");
         }
         if (focus === false && !(value === null || value === void 0 ? void 0 : value.length)) {
             // when textfield is used in selects it doesn't get or lose focus
-            setInputState('default');
+            setInputState("default");
         }
         if (focus === false && (value === null || value === void 0 ? void 0 : value.length)) {
-            setInputState('filled');
+            setInputState("filled");
         }
     }, [
         inputState,
@@ -390,23 +390,23 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
     ]);
     React.useEffect(function() {
         if (rest.autoFocus) {
-            setInputState('focused');
+            setInputState("focused");
         }
     }, [
         rest.autoFocus
     ]);
-    var defaultInputElement = multiline ? 'textarea' : 'input';
+    var defaultInputElement = multiline ? "textarea" : "input";
     // FIXME it should be enough to forward refs. inputRef could be removed
     var inputRefProps = inputComponent ? {
         inputRef: inputRef
     } : {
-        ref: (0, _common).combineRefs(ref4, inputRef)
+        ref: (0, _common).combineRefs(ref, inputRef)
     };
     var props = _objectSpread({}, rest, {
         maxLength: maxLength,
         autoComplete: autoCompleteProp
     }, inputProps);
-    var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+    var isShrinked = shrinkLabel || inputState === "focused" || inputState === "filled";
     var scale = isShrinked ? isTabletOrSmaller ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
     var labelStyle = {
         left: startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION,
@@ -415,7 +415,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
         width: "calc(((100% - ".concat(_textFieldComponents.LABEL_LEFT_POSITION + (startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
         paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
         disabled: rest.disabled,
         helperText: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.HelperText, {
             error: error,
@@ -447,23 +447,23 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
                         id: id,
                         className: multiline ? classes.textArea : classes.input,
                         onFocus: function onFocus1(event) {
-                            setInputState('focused');
+                            setInputState("focused");
                             onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
                         },
                         onBlur: function onBlur1(event) {
                             if (event.target.value.length > 0) {
-                                setInputState('filled');
+                                setInputState("filled");
                             } else {
-                                setInputState('default');
+                                setInputState("default");
                             }
                             onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                         },
                         onChange: function onChange(event) {
                             // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
                             if (maxLength === undefined || event.target.value.length <= maxLength) {
-                                var ref;
+                                var _$ref;
                                 setCharacterCount(event.target.value.length);
-                                (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, event);
+                                (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, event);
                             } else {
                                 event.stopPropagation();
                                 event.preventDefault();
@@ -472,7 +472,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
                         defaultValue: defaultValue,
                         value: value
                     }, error && {
-                        'aria-invalid': true
+                        "aria-invalid": true
                     }))
                 })
             }),
@@ -491,32 +491,32 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref4) {
             }),
             endIconOverlay
         ]
-    }));
+    });
 });
 exports.TextFieldBase = TextFieldBase;
 var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
     return {
         menuItem: {
-            padding: '6px 16px',
+            padding: "6px 16px",
             height: 48,
-            transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-            '& hover': {
-                backgroundColor: 'rgba(0, 0, 0, 0.08)'
+            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+            "& hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.08)"
             },
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer'
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer"
         },
         menuItemSelected: {
-            backgroundColor: 'rgba(0, 0, 0, 0.14)'
+            backgroundColor: "rgba(0, 0, 0, 0.14)"
         },
         suggestionsContainer: {
-            boxShadow: '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
-            backgroundColor: 'white',
-            position: 'absolute',
+            boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+            backgroundColor: "white",
+            position: "absolute",
             zIndex: 2,
-            '& > ul': {
-                listStyleType: 'none',
+            "& > ul": {
+                listStyleType: "none",
                 padding: 0,
                 margin: 0
             }
@@ -525,42 +525,42 @@ var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
 });
 var Autosuggest = /*#__PURE__*/ React.lazy(function() {
     return Promise.resolve().then(function() {
-        return _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ 'react-autosuggest'));
+        return _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest"));
     });
 });
-var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref7) {
+var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
     ]);
-    var ref5 = _slicedToArray(React.useState([]), 2), suggestions = ref5[0], setSuggestions = ref5[1];
+    var _$ref5 = _slicedToArray(React.useState([]), 2), suggestions = _$ref5[0], setSuggestions = _$ref5[1];
     var inputRef = React.useRef(null);
     var classes = useSuggestionsStyles();
-    var ref6 = (0, _hooks).useTheme(), platformOverrides = ref6.platformOverrides, texts = ref6.texts;
+    var _$ref4 = (0, _hooks).useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
     var id = (0, _hooks).useAriaId(idProp);
     var autoSuggestId = (0, _hooks).useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
-        throw Error('Fields with suggestions must be used in controlled mode');
+        throw Error("Fields with suggestions must be used in controlled mode");
     }
     return getSuggestions ? /*#__PURE__*/ (0, _jsxRuntime).jsx(React.Suspense, {
         fallback: /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, props, {
             // This label override while loading is needed in acceptance tests because
             // while the test is typing, the component could be remounted.
             // By hiding the label, we ensure that the test selects the loaded component
-            label: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
+            label: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? "" : props.label,
             autoComplete: "off",
-            ref: ref7,
+            ref: ref,
             id: id
         })),
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Autosuggest, {
             id: autoSuggestId,
             inputProps: _objectSpread({}, props, {
                 id: id,
-                autoComplete: 'off',
+                autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: function onChange(e, param) {
                     var newValue = param.newValue;
-                    var ref;
+                    var _$ref;
                     // hack to mutate event value
                     e.target = _objectSpread({}, e.target, {
                         value: newValue
@@ -568,12 +568,12 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
                     e.currentTarget = _objectSpread({}, e.currentTarget, {
                         value: newValue
                     });
-                    (ref = props.onChange) === null || ref === void 0 ? void 0 : ref.call(props, e);
+                    (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, e);
                 }
             }),
             renderInputComponent: function renderInputComponent(inputProps) {
-                /*#__PURE__*/ return (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, inputProps, {
-                    inputRef: (0, _common).combineRefs(inputRef, props.inputRef, ref7)
+                return /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, inputProps, {
+                    inputRef: (0, _common).combineRefs(inputRef, props.inputRef, ref)
                 }));
             },
             suggestions: suggestions,
@@ -589,7 +589,7 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
             },
             renderSuggestion: function renderSuggestion(suggestion, param) {
                 var isHighlighted = param.isHighlighted;
-                /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", {
+                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     role: "menuitem",
                     className: (0, _classnames).default(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted)),
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
@@ -599,7 +599,7 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
                 });
             },
             renderSuggestionsContainer: function renderSuggestionsContainer(options) {
-                /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", _objectSpread({}, options.containerProps, {
+                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, options.containerProps, {
                     style: {
                         width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
                     },
@@ -611,7 +611,7 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
         })
     }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, props, {
         id: id,
-        ref: ref7
+        ref: ref
     }));
 });
 exports.TextFieldBaseAutosuggest = TextFieldBaseAutosuggest;

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

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