@telefonica/mistica 12.6.0 → 12.7.0

package/dist-es/skeletons.js

@@ -32,12 +32,13 @@ import * as React from "react";
 import SkeletonBase from "./skeleton-base";
 import { createUseStyles } from "./jss";
 import Stack from "./stack";
-import classNames from "classnames";
 import { getPrefixedDataAttributes } from "./utils/dom";
 var transition = "1.5s linear";
 var useAnimation = createUseStyles(function() {
     return {
         animation: {
+            width: "100%",
+            height: "100%",
             animation: "$pulse ".concat(transition, " infinite")
         },
         "@keyframes pulse": {
@@ -53,73 +54,50 @@ var useAnimation = createUseStyles(function() {
         }
     };
 });
-var useSkeletonStyles = createUseStyles(function() {
-    return {
-        wrap: {
-            borderRadius: 8,
-            height: function(param) {
-                var _height = param.height, height = _height === void 0 ? 8 : _height;
-                return height;
-            },
-            width: function(param) {
-                var _width = param.width, width = _width === void 0 ? "100%" : _width;
-                return width;
-            }
-        }
-    };
-});
-export var SkeletonLine = function(param) {
-    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+var SkeletonAnimation = function(param) {
+    var children = param.children, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
     var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width
-    });
     return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        className: animationClasses.animation,
         role: "status",
+        "aria-busy": true,
         "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
         "aria-label": ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: /*#__PURE__*/ _jsx(SkeletonBase, {})
+        children: children
+    }));
+};
+export var SkeletonLine = function(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            width: width
+        })
     }));
 };
 export var SkeletonText = function(param) {
     var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        height: "fit-content"
-    });
-    return /*#__PURE__*/ _jsxs(Stack, _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
-        space: 16,
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ _jsx(SkeletonBase, {}),
-            /*#__PURE__*/ _jsx(SkeletonBase, {}),
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                width: "75%"
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            space: 16,
+            children: [
+                /*#__PURE__*/ _jsx(SkeletonBase, {}),
+                /*#__PURE__*/ _jsx(SkeletonBase, {}),
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    width: "75%"
+                })
+            ]
+        })
     }));
 };
 export var SkeletonCircle = function(param) {
     var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: size,
-        height: size
-    });
-    return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(SkeletonBase, {
             height: size,
@@ -147,46 +125,31 @@ var useSkeletonRowStyles = createUseStyles(function() {
 });
 export var SkeletonRow = function(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
     var rowClass = useSkeletonRowStyles();
-    return /*#__PURE__*/ _jsxs("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap, rowClass.row),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                height: 40,
-                width: 40,
-                radius: "50%",
-                className: rowClass.circle
-            }),
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                width: width,
-                className: rowClass.line
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: rowClass.row,
+            children: [
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    height: 40,
+                    width: 40,
+                    radius: "50%",
+                    className: rowClass.circle
+                }),
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    width: width,
+                    className: rowClass.line
+                })
+            ]
+        })
     }));
 };
 export var SkeletonRectangle = function(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
-    return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": true,
-        "aria-busy": true,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(SkeletonBase, {
             height: height,

package/dist-es/skins/o2.js

@@ -69,7 +69,7 @@ export var getO2Skin = function() {
             buttonDangerBackground: palette.pepper,
             buttonDangerBackgroundSelected: palette.pepper60,
             buttonDangerBackgroundHover: palette.pepper60,
-            buttonLinkBackgroundSelected: palette.o2BluePrimary15,
+            buttonLinkBackgroundSelected: palette.o2BluePrimary10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
             buttonPrimaryBackgroundInverse: palette.white,

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

@@ -173,6 +173,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         textArea: _objectSpread((_obj = {
             resize: "none",
+            padding: 0,
             marginTop: function(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -409,6 +410,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         multiline: multiline,
         fullWidth: fullWidth,
         fieldRef: fieldRef,
+        readOnly: rest.readOnly,
         children: [
             startIcon && /*#__PURE__*/ _jsx("div", {
                 className: classes.startIcon,

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

@@ -260,15 +260,19 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", function(param) {
+            var readOnly = param.readOnly;
+            return readOnly ? theme.colors.neutralLow : theme.colors.backgroundContainer;
+        }), _obj1)
     };
 });
 export var FieldContainer = function(param) {
-    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth;
+    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth, readOnly = param.readOnly;
     var classes = useFieldContainerStyles({
         multiline: multiline,
         fullWidth: fullWidth,
-        disabled: disabled
+        disabled: disabled,
+        readOnly: readOnly
     });
     return /*#__PURE__*/ _jsxs("div", {
         className: classes.fieldContainer,

package/dist-es/utils/aspect-ratio-support.js

@@ -6,6 +6,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+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 _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -33,6 +46,21 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; 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]);
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -47,6 +75,7 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../hooks";
+import { createUseStyles } from "../jss";
 var AspectRatioSupport = /*#__PURE__*/ React.createContext(true);
 export var AspectRatioSupportProvider = function(param) {
     var children = param.children;
@@ -70,3 +99,86 @@ export var AspectRatioSupportProvider = function(param) {
 export var useSupportsAspectRatio = function() {
     return React.useContext(AspectRatioSupport);
 };
+var useAspectRatioStyles = createUseStyles(function() {
+    return {
+        container: {
+            "@supports (aspect-ratio: 1 / 1)": {
+                aspectRatio: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
+                }
+            },
+            "$wrapper &": {
+                position: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
+                width: "100%",
+                height: "100%",
+                top: 0,
+                left: 0
+            }
+        },
+        wrapper: {
+            overflow: "hidden",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            position: "relative",
+            paddingTop: function(param) {
+                var aspectRatio = param.aspectRatio, width = param.width;
+                if (!aspectRatio) {
+                    return 0;
+                }
+                if (width && typeof width === "string" && width.endsWith("%")) {
+                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
+                }
+                return "".concat(100 / aspectRatio, "%");
+            }
+        }
+    };
+});
+export var AspectRatioElement = function(props) {
+    var supportsAspectRatio = useSupportsAspectRatio();
+    // 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" && props.aspectRatio !== 0;
+    var classes = useAspectRatioStyles({
+        aspectRatio: withCssAspectRatio ? props.aspectRatio : undefined,
+        width: props.width
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (typeof props.width === "number") {
+        height = props.aspectRatio !== 0 ? props.width / props.aspectRatio : undefined;
+    } else if (typeof props.height === "number") {
+        width = props.aspectRatio !== 0 ? props.height * props.aspectRatio : undefined;
+    } else {
+        width = props.width || "100%";
+    }
+    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    var _as;
+    var container = /*#__PURE__*/ React.createElement((_as = props.as) !== null && _as !== void 0 ? _as : "div", {
+        className: props.className ? "".concat(props.className, " ").concat(classes.container) : classes.container,
+        style: _objectSpread({}, needsWrapper ? _objectSpread({}, props.style, {
+            width: "100%"
+        }) : _objectSpread({}, props.style, {
+            width: width,
+            height: height
+        }))
+    }, props.children);
+    if (needsWrapper) {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                width: width,
+                height: height
+            },
+            className: classes.wrapper,
+            children: container
+        });
+    } else {
+        return container;
+    }
+};

package/dist-es/video.js

@@ -57,7 +57,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useDisableBorderRadius } from "./image";
 import { createUseStyles } from "./jss";
-import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
+import { AspectRatioElement } from "./utils/aspect-ratio-support";
 import { combineRefs } from "./utils/common";
 import { getPrefixedDataAttributes } from "./utils/dom";
 import { isRunningAcceptanceTest, isSafari } from "./utils/platform";
@@ -70,45 +70,13 @@ export var RATIO = {
 var useStyles = createUseStyles(function() {
     return {
         video: {
+            width: "100%",
+            height: "100%",
             background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
-            maxHeight: "100%",
-            "@supports (aspect-ratio: 1 / 1)": {
-                aspectRatio: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
-                }
-            },
-            "$wrapper &": {
-                borderRadius: 0,
-                position: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
-                    aspectRatio ? "absolute" : "static");
-                },
-                width: "100%",
-                height: "100%",
-                top: 0,
-                left: 0
-            }
-        },
-        wrapper: {
-            overflow: "hidden",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            position: "relative",
-            paddingTop: function(param) {
-                var aspectRatio = param.aspectRatio, width = param.width;
-                if (!aspectRatio) {
-                    return 0;
-                }
-                if (width && typeof width === "string" && width.endsWith("%")) {
-                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
-                }
-                return "".concat(100 / aspectRatio, "%");
-            }
+            maxHeight: "100%"
         }
     };
 });
@@ -124,16 +92,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "aspectRatio",
         "dataAttributes"
     ]);
-    var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadius = useDisableBorderRadius();
     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({
-        aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width
-    });
+    var classes = useStyles();
     var videoRef = React.useRef(null);
     React.useEffect(function() {
         var video = videoRef.current;
@@ -155,23 +116,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             return source;
         }
     });
