@telefonica/mistica 11.10.1 → 11.11.1

package/dist-es/maybe-dismissable.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import { useTheme } from "./hooks";
+import IconButton from "./icon-button";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { applyAlpha } from "./utils/color";
+var DismissableContext = /*#__PURE__*/ React.createContext(false);
+export var useIsDismissable = function() {
+    return React.useContext(DismissableContext);
+};
+var useStyles = createUseStyles(function(theme) {
+    return {
+        dismissableContainer: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            width: function(param) {
+                var width = param.width;
+                return width || "100%";
+            }
+        },
+        dismissableButton: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 48,
+            height: 48,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        dismissableCircleContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            margin: "0 0 8px 8px",
+            borderRadius: "50%",
+            backgroundColor: applyAlpha(theme.colors.background, 0.7)
+        }
+    };
+});
+var MaybeDismissable = function(param) {
+    var children = param.children, width = param.width, onClose = param.onClose, ariaLabel = param["aria-label"];
+    var isInverse = useIsInverseVariant();
+    var classes = useStyles({
+        isInverse: isInverse,
+        width: width
+    });
+    var ref = useTheme(), colors = ref.colors, texts = ref.texts;
+    if (!onClose) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs("section", {
+        className: classes.dismissableContainer,
+        "aria-label": ariaLabel,
+        children: [
+            /*#__PURE__*/ _jsx(DismissableContext.Provider, {
+                value: true,
+                children: children
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                className: classes.dismissableButton,
+                onPress: onClose,
+                "aria-label": texts.closeButtonLabel,
+                style: {
+                    display: "flex",
+                    width: 48,
+                    height: 48
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: classes.dismissableCircleContainer,
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        color: colors.neutralHigh
+                    })
+                })
+            })
+        ]
+    });
+};
+export default MaybeDismissable;

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.10.1";
+export var PACKAGE_VERSION = "11.11.1";

package/dist-es/select.js

@@ -200,7 +200,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: "6px 16px",
+            padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {

package/dist-es/text.js

@@ -88,7 +88,7 @@ var useStyles = createUseStyles(function(theme) {
             "@supports not (overflow-wrap: anywhere)": {
                 wordBreak: function(param) {
                     var wordBreak = param.wordBreak;
-                    return wordBreak ? "break-all" : "normal";
+                    return wordBreak ? "break-all" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -116,7 +116,7 @@ var useStyles = createUseStyles(function(theme) {
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
                 }
             },
-            display: "box",
+            display: "-webkit-box",
             boxOrient: "vertical",
             overflow: "hidden"
         }

package/dist-es/utils/media-queries.js

@@ -12,6 +12,10 @@ export var createMediaQueries = function(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };

package/dist-es/utils/platform.js

@@ -82,6 +82,14 @@ export var isIos = function(platformOverrides) {
     }
     return false;
 };
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */ export var isSafari = function() {
+    return navigator.vendor.includes("Apple");
+};
 export var isFirefox = function(platformOverrides) {
     return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
 };

package/dist-es/video.js

@@ -60,6 +60,7 @@ import { createUseStyles } from "./jss";
 import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
 import { combineRefs } from "./utils/common";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import { isSafari } from "./utils/platform";
 export var RATIO = {
     "1:1": 1,
     "16:9": 16 / 9,
@@ -69,6 +70,7 @@ export var RATIO = {
 var useStyles = createUseStyles(function() {
     return {
         video: {
+            background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
@@ -170,7 +172,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = props.width || "100%";
     }
-    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    /**
+         * In safari, when using a video with poster, the transition from pause to play does a flicker,
+         * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
+         * wrapper with the poster as background image
+         */ var needsWrapper = isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
@@ -179,14 +185,14 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, !needsWrapper ? {
+    }, needsWrapper ? {} : {
         width: width,
         height: height
-    } : {}, {
+    }, {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL
+        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
     }, getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -200,7 +206,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         return /*#__PURE__*/ _jsx("div", {
             style: {
                 width: width,
-                height: height
+                height: height,
+                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                backgroundSize: "cover",
+                backgroundPosition: "50% 50%"
             },
             className: classes.wrapper,
             children: video1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.10.1",
+    "version": "11.11.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -123,7 +123,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.7.0",
+        "@tef-novum/webview-bridge": "^3.8.0",
         "@telefonica/libphonenumber": "^2.8.1",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",