@telefonica/mistica 12.5.0 → 12.6.0

package/dist/dialog.d.ts

@@ -1,34 +1,49 @@
 import * as React from 'react';
+import { ButtonLink } from './button';
+import type { RendersNullableElement } from './utils/types';
 interface BaseDialogProps {
     className?: string;
     title?: string;
     icon?: React.ReactElement;
     message: string;
-    cancelText?: string;
     acceptText?: string;
-    onCancel?: () => void;
     onAccept?: () => void;
-    showCancel?: boolean;
     destructive?: boolean;
 }
 interface AlertProps extends BaseDialogProps {
+    subtitle?: undefined;
     extra?: undefined;
     forceWeb?: undefined;
+    showClose?: boolean;
+    showCancel?: never;
+    cancelText?: never;
+    onCancel?: never;
 }
 interface ConfirmProps extends BaseDialogProps {
+    subtitle?: undefined;
     extra?: undefined;
     forceWeb?: undefined;
+    showClose?: boolean;
+    showCancel?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
 }
 interface ExtendedDialogProps extends BaseDialogProps {
-    extra: React.ReactNode;
+    subtitle?: string;
+    extra?: React.ReactNode;
     forceWeb?: boolean;
+    showClose?: boolean;
+    showCancel?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
+    link?: RendersNullableElement<typeof ButtonLink>;
 }
 declare type DialogProps = AlertProps | ConfirmProps | ExtendedDialogProps;
 declare type DialogRootProps = {
     children?: React.ReactNode;
 };
 declare type DialogRootState = {
-    dialogProps: BaseDialogProps | null;
+    dialogProps: DialogProps | null;
     isClosing: boolean;
     instanceNumber: number;
 };

package/dist/dialog.js

@@ -21,6 +21,7 @@ var _keyCodes = require("./utils/key-codes");
 var _box = _interopRequireDefault(require("./box"));
 var _platform = require("./utils/platform");
 var _modalContextProvider = require("./modal-context-provider");
+var _css = require("./utils/css");
 var _stack = _interopRequireDefault(require("./stack"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -265,7 +266,10 @@ var useDialogStyles = (0, _jss).createUseStyles(function(theme) {
         dialogContainer: {
             width: "calc(100vw - 48px)",
             margin: "auto",
-            padding: "48px 24px 24px"
+            padding: function padding(param) {
+                var isDialog = param.isDialog;
+                return isDialog ? "40px 24px 24px" : 24;
+            }
         }
     });
 });
@@ -273,9 +277,8 @@ var Dialog = function Dialog(props) {
     var ref = (0, _hooks).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 = (0, _hooks).useScreenSize().isTabletOrSmaller;
-    var withSecondaryButton = showCancel && !!handleCancel;
     var classes = useDialogStyles({
-        withSecondaryButton: withSecondaryButton
+        isDialog: !!props.forceWeb
     });
     var mainButtonProps = {
         onPress: handleAccept ? handleAccept : function() {},
@@ -289,15 +292,29 @@ var Dialog = function Dialog(props) {
         children: [
             icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingBottom: 24,
-                children: icon
+                children: /*#__PURE__*/ React.cloneElement(icon, {
+                    size: (0, _css).pxToRem(isTabletOrSmaller ? 40 : 64)
+                })
             }),
             title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingBottom: 16,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text5, {
+                children: props.forceWeb ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text5, {
+                    as: "h2",
+                    children: title
+                }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                    regular: true,
                     as: "h2",
                     children: title
                 })
             }),
+            props.subtitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingBottom: 16,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                    regular: true,
+                    as: "h2",
+                    children: props.subtitle
+                })
+            }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.dialogContent,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
@@ -305,7 +322,7 @@ var Dialog = function Dialog(props) {
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                             color: colors.textSecondary,
-                            light: true,
+                            regular: true,
                             children: message
                         }),
                         extra
