@telefonica/mistica 11.2.0 → 11.4.0

package/dist/dialog.js

@@ -58,20 +58,6 @@ function _classCallCheck(instance, Constructor) {
         throw new TypeError("Cannot call a class as a function");
     }
 }
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -189,46 +175,46 @@ function _createSuper(Derived) {
     };
 }
 var animationsSupported = function animationsSupported(platformOverrides) {
-    return !(0, _platform).isOldChrome(platformOverrides) && process.env.NODE_ENV !== 'test' && !(0, _platform).isRunningAcceptanceTest(platformOverrides);
+    return !(0, _platform).isOldChrome(platformOverrides) && process.env.NODE_ENV !== "test" && !(0, _platform).isRunningAcceptanceTest(platformOverrides);
 };
 /** Must be higher than the fixed footer's z-index */ var Z_INDEX = 26;
 var useStylesModalDialog = (0, _jss).createUseStyles(function(theme) {
     var _obj;
     return _obj = {
         wrapper: {
-            position: 'relative',
+            position: "relative",
             zIndex: Z_INDEX
         },
         modalOpacityLayer: {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'fixed',
+            display: "flex",
+            flexDirection: "column",
+            position: "fixed",
             top: 0,
             right: 0,
             bottom: 0,
             left: 0,
             zIndex: Z_INDEX,
-            alignItems: 'center',
-            justifyContent: 'center',
+            alignItems: "center",
+            justifyContent: "center",
             minHeight: 0,
             minWidth: 0,
             background: theme.colors.backgroundOverlay,
-            animation: '$fadeIn .2s ease-in-out',
-            transition: 'opacity .2s ease-in-out',
-            '&.closed': {
+            animation: "$fadeIn .2s ease-in-out",
+            transition: "opacity .2s ease-in-out",
+            "&.closed": {
                 opacity: 0
             }
         },
-        '@keyframes fadeIn': {
-            '0%': {
+        "@keyframes fadeIn": {
+            "0%": {
                 opacity: 0
             },
-            '100%': {
+            "100%": {
                 opacity: 1
             }
         },
         modalCloseButtonContainer: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             right: 0,
             padding: 24
@@ -236,51 +222,51 @@ var useStylesModalDialog = (0, _jss).createUseStyles(function(theme) {
         modalContent: {
             background: theme.colors.background,
             borderRadius: 4,
-            animation: '$fadeScale .2s ease-in-out',
-            willChange: 'transform, opacity',
-            transition: 'opacity .2s ease-in-out, transform .2s ease-in-out',
-            '&.closed': {
+            animation: "$fadeScale .2s ease-in-out",
+            willChange: "transform, opacity",
+            transition: "opacity .2s ease-in-out, transform .2s ease-in-out",
+            "&.closed": {
                 opacity: 0,
-                transform: 'scale(.8)'
+                transform: "scale(.8)"
             }
         }
     }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
         modalCloseButtonContainer: {
             padding: 16
         }
-    }), _defineProperty(_obj, '@keyframes fadeScale', {
-        '0%': {
+    }), _defineProperty(_obj, "@keyframes fadeScale", {
+        "0%": {
             opacity: 0,
-            transform: 'scale(.8)'
+            transform: "scale(.8)"
         },
-        '100%': {
+        "100%": {
             opacity: 1,
-            transform: 'scale(1)'
+            transform: "scale(1)"
         }
     }), _obj;
 });
 var useDialogStyles = (0, _jss).createUseStyles(function(theme) {
     return _defineProperty({
         dialogContainer: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
             width: 680,
             padding: 40,
             minHeight: 192,
-            maxHeight: 'calc(100vh - 64px)'
+            maxHeight: "calc(100vh - 64px)"
         },
         dialogContent: {
             flex: 1,
             minHeight: 0,
-            overflowY: 'auto'
+            overflowY: "auto"
         }
     }, theme.mq.tabletOrSmaller, {
         dialogContainer: {
             minHeight: 298,
-            width: 'calc(100vw - 48px)',
-            margin: 'auto',
-            padding: '48px 24px 24px'
+            width: "calc(100vw - 48px)",
+            margin: "auto",
+            padding: "48px 24px 24px"
         }
     });
 });
@@ -295,11 +281,11 @@ var Dialog = function Dialog(props) {
     var mainButtonProps = {
         onPress: handleAccept ? handleAccept : function() {},
         dataAttributes: {
-            testid: 'dialog-accept-button'
+            testid: "dialog-accept-button"
         },
         children: acceptText
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: (0, _classnames).default(classes.dialogContainer, className),
         children: [
             icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -336,7 +322,7 @@ var Dialog = function Dialog(props) {
                             tabIndex: 2,
                             onPress: handleCancel,
                             dataAttributes: {
-                                testid: 'dialog-cancel-button'
+                                testid: "dialog-cancel-button"
                             },
                             children: cancelText
                         })
@@ -344,7 +330,7 @@ var Dialog = function Dialog(props) {
                 })
             })
         ]
-    }));
+    });
 };
 var showNativeDialog = function showNativeDialog(param) {
     var showCancel = param.showCancel, message = param.message, title = param.title, acceptText = param.acceptText, cancelText = param.cancelText, onAccept = param.onAccept, onCancel = param.onCancel;
@@ -395,7 +381,7 @@ var ModalDialog = function ModalDialog(props) {
     // Closing the dialog before the animation has ended leaves the component in a broken state
     // To avoid race conditions, we don't allow closing the dialog until the animation has ended
     // See onAnimationEnd handler
-    var canCloseRef = React.useRef(process.env.NODE_ENV === 'test');
+    var canCloseRef = React.useRef(process.env.NODE_ENV === "test");
     if (!context) {
         throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     }
@@ -439,7 +425,7 @@ var ModalDialog = function ModalDialog(props) {
         handleClose
     ]);
     var addKeyDownListener = React.useCallback(function() {
-        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener("keydown", handleKeyDown);
     }, [
         handleKeyDown
     ]);
@@ -461,7 +447,7 @@ var ModalDialog = function ModalDialog(props) {
             props.onCloseTransitionEnd();
         }
         return function() {
-            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener("keydown", handleKeyDown);
         };
     }, [
         addKeyDownListener,
@@ -568,102 +554,80 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
         };
         return _this;
     }
