@telefonica/mistica 12.4.0 → 12.6.0

package/dist-es/dialog.js

@@ -137,11 +137,12 @@ import { isWebViewBridgeAvailable, nativeConfirm, nativeAlert } from "@tef-novum
 import ThemeContext from "./theme-context";
 import { useTheme, useScreenSize } from "./hooks";
 import ButtonLayout from "./button-layout";
-import { Text5, Text3 } from "./text";
+import { Text5, Text4, Text3 } from "./text";
 import { ESC } from "./utils/key-codes";
 import Box from "./box";
 import { isOldChrome, isRunningAcceptanceTest } from "./utils/platform";
 import { useSetModalState } from "./modal-context-provider";
+import { pxToRem } from "./utils/css";
 import Stack from "./stack";
 var animationsSupported = function(platformOverrides) {
     return !isOldChrome(platformOverrides) && process.env.NODE_ENV !== "test" && !isRunningAcceptanceTest(platformOverrides);
@@ -233,7 +234,10 @@ var useDialogStyles = createUseStyles(function(theme) {
         dialogContainer: {
             width: "calc(100vw - 48px)",
             margin: "auto",
-            padding: "48px 24px 24px"
+            padding: function(param) {
+                var isDialog = param.isDialog;
+                return isDialog ? "40px 24px 24px" : 24;
+            }
         }
     });
 });