@@ -315,6 +332,7 @@ var Dialog = function Dialog(props) {
             /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingTop: isTabletOrSmaller ? 24 : 32,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_buttonLayout.default, {
+                    link: props.forceWeb ? props.link : undefined,
                     children: [
                         destructive ? /*#__PURE__*/ (0, _jsxRuntime // eslint-disable-line jsx-a11y/tabindex-no-positive
                         ).jsx(_button.ButtonDanger, _objectSpread({
@@ -428,10 +446,13 @@ var ModalDialog = function ModalDialog(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 === _keyCodes.ESC) {
@@ -505,7 +526,7 @@ var ModalDialog = function ModalDialog(props) {
                                 closed: isClosing
                             }),
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                props.showClose && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                                     className: classes.modalCloseButtonContainer,
                                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
                                         onPress: handleClose,
@@ -643,29 +664,33 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
 }(React.Component);
 exports.default = DialogRoot;
 var showDialog = function showDialog(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));
     };
 };
 var alert = showDialog({
     showCancel: false,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 exports.alert = alert;
 var confirm = showDialog({
     showCancel: true,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 exports.confirm = confirm;
 var dialog = showDialog({
     showCancel: false,
-    forceWeb: true
+    forceWeb: true,
+    showClose: true
 });
 exports.dialog = dialog;

package/dist/dialog.js.flow

@@ -1,32 +1,49 @@
 // @flow
 
 import * as React from "react";
+import { ButtonLink } from "./button";
+import type { RendersNullableElement } from "./utils/types";
 declare type BaseDialogProps = {
   className?: string,
   title?: string,
   icon?: React.Element<any>,
   message: string,
-  cancelText?: string,
   acceptText?: string,
-  onCancel?: () => void,
   onAccept?: () => void,
-  showCancel?: boolean,
   destructive?: boolean,
 };
-declare type AlertProps = { ...$Exact<BaseDialogProps> };
-declare type ConfirmProps = { ...$Exact<BaseDialogProps> };
+declare type AlertProps = {
+  ...$Exact<BaseDialogProps>,
+  showClose?: boolean,
+  showCancel?: empty,
+  cancelText?: empty,
+  onCancel?: empty,
+};
+declare type ConfirmProps = {
+  ...$Exact<BaseDialogProps>,
+  showClose?: boolean,
+  showCancel?: boolean,
+  cancelText?: string,
+  onCancel?: () => void,
+};
 declare type ExtendedDialogProps = {
   ...$Exact<BaseDialogProps>,
 
-  extra: React.Node,
+  subtitle?: string,
+  extra?: React.Node,
   forceWeb?: boolean,
+  showClose?: boolean,
+  showCancel?: boolean,
+  cancelText?: string,
+  onCancel?: () => void,
+  link?: RendersNullableElement<typeof ButtonLink>,
 };
 declare type DialogProps = AlertProps | ConfirmProps | ExtendedDialogProps;
 declare type DialogRootProps = {
   children?: React.Node,
 };
 declare type DialogRootState = {
-  dialogProps: BaseDialogProps | null,
+  dialogProps: DialogProps | null,
   isClosing: boolean,
   instanceNumber: number,
 };

package/dist/index.d.ts

@@ -91,6 +91,7 @@ export { SkeletonCircle, SkeletonRow, SkeletonLine, SkeletonRectangle, SkeletonT
 export { default as Circle } from './circle';
 export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport, } from './hooks';
 export type { ThemeConfig, ColorScheme, EventFormat } from './theme';
+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/index.js

@@ -854,6 +854,12 @@ Object.defineProperty(exports, "useIsInViewport", {
         return _hooks.useIsInViewport;
     }
 });
+Object.defineProperty(exports, "pxToRem", {
+    enumerable: true,
+    get: function() {
+        return _css.pxToRem;
+    }
+});
 Object.defineProperty(exports, "TrackingConfig", {
     enumerable: true,
     get: function() {
@@ -10868,6 +10874,7 @@ var _iconSuccessVivo = _interopRequireDefault(require("./icons/icon-success-vivo
 var _skeletons = require("./skeletons");
 var _circle = _interopRequireDefault(require("./circle"));
 var _hooks = require("./hooks");
+var _css = require("./utils/css");
 var _analytics = require("./utils/analytics");
 var _documentVisibility = require("./utils/document-visibility");
 var _themeVariantContext = require("./theme-variant-context");

package/dist/index.js.flow

@@ -154,6 +154,7 @@ declare export {
   useIsInViewport,
 } from "./hooks";
 export type { ThemeConfig, ColorScheme, EventFormat } from "./theme";
+declare export { pxToRem } from "./utils/css";
 declare export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 declare export { useDocumentVisibility } from "./utils/document-visibility";
 declare export {

package/dist/navigation-bar.js

@@ -387,8 +387,6 @@ var BurgerMenuIcon = function BurgerMenuIcon(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 = (0, _jss).createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
@@ -415,7 +413,7 @@ var useStyles = (0, _jss).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 borderBottomWidth(param) {
@@ -432,11 +430,11 @@ var useStyles = (0, _jss).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",
@@ -457,17 +455,17 @@ var useStyles = (0, _jss).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 boxShadow(param) {

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "12.5.0";
+var PACKAGE_VERSION = "12.6.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/text-field-base.js

@@ -302,7 +302,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: "baseline",
+            alignSelf: function alignSelf(param) {
+                var prefixAlignSelf = param.prefixAlignSelf;
+                return prefixAlignSelf;
+            },
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -347,7 +350,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "fullWidth"
     ]);
     var id = (0, _hooks).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 = (0, _hooks).useTheme().colors;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var _$ref1;
@@ -356,6 +359,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];
+    (0, _hooks).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 ((0, _platform).isSafari()) {
+            setPrefixAlignSelf("initial");
+        }
+    }, []);
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -366,7 +381,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)) {
@@ -534,10 +550,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 = (0, _hooks).useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
+    var _$ref5 = (0, _hooks).useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
     var id = (0, _hooks).useAriaId(idProp);
     var autoSuggestId = (0, _hooks).useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {

package/dist/text-link.js

@@ -101,7 +101,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
-            display: "inline-block",
+            display: "inline",
             color: colors.textLink,
             wordBreak: "break-word",
             cursor: "pointer"
@@ -155,6 +155,7 @@ var TextLink = function TextLink(_param) {
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _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: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),

package/dist/theme.d.ts

@@ -40,6 +40,7 @@ declare const TEXTS_ES: {
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {
     headerMobileHeight: number;
+    headerDesktopHeight: number;
 };
 export declare const mediaQueriesConfig: {
     tabletMinWidth: number;
@@ -124,6 +125,7 @@ export declare type Theme = {
     };
     dimensions: {
         headerMobileHeight: number;
+        headerDesktopHeight: number;
     };
     mq: MediaQueries;
     colors: Colors;

package/dist/theme.js

@@ -232,7 +232,8 @@ var getTexts = function getTexts(locale) {
 };
 exports.getTexts = getTexts;
 var dimensions = {
-    headerMobileHeight: 56
+    headerMobileHeight: 56,
+    headerDesktopHeight: 80
 };
 exports.dimensions = dimensions;
 var mediaQueriesConfig = {

package/dist/theme.js.flow

@@ -42,6 +42,7 @@ declare var TEXTS_ES: {
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {
   headerMobileHeight: number,
+  headerDesktopHeight: number,
 };
 declare export var mediaQueriesConfig: {
   tabletMinWidth: number,
@@ -128,6 +129,7 @@ export type Theme = {
   },
   dimensions: {
     headerMobileHeight: number,
+    headerDesktopHeight: number,
   },
   mq: MediaQueries,
   colors: Colors,

package/dist/tooltip.d.ts

@@ -2,12 +2,14 @@ import * as React from 'react';
 declare type Position = 'top' | 'bottom' | 'left' | 'right';
 declare type Props = {
     children?: React.ReactNode;
+    extra?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
     title?: string;
     position?: Position;
     width?: number;
     targetLabel: string;
+    delay?: boolean;
 };
 declare const Tooltip: React.FC<Props>;
 export default Tooltip;