@telefonica/mistica 14.42.0 → 14.43.0

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.42.0";
+const o = "14.43.0";
 export { o as PACKAGE_VERSION };

package/dist-es/popover.css-mistica.js

@@ -1,4 +1,3 @@
-import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./popover.css.ts.vanilla.css-mistica.js";
-var r = "_12igu661 _1y2v1nfgd _1y2v1nfjp _1y2v1nfiz _1y2v1nfj2 _1y2v1nf37", t = 12, _ = "_12igu663 _1y2v1nfgd _1y2v1nf2 _1y2v1nfjj", a = "_12igu669 _1y2v1nfgd _1y2v1nfjs _1y2v1nfkm", i = "_12igu665 _1y2v1nfgd _1y2v1nfh6 _1y2v1nf37 _1y2v1nfiz _1y2v1nfjb", o = "bottom", f = "top", y = 20, e = 16, g = 488, p = "_1y2v1nfgi _1y2v1nfgx _1y2v1nfhm", d = "_12igu667";
-export { r as arrow, t as arrowSize, _ as arrowWrapper, a as closeButtonIcon, i as container, o as defaultPositionDesktop, f as defaultPositionMobile, y as distanceToTarget, e as marginLeftRightMobile, g as maxWidthDesktop, p as textAlign, d as textContent };
+var o = "_12igu660";
+export { o as content };

package/dist-es/popover.js

@@ -27,209 +27,93 @@ function _object_spread(target) {
     }
     return target;
 }
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
     if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
-        keys.push.apply(keys, symbols);
     }
