@telefonica/mistica 14.42.1 → 14.44.0

package/dist/popover.js

@@ -6,68 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ut;
+        return N;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
-const _hooks = require("./hooks.js");
-const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _tooltip = require("./tooltip.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _text = require("./text.js");
-const _popovercssmistica = /*#__PURE__*/ _interop_require_wildcard(require("./popover.css-mistica.js"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _popovercssmistica = require("./popover.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
-const _dom = require("./utils/dom.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -96,193 +50,84 @@ 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;
 }
-const { defaultPositionDesktop: K, defaultPositionMobile: Q, distanceToTarget: m, marginLeftRightMobile: d, maxWidthDesktop: U, arrowSize: L } = _popovercssmistica, 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)=>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 } = (0, _hooks.useTheme)(), { isTabletOrSmaller: h } = (0, _hooks.useScreenSize)(), [x, b] = _react.useState(null), p = _react.useRef(null);
-    n = V(n, h);
-    const y = tt(h, z, a), S = D ? 1 : 0.2;
-    _react.useEffect(()=>{
-        const l = ()=>{
-            b(N(p.current));
-        };
-        return l(), window.addEventListener("resize", l), ()=>{
-            window.removeEventListener("resize", l);
-        };
-    }, []), _react.useEffect(()=>{
-        b(N(p.current));
-    }, [
-        g
+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__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-            className: _popovercssmistica.container,
-            style: _object_spread({
-                width: y,
-                boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${S})`
-            }, l)
-        }, (0, _dom.getPrefixedDataAttributes)(B, "Popover")), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.BaseTooltip, _object_spread({
+        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+            className: _popovercssmistica.content,
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _popovercssmistica.arrowWrapper,
-                    style: I,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _popovercssmistica.arrow,
-                        style: {
-                            width: L,
-                            height: L,
-                            boxSizing: "border-box",
-                            boxShadow: n === "bottom" ? "initial" : `0 0 4px 0 rgba(0, 0, 0, ${S})`
-                        }
-                    })
-                }),
-                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
-                    padding: 16,
-                    children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                            paddingRight: 24,
-                            className: (0, _sprinklescssmistica.sprinkles)({
-                                display: "flex"
-                            }),
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                space: 16,
+                (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingRight: 16,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: 16,
+                        children: [
+                            n,
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                space: 4,
                                 children: [
-                                    f,
-                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                        className: _popovercssmistica.textAlign,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                            space: 4,
-                                            className: _popovercssmistica.textContent,
-                                            children: [
-                                                r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                    regular: !0,
-                                                    children: r
-                                                }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                    regular: !0,
-                                                    color: _skincontractcssmistica.vars.colors.textSecondary,
-                                                    children: t
-                                                })
-                                            ]
-                                        })
+                                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                        regular: !0,
+                                        children: o
+                                    }),
+                                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        regular: !0,
+                                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                                        children: e
                                     })
                                 ]
                             })
-                        }),
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                            className: _popovercssmistica.closeButtonIcon,
-                            onPress: ()=>{
-                                e == null || e();
-                            },
-                            trackingEvent: s,
-                            "aria-label": R.modalClose,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
-                                color: _skincontractcssmistica.vars.colors.neutralHigh
-                            })
-                        }),
-                        Y
-                    ]
-                })
+                        ]
+                    })
+                }),
+                l !== null && l !== void 0 ? l : p
             ]
-        }));
-    }
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        className: (0, _sprinklescssmistica.sprinkles)({
-            position: "relative"
         }),
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: p,
-                children: w
-            }),
-            v
-        ]
-    });
-}, ut = rt;
+        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;