@telefonica/mistica 11.5.0 → 11.7.0

package/dist/button.d.ts

@@ -59,6 +59,7 @@ export interface SubmitButtonProps extends CommonProps {
 export declare type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps;
 interface ButtonLinkCommonProps {
     children: React.ReactNode;
+    disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */

package/dist/button.js

@@ -472,7 +472,8 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
                 "@media (pointer: coarse)": {
                     backgroundColor: "initial"
                 }
-            }
+            },
+            "&[disabled]": disabledStyle
         },
         inverse: {
             color: theme.colors.textLinkInverse,
@@ -492,6 +493,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var formStatus = (0, _formContext).useForm().formStatus;
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var _trackingEvent;
@@ -509,7 +511,8 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             truncate: 1,
             color: "inherit",
             children: props.children
-        })
+        }),
+        disabled: props.disabled || formStatus === "sending"
     };
     if (process.env.NODE_ENV !== "production") {
         if (props.to === "" || props.href === "") {

package/dist/button.js.flow

@@ -59,6 +59,7 @@ export type ButtonProps =
   | HrefButtonProps;
 declare type ButtonLinkCommonProps = {
   children: React.Node,
+  disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   trackEvent?: boolean,
 

package/dist/carousel.js

@@ -224,6 +224,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;
     return {
         carouselContainer: {
+            // This value is a workaround to solve an issue when the page is rendered in a hidden webview
+            // in that case the window size is reported as 0 and the scroll snap is placed at the wrong slide
+            minWidth: 64,
             position: "relative"
         },
         arrowButton: _objectSpread({}, arrowButtonStyle(theme), {

package/dist/feedback.js

@@ -245,6 +245,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
     };
 });
+var BackgroundColor = function BackgroundColor() {
+    var colors = (0, _hooks).useTheme().colors;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var css = "body {background:".concat(isInverse ? colors.backgroundBrand : colors.background, "}");
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("style", {
+        children: css
+    });
+};
 var requestVibration = function requestVibration(type) {
     if ((0, _webviewBridge).isWebViewBridgeAvailable()) {
         (0, _webviewBridge).requestVibration(type).catch(function() {});
@@ -354,7 +362,7 @@ var FeedbackScreen = function FeedbackScreen(param) {
     var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
     useHapticFeedback(hapticFeedback);
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var ref = (0, _hooks).useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
+    var ref = (0, _hooks).useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode, skinName = ref.skinName;
     var windowHeight = (0, _hooks).useWindowHeight();
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -423,9 +431,10 @@ var FeedbackScreen = function FeedbackScreen(param) {
                     children: feedbackContent
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            skinName === _constants.O2_CLASSIC_SKIN && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.backgroundDiv
-            })
+            }),
+            skinName !== _constants.O2_CLASSIC_SKIN && /*#__PURE__*/ (0, _jsxRuntime).jsx(BackgroundColor, {})
         ]
     }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {

package/dist/image.d.ts

@@ -14,7 +14,7 @@ export declare type ImageProps = {
     /** defaults to 100% when no width and no height are given */
     width?: string | number;
     height?: string | number;
-    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0  */
     aspectRatio?: AspectRatio | number;
     /** defaults to empty string */
     alt?: string;

package/dist/image.js

@@ -108,17 +108,18 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function borderRadius(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
                     return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -166,9 +167,10 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/dist/image.js.flow

@@ -19,7 +19,7 @@ export type ImageProps = {
  width?: string | number,
  height?: string | number,
  /**
-  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0
   */
  aspectRatio?: AspectRatio | number,
  /**

package/dist/package-version.js

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

package/dist/responsive-layout.js

@@ -58,7 +58,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: "100%"
         },
         layout: (_obj = {
-            margin: "auto"
+            margin: "auto",
+            paddingLeft: "env(safe-area-inset-left)",
+            paddingRight: "env(safe-area-inset-right)"
         }, _defineProperty(_obj, theme.mq.largeDesktop, {
             width: LARGE_DESKTOP_MAX_WIDTH
         }), _defineProperty(_obj, theme.mq.desktop, {

package/dist/video.d.ts

@@ -15,7 +15,7 @@ export declare type VideoProps = {
     /** defaults to 100% when no width and no height are given */
     width?: string | number;
     height?: string | number;
-    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original video proportions, set aspectRatio to 0 */
     aspectRatio?: AspectRatio | number;
     /** accepts multiple sources */
     src: string | Array<string> | VideoSource | Array<VideoSource>;

package/dist/video.js

@@ -101,17 +101,18 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function borderRadius(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
                     return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -155,9 +156,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadius = (0, _image).useDisableBorderRadius();
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css
+    // if aspect ratio is 0, we use the original video proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/dist/video.js.flow

@@ -20,7 +20,7 @@ export type VideoProps = {
  width?: string | number,
  height?: string | number,
  /**
-  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original video proportions, set aspectRatio to 0
   */
  aspectRatio?: AspectRatio | number,
  /**

package/dist-es/button.js

@@ -439,7 +439,8 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
                 "@media (pointer: coarse)": {
                     backgroundColor: "initial"
                 }
-            }
+            },
+            "&[disabled]": disabledStyle
         },
         inverse: {
             color: theme.colors.textLinkInverse,
@@ -459,6 +460,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
     };
 });
 export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var formStatus = useForm().formStatus;
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
     var _trackingEvent;
@@ -476,7 +478,8 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             truncate: 1,
             color: "inherit",
             children: props.children
-        })
+        }),
+        disabled: props.disabled || formStatus === "sending"
     };
     if (process.env.NODE_ENV !== "production") {
         if (props.to === "" || props.href === "") {

package/dist-es/carousel.js

@@ -191,6 +191,9 @@ var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;
     return {
         carouselContainer: {
+            // This value is a workaround to solve an issue when the page is rendered in a hidden webview
+            // in that case the window size is reported as 0 and the scroll snap is placed at the wrong slide
+            minWidth: 64,
             position: "relative"
         },
         arrowButton: _objectSpread({}, arrowButtonStyle(theme), {

package/dist-es/feedback.js

@@ -106,7 +106,7 @@ import { useTheme, useScreenSize, useWindowHeight, useIsomorphicLayoutEffect } f
 import { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";
 import ButtonFixedFooterLayout from "./button-fixed-footer-layout";
 import OverscrollColor from "./overscroll-color-context";
-import { VIVO_SKIN } from "./skins/constants";
+import { O2_CLASSIC_SKIN, VIVO_SKIN } from "./skins/constants";
 import IcnSuccess from "./icons/icon-success";
 import IconSuccessVivo from "./icons/icon-success-vivo";
 import IcnError from "./icons/icon-error";
@@ -213,6 +213,14 @@ var useStyles = createUseStyles(function(theme) {
         }
     };
 });
+var BackgroundColor = function() {
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var css = "body {background:".concat(isInverse ? colors.backgroundBrand : colors.background, "}");
+    return /*#__PURE__*/ _jsx("style", {
+        children: css
+    });
+};
 var requestVibration = function(type) {
     if (isWebViewBridgeAvailable()) {
         requestVibrationNative(type).catch(function() {});
@@ -322,7 +330,7 @@ export var FeedbackScreen = function(param) {
     var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
     useHapticFeedback(hapticFeedback);
     var isInverse = useIsInverseVariant();
-    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
+    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode, skinName = ref.skinName;
     var windowHeight = useWindowHeight();
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -391,9 +399,10 @@ export var FeedbackScreen = function(param) {
                     children: feedbackContent
                 })
             }),
-            /*#__PURE__*/ _jsx("div", {
+            skinName === O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx("div", {
                 className: classes.backgroundDiv
-            })
+            }),
+            skinName !== O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx(BackgroundColor, {})
         ]
     }) : /*#__PURE__*/ _jsx(ResponsiveLayout, {
         children: /*#__PURE__*/ _jsx(Box, {

package/dist-es/image.js

@@ -79,17 +79,18 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
                     return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -136,9 +137,10 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

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 = "11.5.0";
+export var PACKAGE_VERSION = "11.7.0";

package/dist-es/responsive-layout.js

@@ -27,7 +27,9 @@ var useStyles = createUseStyles(function(theme) {
             width: "100%"
         },
         layout: (_obj = {
-            margin: "auto"
+            margin: "auto",
+            paddingLeft: "env(safe-area-inset-left)",
+            paddingRight: "env(safe-area-inset-right)"
         }, _defineProperty(_obj, theme.mq.largeDesktop, {
             width: LARGE_DESKTOP_MAX_WIDTH
         }), _defineProperty(_obj, theme.mq.desktop, {

package/dist-es/video.js

@@ -73,17 +73,18 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
                     return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -127,9 +128,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadius = useDisableBorderRadius();
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css
+    // if aspect ratio is 0, we use the original video proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.5.0",
+    "version": "11.7.0",
     "license": "MIT",
     "repository": {
         "type": "git",