@telefonica/mistica 12.1.0 → 12.2.0

package/README.md

@@ -1,5 +1,5 @@
-<img alt="Mística for Web" src="https://raw.githubusercontent.com/Telefonica/mistica-web/master/img/mistica-web.svg">
-<br>
+![Mistica for Web](img/mistica-web-light.svg#gh-light-mode-only)
+![Mistica for Web](img/mistica-web-dark.svg#gh-dark-mode-only)
 
 React components library for Telefonica Design System ([Mistica](https://github.com/Telefonica/mistica))
 

package/dist/button-group.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 export interface ButtonGroupProps {
     primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
 }
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/button-group.js

@@ -7,6 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -33,6 +34,35 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 var buttonLayoutSpacing = 16;
 var buttonLinkPadding = 12;
 var useStyles = (0, _jss).createUseStyles(function() {
@@ -65,14 +95,15 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var ButtonGroup = function ButtonGroup(param) {
-    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link;
+    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, dataAttributes = param.dataAttributes;
     var anyAction = !!primaryButton || !!secondaryButton || !!link;
     var bothButtons = !!primaryButton && !!secondaryButton;
     var classes = useStyles({
         bothButtons: bothButtons
     });
-    return anyAction ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-        className: (0, _classnames).default(classes.inline, classes.container),
+    return anyAction ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: (0, _classnames).default(classes.inline, classes.container)
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             (primaryButton || secondaryButton) && /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 className: (0, _classnames).default(classes.inline, classes.buttons),
@@ -90,7 +121,7 @@ var ButtonGroup = function ButtonGroup(param) {
                 children: link
             })
         ]
-    }) : null;
+    })) : null;
 };
 var _default = ButtonGroup;
 exports.default = _default;

package/dist/button-group.js.flow

@@ -2,11 +2,12 @@
 
 import * as React from "react";
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 export type ButtonGroupProps = {
   primaryButton?: RendersNullableElement<typeof ButtonPrimary>,
   secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
   link?: RendersNullableElement<typeof ButtonLink>,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
 declare export default typeof ButtonGroup;

package/dist/button-layout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 import type { NullableButtonElement } from './button';
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -8,6 +8,7 @@ declare type ButtonLayoutProps = {
     align?: 'center' | 'left' | 'right' | 'full-width';
     link?: RendersNullableElement<typeof ButtonLink>;
     withMargins?: boolean;
+    dataAttributes?: DataAttributes;
 };
 declare const ButtonLayout: React.FC<ButtonLayoutProps>;
 export default ButtonLayout;

package/dist/button-layout.js

@@ -10,6 +10,7 @@ var _hooks = require("./hooks");
 var _button = require("./button");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -93,6 +94,22 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -212,7 +229,7 @@ var buttonsRange = [
     _button.ButtonPrimary
 ];
 var ButtonLayout = function ButtonLayout(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins, dataAttributes = param1.dataAttributes;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -304,9 +321,10 @@ var ButtonLayout = function ButtonLayout(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -314,7 +332,7 @@ var ButtonLayout = function ButtonLayout(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: classes.margins,
         children: content

package/dist/button-layout.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 import type { NullableButtonElement } from "./button";
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -10,6 +10,7 @@ declare type ButtonLayoutProps = {
   align?: "center" | "left" | "right" | "full-width",
   link?: RendersNullableElement<typeof ButtonLink>,
   withMargins?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonLayout: React.ComponentType<ButtonLayoutProps>;
 declare export default typeof ButtonLayout;

package/dist/button.js

@@ -17,6 +17,7 @@ var _box = _interopRequireDefault(require("./box"));
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
 var _hooks = require("./hooks");
+var _utils = require("./skins/utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,11 +123,15 @@ var BUTTON_MIN_WIDTH = 136;
 exports.BUTTON_MIN_WIDTH = BUTTON_MIN_WIDTH;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
-var SPINNER_MARGIN_PX = 8;
+var ICON_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
 var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
+var ICON_SIZE = 24;
+var SMALL_ICON_SIZE = 20;
+var SPINNER_SIZE = 20;
+var SMALL_SPINNER_SIZE = 16;
 var commonClasses = function commonClasses() {
     return {
         button: {
@@ -134,7 +139,6 @@ var commonClasses = function commonClasses() {
             position: "relative",
             width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: "hidden",
@@ -169,6 +173,9 @@ var commonClasses = function commonClasses() {
             }
         },
         textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
@@ -176,9 +183,7 @@ var commonClasses = function commonClasses() {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
             "& svg": {
-                marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: "bottom",
-                height: "100%"
+                display: "block"
             }
         },
         isLoading: {
@@ -299,6 +304,48 @@ var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
         inverse: dangerButtonStyles(theme)
     });
 });
+var renderButtonContent = function renderButtonContent(param) {
+    var content = param.content, defaultIconSize = param.defaultIconSize, renderText = param.renderText;
+    var childrenArr = (0, _utils).flattenChildren(content);
+    var length = childrenArr.length;
+    var resultChildrenArr = [];
+    var accText = [];
+    var flushAccText = function flushAccText() {
+        resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx(React.Fragment, {
+            children: renderText(accText)
+        }, resultChildrenArr.length));
+        accText = [];
+    };
+    childrenArr.forEach(function(element, idx) {
+        var isFirstChild = idx === 0;
+        var isLastChild = idx === length - 1;
+        var isIconElement = /*#__PURE__*/ React.isValidElement(element);
+        if (isIconElement) {
+            if (accText.length) {
+                flushAccText();
+            }
+            var _size;
+            var sizeInPx = (_size = element.props.size) !== null && _size !== void 0 ? _size : defaultIconSize;
+            resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    marginLeft: isFirstChild ? 0 : ICON_MARGIN_PX,
+                    marginRight: isLastChild ? 0 : ICON_MARGIN_PX
+                },
+                children: /*#__PURE__*/ React.cloneElement(element, {
+                    size: (0, _css).pxToRem(sizeInPx)
+                })
+            }, resultChildrenArr.length));
+        } else {
+            accText.push(element);
+            if (isLastChild) {
+                flushAccText();
+            }
+        }
+    });
+    return resultChildrenArr;
+};
 var Button = function Button(props) {
     var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
     var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
@@ -321,24 +368,6 @@ var Button = function Button(props) {
         shouldRenderSpinner,
         formStatus
     ]);
-    var spinnerSizeRem = (0, _css).pxToRem(props.small ? 16 : 24);
-    var renderText = function renderText(text) {
-        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-            size: 14,
-            lineHeight: 20,
-            weight: "medium",
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        });
-    };
     var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
         if (eventFormat === "google-analytics-4") {
             return {
@@ -354,6 +383,25 @@ var Button = function Button(props) {
             };
         }
     };