@@ -241,9 +245,8 @@ var Dialog = function(props) {
     var ref = useTheme(), texts = ref.texts, colors = ref.colors;
     var className = props.className, title = props.title, message = props.message, icon = props.icon, extra = props.extra, _cancelText = props.cancelText, cancelText = _cancelText === void 0 ? texts.dialogCancelButton : _cancelText, _acceptText = props.acceptText, acceptText = _acceptText === void 0 ? texts.dialogAcceptButton : _acceptText, handleCancel = props.onCancel, handleAccept = props.onAccept, _showCancel = props.showCancel, showCancel = _showCancel === void 0 ? false : _showCancel, _destructive = props.destructive, destructive = _destructive === void 0 ? false : _destructive;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var withSecondaryButton = showCancel && !!handleCancel;
     var classes = useDialogStyles({
-        withSecondaryButton: withSecondaryButton
+        isDialog: !!props.forceWeb
     });
     var mainButtonProps = {
         onPress: handleAccept ? handleAccept : function() {},
@@ -257,15 +260,29 @@ var Dialog = function(props) {
         children: [
             icon && /*#__PURE__*/ _jsx(Box, {
                 paddingBottom: 24,
-                children: icon
+                children: /*#__PURE__*/ React.cloneElement(icon, {
+                    size: pxToRem(isTabletOrSmaller ? 40 : 64)
+                })
             }),
             title && /*#__PURE__*/ _jsx(Box, {
                 paddingBottom: 16,
-                children: /*#__PURE__*/ _jsx(Text5, {
+                children: props.forceWeb ? /*#__PURE__*/ _jsx(Text5, {
+                    as: "h2",
+                    children: title
+                }) : /*#__PURE__*/ _jsx(Text4, {
+                    regular: true,
                     as: "h2",
                     children: title
                 })
             }),
+            props.subtitle && /*#__PURE__*/ _jsx(Box, {
+                paddingBottom: 16,
+                children: /*#__PURE__*/ _jsx(Text4, {
+                    regular: true,
+                    as: "h2",
+                    children: props.subtitle
+                })
+            }),
             /*#__PURE__*/ _jsx("div", {
                 className: classes.dialogContent,
                 children: /*#__PURE__*/ _jsxs(Stack, {
@@ -273,7 +290,7 @@ var Dialog = function(props) {
                     children: [
                         /*#__PURE__*/ _jsx(Text3, {
                             color: colors.textSecondary,
-                            light: true,
+                            regular: true,
                             children: message
                         }),
                         extra
@@ -283,6 +300,7 @@ var Dialog = function(props) {
             /*#__PURE__*/ _jsx(Box, {
                 paddingTop: isTabletOrSmaller ? 24 : 32,
                 children: /*#__PURE__*/ _jsxs(ButtonLayout, {
+                    link: props.forceWeb ? props.link : undefined,
                     children: [
                         destructive ? /*#__PURE__*/ _jsx(ButtonDanger, _objectSpread({
                             tabIndex: 1
@@ -396,10 +414,13 @@ var ModalDialog = function(props) {
     ]);
     var handleClose = props.showCancel ? handleCancel : handleAccept;
     var handleOverlayPress = React.useCallback(function(event) {
-        handleClose();
-        event.stopPropagation();
+        if (props.showClose) {
+            handleClose();
+            event.stopPropagation();
+        }
     }, [
-        handleClose
+        handleClose,
+        props.showClose
     ]);
     var handleKeyDown = React.useCallback(function(event) {
         if (event.keyCode === ESC) {
@@ -473,7 +494,7 @@ var ModalDialog = function(props) {
                                 closed: isClosing
                             }),
                             children: [
-                                /*#__PURE__*/ _jsx("div", {
+                                props.showClose && /*#__PURE__*/ _jsx("div", {
                                     className: classes.modalCloseButtonContainer,
                                     children: /*#__PURE__*/ _jsx(IconButton, {
                                         onPress: handleClose,
@@ -611,13 +632,14 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
 }(React.Component);
 export { DialogRoot as default };
 var showDialog = function(param) {
-    var showCancel = param.showCancel, forceWeb = param.forceWeb;
+    var showCancel = param.showCancel, showClose = param.showClose, forceWeb = param.forceWeb;
     return function(props) {
         if (!dialogInstance) {
             throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
         }
         dialogInstance.show(_objectSpread({
             showCancel: showCancel,
+            showClose: showClose,
             forceWeb: forceWeb
         }, props));
     };
@@ -626,17 +648,20 @@ var showDialog = function(param) {
  * Shows alert dialog with supplied props
  */ export var alert = showDialog({
     showCancel: false,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 /**
  * Shows confirm dialog with supplied props
  */ export var confirm = showDialog({
     showCancel: true,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 /**
  * Shows dialog with supplied props
  */ export var dialog = showDialog({
     showCancel: false,
-    forceWeb: true
+    forceWeb: true,
+    showClose: true
 });

package/dist-es/index.js

@@ -90,6 +90,7 @@ export { default as IconSuccessVivo } from "./icons/icon-success-vivo";
 export { SkeletonCircle, SkeletonRow, SkeletonLine, SkeletonRectangle, SkeletonText } from "./skeletons";
 export { default as Circle } from "./circle";
 export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport } from "./hooks";
+export { pxToRem } from "./utils/css";
 export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 export { useDocumentVisibility } from "./utils/document-visibility";
 export { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";

package/dist-es/navigation-bar.js

@@ -355,8 +355,6 @@ var BurgerMenuIcon = function(param) {
 };
 var NAVBAR_ZINDEX = 25;
 var BURGER_ZINDEX = 26;
-var DESKTOP_NAVBAR_HEIGHT = 80;
-var MOBILE_NAVBAR_HEIGHT = 56;
 var BURGER_MENU_ANIMATION_DURATION_MS = 300;
 var useStyles = createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
@@ -383,7 +381,7 @@ var useStyles = createUseStyles(function(theme) {
                 var isInverse = param.isInverse;
                 return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
             },
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             padding: "16px 0",
             borderBottomStyle: "solid",
             borderBottomWidth: function(param) {
@@ -400,11 +398,11 @@ var useStyles = createUseStyles(function(theme) {
                 var isMenuOpen = param.isMenuOpen, isInverse = param.isInverse;
                 return isMenuOpen || isInverse && !theme.isDarkMode ? "transparent" : theme.colors.divider;
             },
-            height: MOBILE_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerMobileHeight,
             padding: "8px 0"
         }),
         section: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             display: "flex",
             alignItems: "center",
             padding: "0 8px",
@@ -425,17 +423,17 @@ var useStyles = createUseStyles(function(theme) {
             }
         },
         spacer: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT
+            height: theme.dimensions.headerDesktopHeight
         }, theme.mq.tabletOrSmaller, {
-            height: MOBILE_NAVBAR_HEIGHT
+            height: theme.dimensions.headerMobileHeight
         }),
         burgerMenu: {
             zIndex: BURGER_ZINDEX,
             position: "fixed",
-            top: MOBILE_NAVBAR_HEIGHT,
+            top: theme.dimensions.headerMobileHeight,
             left: 0,
             right: 0,
-            height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
+            height: "calc(100vh - ".concat(theme.dimensions.headerMobileHeight, "px)"),
             overflowY: "auto",
             background: theme.colors.background,
             boxShadow: function(param) {

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 = "12.4.0";
+export var PACKAGE_VERSION = "12.6.0";

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

@@ -104,8 +104,8 @@ import * as React from "react";
 import { createUseStyles } from "./jss";
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from "./text-field-components";
 import { Text3 } from "./text";
-import { isIos, isRunningAcceptanceTest, isFirefox } from "./utils/platform";
-import { useAriaId, useTheme, useScreenSize } from "./hooks";
+import { isIos, isRunningAcceptanceTest, isFirefox, isSafari } from "./utils/platform";
+import { useAriaId, useTheme, useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import classNames from "classnames";
 import { combineRefs } from "./utils/common";
 var commonInputStyles = function(theme) {
@@ -270,7 +270,10 @@ var useStyles = createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: "baseline",
+            alignSelf: function(param) {
+                var prefixAlignSelf = param.prefixAlignSelf;
+                return prefixAlignSelf;
+            },
             paddingTop: function(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -315,7 +318,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "fullWidth"
     ]);
     var id = useAriaId(idProp);
-    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 _$ref4 = _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 = _$ref4[0], setInputState = _$ref4[1];
     var colors = useTheme().colors;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var _$ref1;
@@ -324,6 +327,18 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // 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 _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
+    useIsomorphicLayoutEffect(function() {
+        /**
+             * Safari check to workaround https://jira.tid.es/browse/WEB-648
+             * For some reason it is super hard to align the prefix text with the input text
+             * and get the same result in chrome and safari
+             *
+             * Using an effect to set the style to avoid problems with SSR
+             */ if (isSafari()) {
+            setPrefixAlignSelf("initial");
+        }
+    }, []);
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -334,7 +349,8 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         prefix: prefix,
         multiline: multiline,
         type: rest.type,
-        disabled: rest.disabled
+        disabled: rest.disabled,
+        prefixAlignSelf: prefixAlignSelf
     });
     React.useEffect(function() {
         if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
@@ -500,10 +516,10 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
         "getSuggestions",
         "id"
     ]);
-    var _$ref5 = _slicedToArray(React.useState([]), 2), suggestions = _$ref5[0], setSuggestions = _$ref5[1];
+    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
     var inputRef = React.useRef(null);
     var classes = useSuggestionsStyles();
-    var _$ref4 = useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
+    var _$ref5 = useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
     var id = useAriaId(idProp);
     var autoSuggestId = useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {

package/dist-es/text-link.js

@@ -54,6 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import { jsx as _jsx } from "react/jsx-runtime";
+// Specs: https://www.figma.com/file/koROdh3HpEPG2O8jG52Emh/Buttons-Component-Specs?node-id=0%3A1
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
@@ -69,7 +70,7 @@ var useStyles = createUseStyles(function(param) {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
-            display: "inline-block",
+            display: "inline",
             color: colors.textLink,
             wordBreak: "break-word",
             cursor: "pointer"
@@ -123,6 +124,7 @@ var TextLink = function(_param) {
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+        as: props.onPress ? "a" : undefined,
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),

package/dist-es/theme.js

@@ -204,7 +204,8 @@ export var getTexts = function(locale) {
     }
 };
 export var dimensions = {
-    headerMobileHeight: 56
+    headerMobileHeight: 56,
+    headerDesktopHeight: 80
 };
 export var mediaQueriesConfig = {
     tabletMinWidth: 768,