-    return keys;
+    return target;
 }
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
     }
     return target;
 }
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import M from "./generated/mistica-icons/icon-close-regular.js";
-import W from "./icon-button.js";
-import { useTheme as E, useScreenSize as P } from "./hooks.js";
-import A from "./stack.js";
-import u from "./box.js";
-import $ from "./inline.js";
-import { Text3 as j, Text2 as H } from "./text.js";
-import * as X from "./popover.css-mistica.js";
-import { container as O, arrowWrapper as _, arrow as q, textAlign as C, textContent as F, closeButtonIcon as G } from "./popover.css-mistica.js";
-import { sprinkles as T } from "./sprinkles.css-mistica.js";
-import { vars as k } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as J } from "./utils/dom.js";
-const { defaultPositionDesktop: K, defaultPositionMobile: Q, distanceToTarget: m, marginLeftRightMobile: d, maxWidthDesktop: U, arrowSize: L } = X, Z = (t)=>t || U, V = function() {
-    let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : K, r = arguments.length > 1 ? arguments[1] : void 0;
-    return r && (t === "left" || t === "right") ? Q : t;
-}, tt = (t, r, e)=>// in iOS, when the webview is rendered offscreen (eg. acccount tab), window.innerWidth value is wrong, it returns strange values like 0 or 80.
-    t ? (r ? window.screen.width : window.innerWidth) - d * 2 : Z(e), et = (t, r, e, s)=>{
-    const a = {
-        right: {
-            left: e.width + m,
-            top: e.height / 2,
-            transform: "translateY(-50%)",
-            WebkitTransform: "translateY(-50%)"
-        },
-        left: {
-            left: e.left - r - m,
-            top: e.height / 2,
-            transform: "translateY(-50%)",
-            WebkitTransform: "translateY(-50%)"
-        },
-        top: {
-            transform: "translateY(-100%)",
-            WebkitTransform: "translateY(-100%)",
-            top: -m,
-            left: s ? d - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
-        },
-        bottom: {
-            top: e.height + m,
-            left: s ? d - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
-        }
-    }[t], f = {
-        right: {
-            right: "100%",
-            top: "50%",
-            transform: "translateY(-100%) rotate(90deg)",
-            transformOrigin: "bottom"
-        },
-        left: {
-            left: "100%",
-            top: "50%",
-            transform: "translateY(-100%) rotate(-90deg)",
-            transformOrigin: "bottom"
-        },
-        top: {
-            top: "100%",
-            left: a.left === 0 ? e.width / 2 : "50%",
-            transform: "translateX(-50%)"
-        },
-        bottom: {
-            bottom: "100%",
-            left: a.left === 0 ? e.width / 2 : "50%",
-            transform: "translateX(-50%) rotate(180deg)"
-        }
-    }[t];
-    return s && (f.left = e.parentLeft + e.width / 2 - d), {
-        containerStyles: a,
-        arrowStyles: f
-    };
-}, N = (t)=>t ? {
-        left: t.offsetLeft,
-        top: t.offsetTop,
-        width: t.offsetWidth,
-        height: t.offsetHeight,
-        // @ts-expect-error - parentNode must exist
-        parentLeft: t.parentNode.offsetLeft
-    } : null, rt = (param)=>{
-    let { description: t, title: r, onClose: e, trackingEvent: s, position: n, width: a, target: w, asset: f, isVisible: g = !0, extra: Y, dataAttributes: B } = param;
-    const { texts: R, isIos: z, isDarkMode: D } = E(), { isTabletOrSmaller: h } = P(), [x, b] = c.useState(null), p = c.useRef(null);
-    n = V(n, h);
-    const y = tt(h, z, a), S = D ? 1 : 0.2;
-    c.useEffect(()=>{
-        const l = ()=>{
-            b(N(p.current));
-        };
-        return l(), window.addEventListener("resize", l), ()=>{
-            window.removeEventListener("resize", l);
-        };
-    }, []), c.useEffect(()=>{
-        b(N(p.current));
-    }, [
-        g
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { BaseTooltip as h } from "./tooltip.js";
+import u from "./inline.js";
+import x from "./stack.js";
+import { Text3 as g, Text2 as v } from "./text.js";
+import a from "./box.js";
+import { content as P } from "./popover.css-mistica.js";
+import { vars as y } from "./skins/skin-contract.css-mistica.js";
+const T = (_param)=>{
+    var { open: m, isVisible: c, extra: l, children: p, onClose: i = ()=>{}, dataAttributes: s, trackingEvent: f, title: o, description: e, asset: n } = _param, d = _object_without_properties(_param, [
+        "open",
+        "isVisible",
+        "extra",
+        "children",
+        "onClose",
+        "dataAttributes",
+        "trackingEvent",
+        "title",
+        "description",
+        "asset"
     ]);
-    let v = null;
-    if (g && x) {
-        const { containerStyles: l, arrowStyles: I } = et(n, y, x, h);
-        v = /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
-            className: O,
-            style: _object_spread({
-                width: y,
-                boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${S})`
-            }, l)
-        }, J(B, "Popover")), {
+    return /* @__PURE__ */ r(h, _object_spread({
+        content: /* @__PURE__ */ t(a, {
+            className: P,
             children: [
-                /* @__PURE__ */ o("div", {
-                    className: _,
-                    style: I,
-                    children: /* @__PURE__ */ o("div", {
-                        className: q,
-                        style: {
-                            width: L,
-                            height: L,
-                            boxSizing: "border-box",
-                            boxShadow: n === "bottom" ? "initial" : `0 0 4px 0 rgba(0, 0, 0, ${S})`
-                        }
-                    })
-                }),
-                /* @__PURE__ */ i(u, {
-                    padding: 16,
-                    children: [
-                        /* @__PURE__ */ o(u, {
-                            paddingRight: 24,
-                            className: T({
-                                display: "flex"
-                            }),
-                            children: /* @__PURE__ */ i($, {
-                                space: 16,
+                (o || e || n) && /* @__PURE__ */ r(a, {
+                    paddingRight: 16,
+                    children: /* @__PURE__ */ t(u, {
+                        space: 16,
+                        children: [
+                            n,
+                            /* @__PURE__ */ t(x, {
+                                space: 4,
                                 children: [
-                                    f,
-                                    /* @__PURE__ */ o(u, {
-                                        className: C,
-                                        children: /* @__PURE__ */ i(A, {
-                                            space: 4,
-                                            className: F,
-                                            children: [
-                                                r && /* @__PURE__ */ o(j, {
-                                                    regular: !0,
-                                                    children: r
-                                                }),
-                                                /* @__PURE__ */ o(H, {
-                                                    regular: !0,
-                                                    color: k.colors.textSecondary,
-                                                    children: t
-                                                })
-                                            ]
-                                        })
+                                    o && /* @__PURE__ */ r(g, {
+                                        regular: !0,
+                                        children: o
+                                    }),
+                                    e && /* @__PURE__ */ r(v, {
+                                        regular: !0,
+                                        color: y.colors.textSecondary,
+                                        children: e
                                     })
                                 ]
                             })
-                        }),
-                        /* @__PURE__ */ o(W, {
-                            className: G,
-                            onPress: ()=>{
-                                e == null || e();
-                            },
-                            trackingEvent: s,
-                            "aria-label": R.modalClose,
-                            children: /* @__PURE__ */ o(M, {
-                                color: k.colors.neutralHigh
-                            })
-                        }),
-                        Y
-                    ]
-                })
+                        ]
+                    })
+                }),
+                l !== null && l !== void 0 ? l : p
             ]
-        }));
-    }
-    return /* @__PURE__ */ i("div", {
-        className: T({
-            position: "relative"
         }),
-        children: [
-            /* @__PURE__ */ o("div", {
-                ref: p,
-                children: w
-            }),
-            v
-        ]
-    });
-}, ut = rt;
-export { ut as default };
+        centerContent: !1,
+        open: m !== null && m !== void 0 ? m : c,
+        hasPointerInteractionOnly: !0,
+        delay: !1,
+        onClose: i,
+        trackingEvent: f,
+        dataAttributes: _object_spread({
+            "component-name": "Popover"
+        }, s)
+    }, d));
+}, N = T;
+export { N as default };