+    var defaultIconSize = props.small ? SMALL_ICON_SIZE : ICON_SIZE;
+    var spinnerSizeRem = (0, _css).pxToRem(props.small ? SMALL_SPINNER_SIZE : SPINNER_SIZE);
+    var renderText = function renderText(element) {
+        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+            size: 14,
+            lineHeight: 20,
+            weight: "medium",
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -371,16 +419,24 @@ var Button = function Button(props) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     "aria-hidden": showSpinner ? true : undefined,
                     className: classes.textContent,
-                    children: renderText(props.children)
+                    children: renderButtonContent({
+                        content: props.children,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.loadingFiller,
                     "aria-hidden": true,
                     style: {
                         paddingLeft: spinnerSizeRem,
-                        paddingRight: SPINNER_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
+                        paddingRight: ICON_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
                     },
-                    children: renderText(loadingText)
+                    children: renderButtonContent({
+                        content: loadingText,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                     "aria-hidden": showSpinner ? undefined : true,
@@ -405,7 +461,11 @@ var Button = function Button(props) {
                         }),
                         loadingText ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                             paddingLeft: 8,
-                            children: renderText(loadingText)
+                            children: renderButtonContent({
+                                content: loadingText,
+                                defaultIconSize: defaultIconSize,
+                                renderText: renderText
+                            })
                         }) : null
                     ]
                 })
@@ -482,6 +542,14 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             }),
             "&[disabled]": disabledStyle
         },
+        textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg": {
+                display: "block"
+            }
+        },
         inverse: {
             color: theme.colors.textLinkInverse,
             "&:enabled:active": {
@@ -518,17 +586,27 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             };
         }
     };