-    _createClass(DialogRoot1, [
-        {
-            key: "componentDidMount",
-            value: function componentDidMount() {
-                dialogRootInstances++;
-                if (dialogRootInstances === 1) {
-                    dialogInstance = this;
-                    window.addEventListener('popstate', this.handleBack);
-                }
-            }
-        },
-        {
-            key: "componentWillUnmount",
-            value: function componentWillUnmount() {
-                dialogRootInstances--;
-                if (dialogRootInstances === 0) {
-                    dialogInstance = null;
-                    window.removeEventListener('popstate', this.handleBack);
-                }
-            }
-        },
-        {
-            key: "show",
-            value: function show(props) {
-                if (this.state.dialogProps) {
-                    throw Error('Tried to show a dialog on top of another dialog. This functionality is not currently supported.');
-                }
-                // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
-                window.history.pushState(null, document.title, window.location.href);
-                this.setState({
-                    dialogProps: props,
-                    isClosing: false
-                });
-            }
-        },
-        {
-            key: "close",
-            value: function close() {
-                // Here we have to remove the additional entry added to history when we created the Dialog
-                window.history.back();
-            }
-        },
-        {
-            key: "createCancelHandler",
-            value: function createCancelHandler(onCancel) {
-                var _this = this;
-                return function() {
-                    if (onCancel) {
-                        _this.callback = function() {
-                            return onCancel();
-                        };
-                    }
-                    _this.close();
+    var _proto = DialogRoot1.prototype;
+    _proto.componentDidMount = function componentDidMount() {
+        dialogRootInstances++;
+        if (dialogRootInstances === 1) {
+            dialogInstance = this;
+            window.addEventListener("popstate", this.handleBack);
+        }
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+        dialogRootInstances--;
+        if (dialogRootInstances === 0) {
+            dialogInstance = null;
+            window.removeEventListener("popstate", this.handleBack);
+        }
+    };
+    _proto.show = function show(props) {
+        if (this.state.dialogProps) {
+            throw Error("Tried to show a dialog on top of another dialog. This functionality is not currently supported.");
+        }
+        // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
+        window.history.pushState(null, document.title, window.location.href);
+        this.setState({
+            dialogProps: props,
+            isClosing: false
+        });
+    };
+    _proto.close = function close() {
+        // Here we have to remove the additional entry added to history when we created the Dialog
+        window.history.back();
+    };
+    _proto.createCancelHandler = function createCancelHandler(onCancel) {
+        var _this = this;
+        return function() {
+            if (onCancel) {
+                _this.callback = function() {
+                    return onCancel();
                 };
             }
-        },
-        {
-            key: "createAcceptHandler",
-            value: function createAcceptHandler(onAccept) {
-                var _this = this;
-                return function() {
-                    if (onAccept) {
-                        _this.callback = function() {
-                            return onAccept();
-                        };
-                    }
-                    _this.close();
+            _this.close();
+        };
+    };
+    _proto.createAcceptHandler = function createAcceptHandler(onAccept) {
+        var _this = this;
+        return function() {
+            if (onAccept) {
+                _this.callback = function() {
+                    return onAccept();
                 };
             }
-        },
-        {
-            key: "render",
-            value: function render() {
-                var _state = this.state, isClosing = _state.isClosing, dialogProps = _state.dialogProps;
-                var dialog = null;
-                if (dialogProps && this.state.instanceNumber === 1) {
-                    var onCancel = dialogProps.onCancel, onAccept = dialogProps.onAccept, rest = _objectWithoutProperties(dialogProps, [
-                        "onCancel",
-                        "onAccept"
-                    ]);
-                    dialog = /*#__PURE__*/ (0, _jsxRuntime).jsx(ModalDialog, _objectSpread({
-                        onCancel: this.createCancelHandler(onCancel),
-                        onAccept: this.createAcceptHandler(onAccept),
-                        isClosing: isClosing,
-                        onCloseTransitionEnd: isClosing ? this.handleCloseFinished : undefined
-                    }, rest));
-                }
-                return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
-                    children: [
-                        this.props.children,
-                        dialog
-                    ]
-                }));
-            }
+            _this.close();
+        };
+    };
+    _proto.render = function render() {
+        var _state = this.state, isClosing = _state.isClosing, dialogProps = _state.dialogProps;
+        var dialog = null;
+        if (dialogProps && this.state.instanceNumber === 1) {
+            var onCancel = dialogProps.onCancel, onAccept = dialogProps.onAccept, rest = _objectWithoutProperties(dialogProps, [
+                "onCancel",
+                "onAccept"
+            ]);
+            dialog = /*#__PURE__*/ (0, _jsxRuntime).jsx(ModalDialog, _objectSpread({
+                onCancel: this.createCancelHandler(onCancel),
+                onAccept: this.createAcceptHandler(onAccept),
+                isClosing: isClosing,
+                onCloseTransitionEnd: isClosing ? this.handleCloseFinished : undefined
+            }, rest));
         }
-    ]);
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+            children: [
+                this.props.children,
+                dialog
+            ]
+        });
+    };
     return DialogRoot1;
 }(React.Component);
 exports.default = DialogRoot;