-    var width = props.width;
-    var height = props.height;
-    if (props.width !== undefined && props.height !== undefined) {
-        width = props.width;
-        height = props.height;
-    } else if (typeof props.width === "number") {
-        height = ratio ? props.width / ratio : undefined;
-    } else if (typeof props.height === "number") {
-        width = ratio ? props.height * ratio : undefined;
-    } else {
-        width = props.width || "100%";
-    }
-    /**
-         * 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,13 +123,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         disableRemotePlayback: true,
         autoPlay: autoPlay,
         muted: muted,
-        loop: loop
-    }, needsWrapper ? {
-        width: "100%"
-    } : {
-        width: width,
-        height: height
-    }, {
+        loop: loop,
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
@@ -203,22 +141,24 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             }, index);
         })
     }));
-    if (needsWrapper) {
-        return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx(AspectRatioElement, {
+        aspectRatio: ratio,
+        width: props.width,
+        height: props.height,
+        children: isSafari() ? /*#__PURE__*/ _jsx("div", {
             style: {
-                width: width,
-                height: height,
-                // adding the poster as background image avoids the flicker in Safari
-                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                width: "100%",
+                height: "100%",
+                /**
+                             * 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
+                             */ backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%",
-                borderRadius: noBorderRadius ? 0 : 8
+                backgroundPosition: "50% 50%"
             },
-            className: classes.wrapper,
             children: video1
-        });
-    } else {
-        return video1;
-    }
+        }) : video1
+    });
 });
 export default Video;

package/package.json

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