@telefonica/mistica 12.9.0 → 12.9.1

package/dist-es/tooltip.js

@@ -1,3 +1,108 @@
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+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;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+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 _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        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];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(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;
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+var _typeof = function(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 * as i from "react";
 import j from "classnames";
 import { CSSTransition as K } from "react-transition-group";
@@ -9,285 +114,311 @@ import { TAB as J } from "./utils/key-codes.js";
 import { createUseStyles as A } from "./jss.js";
 import Q from "./stack.js";
 import { jsxs as w, Fragment as Z, jsx as s } from "./_virtual/jsx-runtime.js";
-const _ = "bottom", tt = "top", g = 12, h = 4 + g, b = 16, et = 340, rt = g * 2, ot = g, M = 500, p = 12, k = "cubic-bezier(0.215, 0.61, 0.355, 1)", nt = 500, X = () => {
-}, at = A((t) => {
-  const c = t.isDarkMode ? 1 : 0.2;
-  return {
-    arrow: {
-      position: "absolute",
-      backgroundColor: t.colors.backgroundContainer,
-      width: g,
-      height: g,
-      top: 0,
-      left: "50%",
-      transform: "translate(-50%, -50%) rotate(45deg)",
-      border: `1px solid ${t.colors.border}`,
-      borderRadius: 2
-    },
-    arrowTop: {
-      top: "100%",
-      left: "50%",
-      transform: "translateX(-50%)",
-      "& > div": {
-        boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${c})`
-      }
-    },
-    arrowRight: {
-      right: "100%",
-      top: "50%",
-      transform: "translateY(-100%) rotate(90deg)",
-      transformOrigin: "bottom",
-      "& > div": {
-        boxShadow: `0 0 4px 0 rgba(0, 0, 0, ${c})`
-      }
-    },
-    arrowBottom: {
-      bottom: "100%",
-      left: "50%",
-      transform: "translateX(-50%) rotate(180deg)"
-    },
-    arrowLeft: {
-      left: "100%",
-      top: "50%",
-      transform: "translateY(-100%) rotate(-90deg)",
-      transformOrigin: "bottom",
-      "& > div": {
-        boxShadow: `0 0 4px 0 rgba(0, 0, 0, ${c})`
-      }
-    },
-    arrowWrapper: {
-      position: "absolute",
-      color: t.colors.backgroundContainer,
-      width: rt,
-      height: ot,
-      overflow: "hidden"
-    },
-    wrapper: {
-      display: "inline-block"
-    },
-    container: {
-      position: "absolute",
-      left: 16,
-      width: "auto",
-      boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${c})`,
-      padding: 8,
-      backgroundColor: t.colors.backgroundContainer,
-      zIndex: 50,
-      border: `1px solid ${t.colors.border}`,
-      borderRadius: 8
-    }
-  };
-}), it = A(() => ({
-  enter: {
-    transform: ({
-      position: t
-    }) => t === "bottom" ? `translateY(${p}px)` : t === "top" ? `translateY(calc(-100% - ${p}px))` : t === "right" ? `translateX(${p}px) translateY(-50%)` : t === "left" ? `translateX(-${p}px) translateY(-50%)` : `translateY(-${p}px)`
-  },
-  enterActive: {
-    animationName: ({
-      position: t
-    }) => t === "top" ? "$fadeInTop" : t === "bottom" ? "$fadeInBottom" : "$fadeInX",
-    animationFillMode: "both",
-    animationDuration: `${M}ms`,
-    animationTimingFunction: k
-  },
-  enterDone: {
-    transform: ({
-      position: t
-    }) => t === "top" ? "translateY(-100%)" : t === "bottom" ? "translateY(0)" : "translateY(-50%)"
-  },
-  exit: {
-    transform: ({
-      position: t
-    }) => t === "bottom" ? "translateY(0)" : t === "top" ? "translateY(-100%)" : t === "right" || t === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)",
-    opacity: 1,
-    transition: `opacity 0.3s ${k}`
-  },
-  exitActive: {
-    animation: `$fadeOut 0.3s ${k} both`
-  },
-  "@keyframes fadeInBottom": {
-    from: {
-      opacity: 0
-    },
-    "40%": {
-      opacity: 1
-    },
-    to: {
-      opacity: 1,
-      transform: "translateY(0)"
-    }
-  },
-  "@keyframes fadeInTop": {
-    from: {
-      opacity: 0
-    },
-    "40%": {
-      opacity: 1
-    },
-    to: {
-      opacity: 1,
-      transform: "translateY(-100%)"
-    }
-  },
-  "@keyframes fadeInX": {
-    from: {
-      opacity: 0
-    },
-    "40%": {
-      opacity: 1
-    },
-    to: {
-      opacity: 1,
-      transform: "translateX(0) translateY(-50%)"
-    }
-  },
-  "@keyframes fadeOut": {
-    from: {
-      opacity: 1
-    },
-    to: {
-      opacity: 0
-    }
-  }
-})), st = (t) => t || et, Tt = ({
-  children: t,
-  extra: c,
-  description: x,
-  target: W,
-  title: y,
-  targetLabel: B,
-  delay: L = !0,
-  ...S
-}) => {
-  const [l, T] = i.useState(!1), {
-    isTabletOrSmaller: u
-  } = H(), P = U(), n = i.useRef(!1), r = i.useRef(null), f = i.useRef(null), v = i.useRef(null), e = i.useRef({
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
-  }), Y = ((a = _) => u && (a === "left" || a === "right") ? tt : a)(S.position), o = at(), d = it({
-    position: Y
-  }), O = typeof window < "u" ? window.matchMedia("(pointer: coarse)").matches : !1, R = () => {
-    l && T(!1);
-  };
-  i.useEffect(() => (window.addEventListener("resize", R), () => {
-    window.removeEventListener("resize", R);
-  }));
-  const C = () => {
-    T(!1);
-  }, m = () => {
-    !v.current || (e.current = v.current.getBoundingClientRect(), T(!l));
-  }, N = () => {
-    l || m();
-  }, z = (a) => {
-    a.keyCode === J && C();
-  }, F = (a, $) => typeof window > "u" ? {} : {
-    right: {
-      left: e.current.right + h,
-      top: window.pageYOffset + e.current.top + e.current.height / 2
-    },
-    left: {
-      left: e.current.left - $ - h,
-      top: window.pageYOffset + e.current.top + e.current.height / 2
-    },
-    top: {
-      top: window.pageYOffset + e.current.top - h,
-      left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
-    },
-    bottom: {
-      top: window.pageYOffset + e.current.bottom + h,
-      left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
-    }
-  }[a], E = () => u ? {
-    left: e.current.left + e.current.width / 2 - b
-  } : {}, D = (() => u ? window.innerWidth - b * 2 : st(S.width))(), V = {
-    top: o.arrowTop,
-    bottom: o.arrowBottom,
-    left: o.arrowLeft,
-    right: o.arrowRight
-  };
-  return /* @__PURE__ */ w(Z, {
-    children: [/* @__PURE__ */ s("div", {
-      ref: v,
-      className: o.wrapper,
-      onPointerOver: () => {
-        r.current && (clearTimeout(r.current), r.current = null), !n.current && (n.current = !0, L ? f.current = setTimeout(() => {
-          f.current = null, m();
-        }, nt) : m());
-      },
-      onPointerLeave: O ? X : () => {
-        if (f.current) {
-          clearTimeout(f.current), f.current = null, n.current = !1;
-          return;
+var _ = "bottom", tt = "top", g = 12, h = 4 + g, b = 16, et = 340, rt = g * 2, ot = g, M = 500, p = 12, k = "cubic-bezier(0.215, 0.61, 0.355, 1)", nt = 500, X = function() {}, at = A(function(t) {
+    var c = t.isDarkMode ? 1 : 0.2;
+    return {
+        arrow: {
+            position: "absolute",
+            backgroundColor: t.colors.backgroundContainer,
+            width: g,
+            height: g,
+            top: 0,
+            left: "50%",
+            transform: "translate(-50%, -50%) rotate(45deg)",
+            border: "1px solid ".concat(t.colors.border),
+            borderRadius: 2
+        },
+        arrowTop: {
+            top: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            "& > div": {
+                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(c, ")")
+            }
+        },
+        arrowRight: {
+            right: "100%",
+            top: "50%",
+            transform: "translateY(-100%) rotate(90deg)",
+            transformOrigin: "bottom",
+            "& > div": {
+                boxShadow: "0 0 4px 0 rgba(0, 0, 0, ".concat(c, ")")
+            }
+        },
+        arrowBottom: {
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%) rotate(180deg)"
+        },
+        arrowLeft: {
+            left: "100%",
+            top: "50%",
+            transform: "translateY(-100%) rotate(-90deg)",
+            transformOrigin: "bottom",
+            "& > div": {
+                boxShadow: "0 0 4px 0 rgba(0, 0, 0, ".concat(c, ")")
+            }
+        },
+        arrowWrapper: {
+            position: "absolute",
+            color: t.colors.backgroundContainer,
+            width: rt,
+            height: ot,
+            overflow: "hidden"
+        },
+        wrapper: {
+            display: "inline-block"
+        },
+        container: {
+            position: "absolute",
+            left: 16,
+            width: "auto",
+            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(c, ")"),
+            padding: 8,
+            backgroundColor: t.colors.backgroundContainer,
+            zIndex: 50,
+            border: "1px solid ".concat(t.colors.border),
+            borderRadius: 8
         }
-        r.current = setTimeout(() => {
-          !n.current || (r.current = null, n.current = !1, m());
-        }, 100);
-      },
-      onFocus: N,
-      onKeyDown: z,
-      "touch-action": "auto",
-      role: "button",
-      tabIndex: 0,
-      "aria-describedby": P,
-      "aria-expanded": l,
-      "aria-label": B,
-      children: W
-    }), /* @__PURE__ */ w(q, {
-      children: [l && O && /* @__PURE__ */ s(G, {
-        onPress: C
-      }), /* @__PURE__ */ s(K, {
-        in: l,
-        timeout: M,
-        classNames: {
-          enter: d.enter,
-          enterActive: d.enterActive,
-          enterDone: d.enterDone,
-          exit: d.exit,
-          exitActive: d.exitActive
+    };
+}), it = A(function() {
+    return {
+        enter: {
+            transform: function(param) {
+                var t = param.position;
+                return t === "bottom" ? "translateY(".concat(p, "px)") : t === "top" ? "translateY(calc(-100% - ".concat(p, "px))") : t === "right" ? "translateX(".concat(p, "px) translateY(-50%)") : t === "left" ? "translateX(-".concat(p, "px) translateY(-50%)") : "translateY(-".concat(p, "px)");
+            }
+        },
+        enterActive: {
+            animationName: function(param) {
+                var t = param.position;
+                return t === "top" ? "$fadeInTop" : t === "bottom" ? "$fadeInBottom" : "$fadeInX";
+            },
+            animationFillMode: "both",
+            animationDuration: "".concat(M, "ms"),
+            animationTimingFunction: k
         },
-        unmountOnExit: !0,
-        children: /* @__PURE__ */ w("div", {
-          role: "tooltip",
-          id: P,
-          className: o.container,
-          style: {
-            width: D,
-            ...F(Y, D)
-          },
-          onPointerOver: () => {
-            r.current && (clearTimeout(r.current), r.current = null);
-          },
-          onPointerLeave: O ? X : () => {
-            r.current = setTimeout(() => {
-              !n.current || (r.current = null, n.current = !1, m());
-            }, 100);
-          },
-          children: [/* @__PURE__ */ s("div", {
-            className: j(o.arrowWrapper, V[Y]),
-            style: E(),
-            children: /* @__PURE__ */ s("div", {
-              className: o.arrow
+        enterDone: {
+            transform: function(param) {
+                var t = param.position;
+                return t === "top" ? "translateY(-100%)" : t === "bottom" ? "translateY(0)" : "translateY(-50%)";
+            }
+        },
+        exit: {
+            transform: function(param) {
+                var t = param.position;
+                return t === "bottom" ? "translateY(0)" : t === "top" ? "translateY(-100%)" : t === "right" || t === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)";
+            },
+            opacity: 1,
+            transition: "opacity 0.3s ".concat(k)
+        },
+        exitActive: {
+            animation: "$fadeOut 0.3s ".concat(k, " both")
+        },
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
+        },
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
+        },
+        "@keyframes fadeInX": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateX(0) translateY(-50%)"
+            }
+        },
+        "@keyframes fadeOut": {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
+        }
+    };
+}), st = function(t) {
+    return t || et;
+}, Tt = function(_param) {
+    var t = _param.children, c = _param.extra, x = _param.description, W = _param.target, y = _param.title, B = _param.targetLabel, tmp = _param.delay, L = tmp === void 0 ? !0 : tmp, S = _objectWithoutProperties(_param, [
+        "children",
+        "extra",
+        "description",
+        "target",
+        "title",
+        "targetLabel",
+        "delay"
+    ]);
+    var ref = _slicedToArray(i.useState(!1), 2), l = ref[0], T = ref[1], ref1 = H(), u = ref1.isTabletOrSmaller, P = U(), n = i.useRef(!1), r = i.useRef(null), f = i.useRef(null), v = i.useRef(null), e = i.useRef({
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+        width: 0,
+        height: 0
+    }), Y = function() {
+        var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _;
+        return u && (a === "left" || a === "right") ? tt : a;
+    }(S.position), o = at(), d = it({
+        position: Y
+    }), O = (typeof window === "undefined" ? "undefined" : _typeof(window)) < "u" ? window.matchMedia("(pointer: coarse)").matches : !1, R = function() {
+        l && T(!1);
+    };
+    i.useEffect(function() {
+        return window.addEventListener("resize", R), function() {
+            window.removeEventListener("resize", R);
+        };
+    });
+    var C = function() {
+        T(!1);
+    }, m = function() {
+        !v.current || (e.current = v.current.getBoundingClientRect(), T(!l));
+    }, N = function() {
+        l || m();
+    }, z = function(a) {
+        a.keyCode === J && C();
+    }, F = function(a, $) {
+        return (typeof window === "undefined" ? "undefined" : _typeof(window)) > "u" ? {} : ({
+            right: {
+                left: e.current.right + h,
+                top: window.pageYOffset + e.current.top + e.current.height / 2
+            },
+            left: {
+                left: e.current.left - $ - h,
+                top: window.pageYOffset + e.current.top + e.current.height / 2
+            },
+            top: {
+                top: window.pageYOffset + e.current.top - h,
+                left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
+            },
+            bottom: {
+                top: window.pageYOffset + e.current.bottom + h,
+                left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
+            }
+        })[a];
+    }, E = function() {
+        return u ? {
+            left: e.current.left + e.current.width / 2 - b
+        } : {};
+    }, D = function() {
+        return u ? window.innerWidth - b * 2 : st(S.width);
+    }(), V = {
+        top: o.arrowTop,
+        bottom: o.arrowBottom,
+        left: o.arrowLeft,
+        right: o.arrowRight
+    };
+    return /* @__PURE__ */ w(Z, {
+        children: [
+            /* @__PURE__ */ s("div", {
+                ref: v,
+                className: o.wrapper,
+                onPointerOver: function() {
+                    r.current && (clearTimeout(r.current), r.current = null), !n.current && (n.current = !0, L ? f.current = setTimeout(function() {
+                        f.current = null, m();
+                    }, nt) : m());
+                },
+                onPointerLeave: O ? X : function() {
+                    if (f.current) {
+                        clearTimeout(f.current), f.current = null, n.current = !1;
+                        return;
+                    }
+                    r.current = setTimeout(function() {
+                        !n.current || (r.current = null, n.current = !1, m());
+                    }, 100);
+                },
+                onFocus: N,
+                onKeyDown: z,
+                "touch-action": "auto",
+                role: "button",
+                tabIndex: 0,
+                "aria-describedby": P,
+                "aria-expanded": l,
+                "aria-label": B,
+                children: W
+            }),
+            /* @__PURE__ */ w(q, {
+                children: [
+                    l && O && /* @__PURE__ */ s(G, {
+                        onPress: C
+                    }),
+                    /* @__PURE__ */ s(K, {
+                        in: l,
+                        timeout: M,
+                        classNames: {
+                            enter: d.enter,
+                            enterActive: d.enterActive,
+                            enterDone: d.enterDone,
+                            exit: d.exit,
+                            exitActive: d.exitActive
+                        },
+                        unmountOnExit: !0,
+                        children: /* @__PURE__ */ w("div", {
+                            role: "tooltip",
+                            id: P,
+                            className: o.container,
+                            style: _objectSpread({
+                                width: D
+                            }, F(Y, D)),
+                            onPointerOver: function() {
+                                r.current && (clearTimeout(r.current), r.current = null);
+                            },
+                            onPointerLeave: O ? X : function() {
+                                r.current = setTimeout(function() {
+                                    !n.current || (r.current = null, n.current = !1, m());
+                                }, 100);
+                            },
+                            children: [
+                                /* @__PURE__ */ s("div", {
+                                    className: j(o.arrowWrapper, V[Y]),
+                                    style: E(),
+                                    children: /* @__PURE__ */ s("div", {
+                                        className: o.arrow
+                                    })
+                                }),
+                                (y || x) && /* @__PURE__ */ w(Q, {
+                                    space: 4,
+                                    children: [
+                                        y && /* @__PURE__ */ s(I, {
+                                            medium: !0,
+                                            children: y
+                                        }),
+                                        x && /* @__PURE__ */ s(I, {
+                                            regular: !0,
+                                            children: x
+                                        })
+                                    ]
+                                }),
+                                c || t
+                            ]
+                        })
+                    })
+                ]
             })
-          }), (y || x) && /* @__PURE__ */ w(Q, {
-            space: 4,
-            children: [y && /* @__PURE__ */ s(I, {
-              medium: !0,
-              children: y
-            }), x && /* @__PURE__ */ s(I, {
-              regular: !0,
-              children: x
-            })]
-          }), c || t]
-        })
-      })]
-    })]
-  });
-};
-export {
-  Tt as default
+        ]
+    });
 };
+export { Tt as default };