@@ -671,7 +635,7 @@ var showDialog = function showDialog() {
     var showCancel = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     return function(props) {
         if (!dialogInstance) {
-            throw Error('Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)');
+            throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
         }
         dialogInstance.show(_objectSpread({
             showCancel: showCancel

package/dist/divider.js

@@ -61,9 +61,9 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
 var Divider = function Divider() {
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: (0, _classnames).default(classes.divider, _defineProperty({}, classes.dividerInverse, isInverse))
-    }));
+    });
 };
 var _default = Divider;
 exports.default = _default;

package/dist/double-field.js

@@ -97,14 +97,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj;
     return {
         container: (_obj = {
-            display: 'flex',
-            flexDirection: 'row'
+            display: "flex",
+            flexDirection: "row"
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
-            width: '100%'
+            width: "100%"
         }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
             width: function width(param) {
                 var fullWidth = param.fullWidth;
-                return fullWidth ? '100%' : _textFieldComponents.DEFAULT_WIDTH;
+                return fullWidth ? "100%" : _textFieldComponents.DEFAULT_WIDTH;
             }
         }), _obj)
     };
@@ -116,19 +116,19 @@ var DoubleField = function DoubleField(param) {
     });
     var rightWidth;
     var leftWidth;
-    if (layout === '40/60') {
-        leftWidth = '40%';
-        rightWidth = '60%';
-    } else if (layout === '60/40') {
-        leftWidth = '60%';
-        rightWidth = '40%';
+    if (layout === "40/60") {
+        leftWidth = "40%";
+        rightWidth = "60%";
+    } else if (layout === "60/40") {
+        leftWidth = "60%";
+        rightWidth = "40%";
     } else {
-        leftWidth = '50%';
-        rightWidth = '50%';
+        leftWidth = "50%";
+        rightWidth = "50%";
     }
     var renderChildren = function renderChildren() {
         var ref = _slicedToArray(React.Children.toArray(children), 2), first = ref[0], second = ref[1];
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                     paddingRight: 8,
@@ -145,12 +145,12 @@ var DoubleField = function DoubleField(param) {
                     })
                 })
             ]
-        }));
+        });
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: classes.container,
         children: renderChildren()
-    }));
+    });
 };
 var _default = DoubleField;
 exports.default = _default;

package/dist/email-field.js

@@ -88,7 +88,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 // matches strings like: "x@x.x" (where "x" is any string without spaces)
 var RE_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var EmailField = function EmailField(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value1 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? 'email' : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value1 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? "email" : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -105,7 +105,7 @@ var EmailField = function EmailField(_param) {
     var texts = (0, _hooks).useTheme().texts;
     var validate = function validate(value, rawValue) {
         if (!value) {
-            return optional ? '' : texts.formFieldErrorIsMandatory;
+            return optional ? "" : texts.formFieldErrorIsMandatory;
         }
         if (!RE_EMAIL.test(value)) {
             return texts.formEmailError;
@@ -129,11 +129,11 @@ var EmailField = function EmailField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         type: "email",
         inputMode: "email",
         autoComplete: autoComplete
-    })));
+    }));
 };
 var _default = EmailField;
 exports.default = _default;

