@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/snackbar.js

@@ -57,203 +57,93 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import Touchable from "./touchable";
-import classNames from "classnames";
-import { isWebViewBridgeAvailable, nativeMessage } from "@tef-novum/webview-bridge";
-import { useElementDimensions, useScreenSize, useTheme } from "./hooks";
-import { Text2 } from "./text";
-var PADDING_Y = 14;
-var PADDING_X = 16;
-var TRANSITION_TIME_IN_MS = 300;
-var SNACKBAR_MAX_WIDTH = 800;
-var SNACKBAR_MIN_WIDTH = 360;
-var SNACKBAR_MIN_HEIGHT = 48;
-var useStyles = createUseStyles(function(theme) {
-    return _defineProperty({
-        snackbar: {
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            transition: "visibility ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out"),
-            visibility: function(param) {
-                var isOpen = param.isOpen;
-                return isOpen ? "visible" : "hidden";
-            }
-        },
-        snackbarOpen: {
-            animation: "$snackbarAnimation ".concat(TRANSITION_TIME_IN_MS, "ms")
-        },
-        "@keyframes snackbarAnimation": {
-            "0%": {
-                transform: "translateY(100px)",
-                opacity: 0
-            }
-        },
-        snackbarWrapper: {
-            maxWidth: SNACKBAR_MAX_WIDTH,
-            minWidth: SNACKBAR_MIN_WIDTH,
-            minHeight: SNACKBAR_MIN_HEIGHT,
-            padding: "".concat(PADDING_Y, "px ").concat(PADDING_X, "px"),
-            borderRadius: 8,
-            position: "fixed",
-            bottom: 24,
-            zIndex: 1000,
-            backgroundColor: function(param) {
-                var type = param.type;
-                return type === "CRITICAL" ? theme.colors.feedbackErrorBackground : theme.colors.feedbackInfoBackground;
-            },
-            opacity: function(param) {
-                var isOpen = param.isOpen;
-                return isOpen ? 1 : 0;
-            },
-            transform: function(param) {
-                var isOpen = param.isOpen;
-                return isOpen ? "" : "translateY(100px)";
-            },
-            transition: "transform ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out, opacity ").concat(TRANSITION_TIME_IN_MS, "ms ease-in-out")
-        },
-        snackbarContent: {
-            display: "flex",
-            flexDirection: function(param) {
-                var isLongButton = param.isLongButton;
-                return isLongButton ? "column" : "row";
-            },
-            justifyContent: "space-between",
-            alignItems: function(param) {
-                var isLongButton = param.isLongButton;
-                return isLongButton ? "unset" : "center";
-            }
-        },
-        snackbarButton: {
-            marginTop: function(param) {
-                var isLongButton = param.isLongButton;
-                return isLongButton ? 18 : -6;
-            },
-            marginLeft: function(param) {
-                var isLongButton = param.isLongButton, isDesktopOrBigger = param.isDesktopOrBigger;
-                return isLongButton ? 0 : isDesktopOrBigger ? 48 : 16;
-            },
-            marginBottom: -6,
-            marginRight: -8,
-            fontWeight: 500,
-            fontSize: 16,
-            lineHeight: "24px",
-            padding: "4px 8px",
-            whiteSpace: "nowrap",
-            width: "auto",
-            alignSelf: function(param) {
-                var isLongButton = param.isLongButton;
-                return isLongButton ? "flex-end" : "unset";
-            },
-            color: function(param) {
-                var type = param.type;
-                return type === "INFORMATIVE" ? theme.colors.textLinkSnackbar : theme.colors.textPrimaryInverse;
-            }
-        }
-    }, theme.mq.tabletOrSmaller, {
-        snackbarWrapper: {
-            left: 8,
-            right: 8,
-            bottom: 8,
-            minWidth: 0
-        }
-    });
-});
-var SnackbarComponent = function(param) {
-    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, _onClose = param.onClose, onClose = _onClose === void 0 ? function() {} : _onClose, _type = param.type, type = _type === void 0 ? "INFORMATIVE" : _type;
-    var ref = _slicedToArray(React.useState(false), 2), isOpen = ref[0], setIsOpen = ref[1];
-    var ref1 = useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
-    var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
-    var longButtonWidth = isDesktopOrBigger ? 160 : 128;
-    var colors = useTheme().colors;
-    var classes = useStyles({
-        type: type,
-        isOpen: isOpen,
-        isDesktopOrBigger: isDesktopOrBigger,
-        isLongButton: buttonWidth >= longButtonWidth
-    });
-    var close = React.useCallback(function() {
-        setIsOpen(false);
-        setTimeout(function() {
-            onClose();
-        }, TRANSITION_TIME_IN_MS);
+import * as c from "react";
+import T from "./touchable.js";
+import l from "classnames";
+import { isWebViewBridgeAvailable as g, nativeMessage as v } from "@tef-novum/webview-bridge";
+import { useElementDimensions as N, useScreenSize as R } from "./hooks.js";
+import { Text2 as b } from "./text.js";
+import { TRANSITION_TIME_IN_MS as C, snackbar as O, snackbarOpen as k, wrapper as w, wrapperCritical as E, wrapperInfo as S, wrapperOpen as A, content as B, button as M, buttonCritical as W, buttonInfo as D, longButton as L } from "./snackbar.css-mistica.js";
+import { sprinkles as V } from "./sprinkles.css-mistica.js";
+import { vars as _ } from "./skins/skin-contract.css-mistica.js";
+import { jsx as i, jsxs as j } from "./_virtual/jsx-runtime.js";
+var F = function(param) {
+    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
+    var ref = _slicedToArray(c.useState(!1), 2), o = ref[0], s = ref[1], ref1 = N(), u = ref1.width, p = ref1.ref, ref2 = R(), h = ref2.isDesktopOrBigger, m = u > (h ? 160 : 128), f = c.useCallback(function() {
+        s(!1), setTimeout(function() {
+            t();
+        }, C);
     }, [
-        onClose
+        t
     ]);
-    React.useEffect(function() {
-        var openTimeout = setTimeout(function() {
-            setIsOpen(true);
-        }, 50);
-        var closeTimeout = setTimeout(close, duration);
+    return c.useEffect(function() {
+        var I = setTimeout(function() {
+            s(!0);
+        }, 50), d = setTimeout(f, r);
         return function() {
-            clearTimeout(openTimeout);
-            clearTimeout(closeTimeout);
+            clearTimeout(I), clearTimeout(d);
         };
     }, [
-        close,
-        duration
-    ]);
-    return /*#__PURE__*/ _jsx("div", {
-        className: classes.snackbar,
-        children: /*#__PURE__*/ _jsx("div", {
+        f,
+        r
+    ]), /* @__PURE__ */ i("div", {
+        className: l(O, _defineProperty({}, k, o)),
+        children: /* @__PURE__ */ i("div", {
             role: "alert",
-            className: classNames(classes.snackbarWrapper, _defineProperty({}, classes.snackbarOpen, isOpen)),
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: classes.snackbarContent,
+            className: l(w, n === "CRITICAL" ? E : S, _defineProperty({}, A, o)),
+            children: /* @__PURE__ */ j("div", {
+                className: l(B, V({
+                    flexDirection: m ? "column" : "row",
+                    alignItems: m ? void 0 : "center"
+                })),
                 children: [
-                    /*#__PURE__*/ _jsx(Text2, {
-                        regular: true,
-                        color: colors.textPrimaryInverse,
-                        children: message
+                    /* @__PURE__ */ i(b, {
+                        regular: !0,
+                        color: _.colors.textPrimaryInverse,
+                        children: a
                     }),
-                    buttonText && /*#__PURE__*/ _jsx(Touchable, {
-                        ref: buttonRef,
-                        className: classes.snackbarButton,
-                        onPress: close,
-                        children: buttonText
+                    e && /* @__PURE__ */ i("div", {
+                        className: l(M, n === "CRITICAL" ? W : D, _defineProperty({}, L, m)),
+                        children: /* @__PURE__ */ i(T, {
+                            style: {
+                                lineHeight: "inherit",
+                                fontWeight: "inherit"
+                            },
+                            ref: p,
+                            onPress: f,
+                            children: e
+                        })
                     })
                 ]
             })
         })
     });
-};
-var Snackbar = function(param) {
-    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, tmp = param.onClose, onCloseProp = tmp === void 0 ? function() {} : tmp, _type = param.type, type = _type === void 0 ? "INFORMATIVE" : _type;
-    var renderNative = isWebViewBridgeAvailable();
-    var onCloseRef = React.useRef(onCloseProp);
-    React.useEffect(function() {
-        onCloseRef.current = onCloseProp;
+}, X = function(param) {
+    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
+    var o = g(), s = c.useRef(t);
+    return c.useEffect(function() {
+        s.current = t;
     }, [
-        onCloseProp
-    ]);
-    React.useEffect(function() {
-        if (renderNative) {
-            nativeMessage({
-                message: message,
-                duration: duration,
-                buttonText: buttonText,
-                type: type
-            }).then(onCloseRef.current);
-        }
+        t
+    ]), c.useEffect(function() {
+        o && v({
+            message: a,
+            duration: r,
+            buttonText: e,
+            type: n
+        }).then(s.current);
     }, [
-        buttonText,
-        duration,
-        message,
-        renderNative,
-        type
-    ]);
-    if (renderNative) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsx(SnackbarComponent, {
-        message: message,
-        duration: duration,
-        buttonText: buttonText,
-        type: type,
-        onClose: onCloseRef.current
+        e,
+        r,
+        a,
+        o,
+        n
+    ]), o ? null : /* @__PURE__ */ i(F, {
+        message: a,
+        duration: r,
+        buttonText: e,
+        type: n,
+        onClose: s.current
     });
 };
-export default Snackbar;
+export { X as default };

package/dist-es/spinner.js

@@ -26,20 +26,19 @@ function _objectSpread(target) {
     }
     return target;
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import { getPlatform } from "./utils/platform";
-import FadeIn from "./fade-in";
-import { useAriaId, useTheme } from "./hooks";
-var useStyles = createUseStyles(function() {
+import { createUseStyles as y } from "./jss.js";
+import { getPlatform as D } from "./utils/platform.js";
+import g from "./fade-in.js";
+import { useTheme as k, useAriaId as M } from "./hooks.js";
+import { jsxs as r, jsx as t } from "./_virtual/jsx-runtime.js";
+var u = y(function() {
     return {
         spinnerDefault: {
             flexShrink: 0,
             animation: "$rotator 1.4s linear infinite"
         },
         spinnerDefaultPath: {
-            important: false,
+            important: !1,
             strokeDasharray: 187,
             strokeDashoffset: 0,
             transformOrigin: "center",
@@ -114,113 +113,105 @@ var useStyles = createUseStyles(function() {
             }
         }
     };
-});
-var Spinner = function(param) {
-    var color = param.color, _delay = param.delay, delay = _delay === void 0 ? "500ms" : _delay, _size = param.size, size = _size === void 0 ? 24 : _size, style = param.style, rolePresentation = param.rolePresentation;
-    var ref = useTheme(), texts = ref.texts, platformOverrides = ref.platformOverrides, colors = ref.colors;
-    color = color || colors.controlActivated;
-    var classes = useStyles();
-    var spinnerId = useAriaId();
-    var withTitle = !rolePresentation;
-    var title = texts.loading;
-    var content = getPlatform(platformOverrides) === "ios" ? /*#__PURE__*/ _jsxs("svg", {
-        "aria-labelledby": spinnerId,
-        className: classes.spinnerIos,
-        height: size,
-        style: _objectSpread({}, style),
+}), S = function(param) {
+    var e = param.color, tmp = param.delay, a = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, i = tmp1 === void 0 ? 24 : tmp1, o = param.style, c = param.rolePresentation;
+    var ref = k(), p = ref.texts, m = ref.platformOverrides, d = ref.colors;
+    e = e || d.controlActivated;
+    var s = u(), n = M(), l = !c, f = p.loading, h = D(m) === "ios" ? /* @__PURE__ */ r("svg", {
+        "aria-labelledby": n,
+        className: s.spinnerIos,
+        height: i,
+        style: _objectSpread({}, o),
         role: "img",
         viewBox: "0 0 28 28",
-        width: size,
+        width: i,
         children: [
-            withTitle && /*#__PURE__*/ _jsx("title", {
-                id: spinnerId,
-                children: title
+            l && /* @__PURE__ */ t("title", {
+                id: n,
+                children: f
             }),
-            /*#__PURE__*/ _jsxs("g", {
+            /* @__PURE__ */ r("g", {
                 role: "presentation",
                 children: [
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M18.696 10.5c-.275-.48-.113-1.09.365-1.367l4.76-2.75c.49-.274 1.1-.11 1.37.367.28.48.12 1.092-.36 1.364l-4.76 2.75c-.48.277-1.09.113-1.36-.364z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M16.133 6.938l2.75-4.765c.276-.478.89-.643 1.367-.366.48.276.64.886.365 1.366l-2.748 4.762c-.276.48-.888.645-1.367.368-.48-.276-.644-.89-.367-1.365z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M13.5 7.5c-.553 0-1-.448-1-1V1c0-.554.447-1 1-1 .553 0 1.002.447 1.002 1v5.5c-.002.553-.45 1-1.003 1z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M8.303 10.5c-.277.477-.888.64-1.365.365l-4.763-2.75c-.478-.273-.643-.886-.367-1.365.277-.48.89-.642 1.367-.368l4.762 2.75c.48.278.643.89.366 1.368z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M9.133 7.937l-2.75-4.763c-.276-.48-.11-1.09.365-1.366.48-.277 1.09-.114 1.367.366l2.75 4.765c.274.47.112 1.08-.367 1.36-.477.28-1.09.11-1.365-.37z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M6.5 14.5H1c-.554 0-1-.448-1-1 0-.554.447-1 1-1h5.5c.55 0 1 .447 1 1 0 .552-.448 1-1 1z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M8.303 16.502c.277.478.113 1.088-.365 1.366l-4.762 2.75c-.478.272-1.09.11-1.368-.367-.276-.47-.11-1.08.367-1.36l4.762-2.75c.478-.28 1.09-.11 1.366.37z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M10.866 20.062l-2.75 4.767c-.277.47-.89.63-1.367.36-.48-.28-.65-.89-.37-1.37l2.75-4.77c.27-.48.89-.64 1.36-.37.47.276.64.89.36 1.364z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M13.5 19.502c.553 0 1.002.448 1.002 1.002v5.498c0 .55-.448 1-1.003 1-.56 0-1-.448-1-1v-5.498c0-.554.44-1.002 1-1.002z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M17.867 19.062l2.748 4.764c.275.48.113 1.088-.365 1.365-.48.28-1.09.12-1.367-.36l-2.75-4.76c-.276-.47-.11-1.09.367-1.36.48-.27 1.09-.11 1.367.37z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M18.696 16.502c.276-.48.887-.646 1.365-.367l4.77 2.748c.48.28.64.89.37 1.368-.27.48-.88.64-1.37.37l-4.76-2.75c-.47-.27-.64-.89-.36-1.36z"
                     }),
-                    /*#__PURE__*/ _jsx("path", {
-                        fill: color,
+                    /* @__PURE__ */ t("path", {
+                        fill: e,
                         d: "M25.998 12.5h-5.5c-.553 0-1.002.447-1.002 1 0 .552.447 1 1 1H26c.554 0 1.002-.448 1.002-1 0-.554-.448-1-1.002-1z"
                     })
                 ]
             })
         ]
-    }) : /*#__PURE__*/ _jsxs("svg", {
-        "aria-labelledby": withTitle ? spinnerId : undefined,
-        className: classes.spinnerDefault,
-        height: size,
-        style: _objectSpread({}, style),
+    }) : /* @__PURE__ */ r("svg", {
+        "aria-labelledby": l ? n : void 0,
+        className: s.spinnerDefault,
+        height: i,
+        style: _objectSpread({}, o),
         role: "img",
         viewBox: "0 0 66 66",
-        width: size,
+        width: i,
         children: [
-            withTitle && /*#__PURE__*/ _jsx("title", {
-                id: spinnerId,
-                children: title
+            l && /* @__PURE__ */ t("title", {
+                id: n,
+                children: f
             }),
-            /*#__PURE__*/ _jsx("circle", {
-                className: classes.spinnerDefaultPath,
+            /* @__PURE__ */ t("circle", {
+                className: s.spinnerDefaultPath,
                 cx: "33",
                 cy: "33",
                 fill: "none",
                 r: "30",
                 role: "presentation",
-                stroke: color,
+                stroke: e,
                 strokeWidth: "6"
             })
         ]
     });
-    if (delay === "0" || delay === "0s" || delay === "0ms") {
-        return content;
-    }
-    return /*#__PURE__*/ _jsx(FadeIn, {
-        delay: delay,
-        children: content
+    return a === "0" || a === "0s" || a === "0ms" ? h : /* @__PURE__ */ t(g, {
+        delay: a,
+        children: h
     });
 };
-export default Spinner;
+export { S as default };