+    var renderText = function renderText(element) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            children: props.children
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            className: classes.textContent,
+            children: renderButtonContent({
+                content: props.children,
+                defaultIconSize: SMALL_ICON_SIZE,
+                renderText: renderText
+            })
         }),
         disabled: props.disabled || formStatus === "sending"
     };

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface DialogProps {
+interface BaseDialogProps {
     className?: string;
     title?: string;
     icon?: React.ReactElement;
@@ -11,11 +11,24 @@ interface DialogProps {
     showCancel?: boolean;
     destructive?: boolean;
 }
+interface AlertProps extends BaseDialogProps {
+    extra?: undefined;
+    forceWeb?: undefined;
+}
+interface ConfirmProps extends BaseDialogProps {
+    extra?: undefined;
+    forceWeb?: undefined;
+}
+interface ExtendedDialogProps extends BaseDialogProps {
+    extra: React.ReactNode;
+    forceWeb?: boolean;
+}
+declare type DialogProps = AlertProps | ConfirmProps | ExtendedDialogProps;
 declare type DialogRootProps = {
     children?: React.ReactNode;
 };
 declare type DialogRootState = {
-    dialogProps: DialogProps | null;
+    dialogProps: BaseDialogProps | null;
     isClosing: boolean;
     instanceNumber: number;
 };
@@ -35,9 +48,13 @@ export default class DialogRoot extends React.Component<DialogRootProps, DialogR
 /**
  * Shows alert dialog with supplied props
  */
-export declare const alert: (props: DialogProps) => void;
+export declare const alert: (props: AlertProps) => void;
 /**
  * Shows confirm dialog with supplied props
  */
-export declare const confirm: (props: DialogProps) => void;
+export declare const confirm: (props: ConfirmProps) => void;
+/**
+ * Shows dialog with supplied props
+ */
+export declare const dialog: (props: ExtendedDialogProps) => void;
 export {};

package/dist/dialog.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.confirm = exports.alert = exports.default = void 0;
+exports.dialog = exports.confirm = exports.alert = exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -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 _stack = _interopRequireDefault(require("./stack"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -270,7 +271,7 @@ var useDialogStyles = (0, _jss).createUseStyles(function(theme) {
 });
 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, _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 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({
@@ -299,10 +300,16 @@ var Dialog = function Dialog(props) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.dialogContent,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                    color: colors.textSecondary,
-                    light: true,
-                    children: message
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                    space: 16,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                            color: colors.textSecondary,
+                            light: true,
+                            children: message
+                        }),
+                        extra
+                    ]
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -372,6 +379,19 @@ var useNativeDialog = function useNativeDialog(param) {
         renderNative
     ]);
 };
+var NativeModalDialog = function NativeModalDialog(props) {
+    useNativeDialog({
+        renderNative: true,
+        acceptText: props.acceptText || props.dialogAcceptButton,
+        cancelText: props.cancelText || props.dialogCancelButton,
+        showCancel: props.showCancel,
+        message: props.message,
+        title: props.title,
+        onAccept: props.onAccept,
+        onCancel: props.onCancel
+    });
+    return null;
+};
 var ModalDialog = function ModalDialog(props) {
     var platformOverrides = (0, _hooks).useTheme().platformOverrides;
     var context = React.useContext(_themeContext.default);
@@ -383,7 +403,7 @@ var ModalDialog = function ModalDialog(props) {
     if (!context) {
         throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     }
-    var renderNative = (0, _webviewBridge).isWebViewBridgeAvailable();
+    var renderNative = !props.forceWeb && (0, _webviewBridge).isWebViewBridgeAvailable();
     var onAccept = props.onAccept, isClosing = props.isClosing, onCancel = props.onCancel, onCloseTransitionEnd = props.onCloseTransitionEnd, dialogProps = _objectWithoutProperties(props, [
         "onAccept",
         "isClosing",
@@ -427,16 +447,6 @@ var ModalDialog = function ModalDialog(props) {
     }, [
         handleKeyDown
     ]);
-    useNativeDialog({
-        renderNative: renderNative,
-        acceptText: props.acceptText || context.texts.dialogAcceptButton,
-        cancelText: props.cancelText || context.texts.dialogCancelButton,
-        showCancel: props.showCancel,
-        message: props.message,
-        title: props.title,
-        onAccept: props.onAccept,
-        onCancel: props.onCancel
-    });
     React.useEffect(function() {
         if (!animationsSupported(platformOverrides)) {
             addKeyDownListener();
@@ -468,7 +478,10 @@ var ModalDialog = function ModalDialog(props) {
         setModalState
     ]);
     var _modalClose;
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */ return renderNative ? null : /*#__PURE__*/ (0, _jsxRuntime).jsx(_portal.Portal, {
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */ return renderNative ? /*#__PURE__*/ (0, _jsxRuntime).jsx(NativeModalDialog, _objectSpread({}, props, {
+        dialogAcceptButton: context.texts.dialogAcceptButton,
+        dialogCancelButton: context.texts.dialogCancelButton
+    })) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_portal.Portal, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: classes.wrapper,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_focusTrap.default, {
@@ -606,13 +619,13 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
     };
     _proto.render = function render() {
         var _state = this.state, isClosing = _state.isClosing, dialogProps = _state.dialogProps;
-        var dialog = null;
+        var dialog1 = 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({
+            dialog1 = /*#__PURE__*/ (0, _jsxRuntime).jsx(ModalDialog, _objectSpread({
                 onCancel: this.createCancelHandler(onCancel),
                 onAccept: this.createAcceptHandler(onAccept),
                 isClosing: isClosing,
@@ -622,25 +635,37 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
             children: [
                 this.props.children,
-                dialog
+                dialog1
             ]
         });
     };
     return DialogRoot1;
 }(React.Component);
 exports.default = DialogRoot;
-var showDialog = function showDialog() {
-    var showCancel = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+var showDialog = function showDialog(param) {
+    var showCancel = param.showCancel, 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
+            showCancel: showCancel,
+            forceWeb: forceWeb
         }, props));
     };
 };
-var alert = showDialog(false);
+var alert = showDialog({
+    showCancel: false,
+    forceWeb: false
+});
 exports.alert = alert;
-var confirm = showDialog(true);
+var confirm = showDialog({
+    showCancel: true,
+    forceWeb: false
+});
 exports.confirm = confirm;
+var dialog = showDialog({
+    showCancel: false,
+    forceWeb: true
+});
+exports.dialog = dialog;