package/dist/empty-state-card.js

@@ -58,7 +58,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }),
         image: _defineProperty({
             height: 80,
-            display: 'block'
+            display: "block"
         }, theme.mq.tabletOrSmaller, {
             height: 64
         }),
@@ -72,7 +72,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var EmptyStateCard = function EmptyStateCard(param) {
-    var title = param.title, description = param.description, button = param.button, secondaryButton = param.secondaryButton, buttonLink = param.buttonLink, icon = param.icon, imageUrl = param.imageUrl, ariaLabel = param['aria-label'], dataAttributes = param.dataAttributes;
+    var title = param.title, description = param.description, button = param.button, secondaryButton = param.secondaryButton, buttonLink = param.buttonLink, icon = param.icon, imageUrl = param.imageUrl, ariaLabel = param["aria-label"], dataAttributes = param.dataAttributes;
     var ref;
     var colors = (0, _hooks).useTheme().colors;
     var needsButtonLinkAlignment = buttonLink && !button;
@@ -88,10 +88,10 @@ var EmptyStateCard = function EmptyStateCard(param) {
             src: imageUrl
         });
     }
-    if (process.env.NODE_ENV !== 'production' && button && !(button === null || button === void 0 ? void 0 : (ref = button.props) === null || ref === void 0 ? void 0 : ref.small)) {
-        console.error('button property in EmptyStateCard must be a a small Button. Set small prop to true');
+    if (process.env.NODE_ENV !== "production" && button && !(button === null || button === void 0 ? void 0 : (ref = button.props) === null || ref === void 0 ? void 0 : ref.small)) {
+        console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true");
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         dataAttributes: dataAttributes,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
             paddingY: isTabletOrSmaller ? 24 : 40,
@@ -131,7 +131,7 @@ var EmptyStateCard = function EmptyStateCard(param) {
                 })
             })
         })
-    }));
+    });
 };
 var _default = EmptyStateCard;
 exports.default = _default;

package/dist/empty-state.js

@@ -75,30 +75,30 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             maxWidth: 368
         }),
         desktopContainer: {
-            display: 'flex',
-            justifyContent: 'spaceBetween'
+            display: "flex",
+            justifyContent: "spaceBetween"
         },
         desktopContent: _defineProperty({}, theme.mq.desktopOrBigger, {
-            width: '50%'
+            width: "50%"
         }),
         desktopImage: {
             backgroundImage: function backgroundImage(param) {
                 var largeImageUrl = param.largeImageUrl;
                 return "url(".concat(largeImageUrl, ")");
             },
-            backgroundPosition: 'bottom right',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'contain',
+            backgroundPosition: "bottom right",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "contain",
             flex: 1
         },
         largeImage: {
-            width: '100%',
-            display: 'block',
-            aspectRatio: '16/9'
+            width: "100%",
+            display: "block",
+            aspectRatio: "16/9"
         },
         smallImage: _defineProperty({
             height: 128,
-            display: 'block'
+            display: "block"
         }, theme.mq.tabletOrSmaller, {
             height: 112
         }),
@@ -112,7 +112,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var EmptyState = function EmptyState(param) {
-    var title = param.title, description = param.description, button = param.button, buttonLink = param.buttonLink, largeImageUrl = param.largeImageUrl, imageUrl = param.imageUrl, icon = param.icon, ariaLabel = param['aria-label'], dataAttributes = param.dataAttributes;
+    var title = param.title, description = param.description, button = param.button, buttonLink = param.buttonLink, largeImageUrl = param.largeImageUrl, imageUrl = param.imageUrl, icon = param.icon, ariaLabel = param["aria-label"], dataAttributes = param.dataAttributes;
     var colors = (0, _hooks).useTheme().colors;
     var needsButtonLinkAlignment = buttonLink && !button;
     var classes = useStyles({
@@ -143,7 +143,7 @@ var EmptyState = function EmptyState(param) {
     buttons.link = buttonLink;
     if (isTabletOrSmaller) {
         var ref;
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx("section", _objectSpread({
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("section", _objectSpread({
             className: classes.container,
             "aria-label": ariaLabel
         }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
@@ -172,9 +172,9 @@ var EmptyState = function EmptyState(param) {
                     button && /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, _objectSpread({}, buttons))
                 ]
             })
-        })));
+        }));
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         "aria-label": ariaLabel,
         role: "region",
         dataAttributes: dataAttributes,
@@ -217,7 +217,7 @@ var EmptyState = function EmptyState(param) {
                 })
             ]
         })
-    }));
+    });
 };
 var _default = EmptyState;
 exports.default = _default;