bmi-next-brokers 2.3.8 → 2.3.9

package/dist/assets/index8.css

@@ -1 +1 @@
-._tooltip_11uqe_1{position:fixed;background-color:#fff;color:#000;border:1px solid rgba(0,0,0,.2);border-radius:6px;z-index:9000}._scrollableContent_11uqe_10{display:flex;padding:8px;overflow-y:auto;word-wrap:break-word}._scrollableContent_11uqe_10::-webkit-scrollbar{display:none}._tooltip_11uqe_1:before{content:"";position:absolute;width:0;height:0}._right_11uqe_30{transform:translateY(-50%)}._right_11uqe_30:before{top:calc(50% + var(--arrow-offset, 0px));left:-6px;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid rgba(0,0,0,.1)}._left_11uqe_44{transform:translateY(-50%)}._left_11uqe_44:before{top:calc(50% + var(--arrow-offset, 0px));right:-6px;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid rgba(0,0,0,.1)}._top_11uqe_58{transform:translate(-50%)}._top_11uqe_58:before{bottom:-6px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.1)}._bottom_11uqe_72{transform:translate(-50%)}._bottom_11uqe_72:before{top:-6px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(0,0,0,.1)}
+._tooltip_mbgpt_1{position:fixed;background-color:#eef3fc;border:1px solid #2054a5;border-radius:6px;z-index:9000;font-size:12px;font-family:var(--font-regular);line-height:normal;color:#2054a5}._scrollableContent_mbgpt_13{display:flex;padding:8px;overflow-y:auto;word-wrap:break-word}._scrollableContent_mbgpt_13::-webkit-scrollbar{display:none}._tooltip_mbgpt_1:before,._tooltip_mbgpt_1:after{content:"";position:absolute;width:0;height:0}._right_mbgpt_34{transform:translateY(-50%)}._right_mbgpt_34:before{top:calc(50% + var(--arrow-offset, 0px));left:-8px;transform:translateY(-50%);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid #2054a5}._right_mbgpt_34:after{top:calc(50% + var(--arrow-offset, 0px));left:-6px;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid #eef3fc}._left_mbgpt_59{transform:translateY(-50%)}._left_mbgpt_59:before{top:calc(50% + var(--arrow-offset, 0px));right:-8px;transform:translateY(-50%);border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:8px solid #2054a5}._left_mbgpt_59:after{top:calc(50% + var(--arrow-offset, 0px));right:-6px;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid #eef3fc}._top_mbgpt_82{transform:translate(-50%)}._top_mbgpt_82:before{bottom:-8px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #2054a5}._top_mbgpt_82:after{bottom:-6px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #eef3fc}._bottom_mbgpt_105{transform:translate(-50%)}._bottom_mbgpt_105:before{top:-8px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:8px solid #2054a5}._bottom_mbgpt_105:after{top:-6px;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #eef3fc}

package/dist/components/badge/index.js

@@ -18,7 +18,7 @@ import '../../assets/index.css';const p = "_badge_c0j5t_1", _ = "_fullWidth_c0j5
   ...A
 }) => {
   const m = {
-    small: "small5Medium",
+    small: "small4Medium",
     medium: "small3Medium",
     large: "small3Medium"
   }, i = {

package/dist/components/navbar/menuItem/index.js

@@ -30,7 +30,7 @@ import '../../../assets/index14.css';const I = "_menuItem_16vvj_1", p = "_conten
           o && /* @__PURE__ */ r("span", { className: "bodyRegular", children: e.label }),
           e.iconBefore && o && /* @__PURE__ */ r("div", { className: t.iconBefore, children: /* @__PURE__ */ r(s, { name: e.iconBefore, width: 20, height: 20 }) })
         ] }),
-        !o && /* @__PURE__ */ r(u, { target: c.current, visible: v, gap: 20, children: e.label })
+        !o && /* @__PURE__ */ r(u, { target: c.current, visible: v, gap: 20, delay: 0, children: e.label })
       ]
     }
   );

package/dist/components/tooltip/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Posicionamiento del Tooltip
+ */
+type Placement = "right" | "left" | "top" | "bottom";
 /**
  * Interfaz de props Tooltip.
  */
@@ -6,6 +10,9 @@ interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     visible: boolean;
     gap?: number;
+    defaultPlacement?: Placement;
+    /** Milisegundos de hover antes de mostrar el tooltip. Por defecto 1000 ms. */
+    delay?: number;
 }
-export declare const Tooltip: ({ target, children, visible, style, gap, }: TooltipProps) => import('react').ReactPortal | null;
+export declare const Tooltip: ({ target, children, visible, style, gap, defaultPlacement, delay, }: TooltipProps) => import('react').ReactPortal | null;
 export {};

package/dist/components/tooltip/index.js

@@ -1,107 +1,130 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useRef as M, useState as g, useLayoutEffect as E, useEffect as $ } from "react";
-import { createPortal as A } from "react-dom";
-import '../../assets/index8.css';const N = "_tooltip_11uqe_1", V = "_scrollableContent_11uqe_10", I = "_right_11uqe_30", S = "_left_11uqe_44", k = "_top_11uqe_58", D = "_bottom_11uqe_72", _ = {
-  tooltip: N,
-  scrollableContent: V,
-  right: I,
-  left: S,
-  top: k,
-  bottom: D
-}, Q = ({
+import { jsx as j } from "react/jsx-runtime";
+import { useRef as D, useState as a, useEffect as k, useLayoutEffect as L } from "react";
+import { createPortal as F } from "react-dom";
+import '../../assets/index8.css';const G = "_tooltip_mbgpt_1", J = "_scrollableContent_mbgpt_13", K = "_right_mbgpt_34", Q = "_left_mbgpt_59", U = "_top_mbgpt_82", X = "_bottom_mbgpt_105", g = {
+  tooltip: G,
+  scrollableContent: J,
+  right: K,
+  left: Q,
+  top: U,
+  bottom: X
+}, nt = ({
   target: e,
-  children: C,
-  visible: s,
-  style: j,
-  gap: u = 12
+  children: v,
+  visible: _,
+  style: O,
+  gap: r = 12,
+  defaultPlacement: h = "right",
+  delay: C = 500
 }) => {
-  const n = M(null), [q, p] = g("top"), [v, m] = g({ top: 0, left: 0 }), [y, b] = g(0), x = 15, l = 7.5, i = () => {
+  const n = D(null), [c, x] = a(!1), [W, y] = a(h);
+  k(() => {
+    if (!_) {
+      x(!1);
+      return;
+    }
+    const t = setTimeout(() => x(!0), C);
+    return () => clearTimeout(t);
+  }, [_, C]);
+  const [R, H] = a({ top: 0, left: 0 }), [$, T] = a(0), z = 15, f = 7.5, l = () => {
     if (!e || !n.current) return;
-    const t = e.getBoundingClientRect(), w = n.current.offsetWidth, c = n.current.offsetHeight, h = window.innerHeight, L = window.innerWidth - t.right, O = t.left, P = h - t.bottom, T = (o) => {
-      const r = l, f = h - c - l;
-      return Math.max(r, Math.min(o, f));
-    }, R = (o) => {
-      const r = o + c / 2, f = o - c / 2;
-      return r + l > h ? h - c / 2 - l : f - l < 0 ? c / 2 + l : o;
-    }, a = (o) => {
+    const t = e.getBoundingClientRect(), b = n.current.offsetWidth, s = n.current.offsetHeight, m = window.innerHeight, M = window.innerWidth - t.right, P = t.left, A = m - t.bottom, B = (o) => {
+      const i = f, u = m - s - f;
+      return Math.max(i, Math.min(o, u));
+    }, E = (o) => {
+      const i = o + s / 2, u = o - s / 2;
+      return i + f > m ? m - s / 2 - f : u - f < 0 ? s / 2 + f : o;
+    }, N = (o) => {
       if (!e || !n.current) return;
-      const r = e.getBoundingClientRect(), f = r.left + r.width / 2, d = n.current.getBoundingClientRect(), W = d.left + d.width / 2;
+      const i = e.getBoundingClientRect(), u = i.left + i.width / 2, p = n.current.getBoundingClientRect(), V = p.left + p.width / 2;
       if (o === "right" || o === "left") {
-        const z = r.top + r.height / 2, H = d.top + d.height / 2;
-        b(z - H);
+        const I = i.top + i.height / 2, q = p.top + p.height / 2;
+        T(I - q);
       } else
-        b(f - W);
-    };
-    if (L >= w) {
-      p("right");
-      const o = t.top + t.height / 2;
-      m({
-        top: R(o),
-        left: t.right + u
-        //a la derecha del target con gap
-      }), setTimeout(() => a("right"), 0);
-    } else if (O >= w) {
-      p("left");
-      const o = t.top + t.height / 2;
-      m({
-        top: R(o),
-        left: t.right - t.width - w - u
-        //a la izquierda del target con gap
-      }), setTimeout(() => a("left"), 0);
-    } else if (P >= c) {
-      p("bottom");
-      const o = t.bottom + u;
-      m({
-        top: T(o),
-        //reajustar posición
-        left: t.left + t.width / 2
-        //centrado en el target
-      }), setTimeout(() => a("bottom"), 0);
-    } else {
-      p("top");
-      const o = t.top - c - u;
-      m({
-        top: T(o),
-        //reajustar posición
-        left: t.left + t.width / 2
-        //centrado en el target
-      }), setTimeout(() => a("top"), 0);
+        T(u - V);
+    }, S = (o) => {
+      switch (o) {
+        case "right":
+          return M >= b + r;
+        case "left":
+          return P >= b + r;
+        case "bottom":
+          return A >= s + r;
+        case "top":
+          return t.top >= s + r;
+      }
+    }, w = [
+      h,
+      ...{
+        top: ["bottom", "right", "left"],
+        bottom: ["top", "right", "left"],
+        right: ["left", "top", "bottom"],
+        left: ["right", "top", "bottom"]
+      }[h]
+    ].find(S) ?? h;
+    let d = { top: 0, left: 0 };
+    switch (w) {
+      case "right":
+        d = {
+          top: E(t.top + t.height / 2),
+          left: t.right + r
+        };
+        break;
+      case "left":
+        d = {
+          top: E(t.top + t.height / 2),
+          left: t.right - t.width - b - r
+        };
+        break;
+      case "bottom":
+        d = {
+          top: B(t.bottom + r),
+          left: t.left + t.width / 2
+        };
+        break;
+      case "top":
+        d = {
+          top: B(t.top - s - r),
+          left: t.left + t.width / 2
+        };
+        break;
     }
+    y(w), H(d), setTimeout(() => N(w), 0);
   };
-  return E(() => {
-    s && i();
-  }, [s, C]), E(() => {
-    if (!n.current || !s) return;
-    const t = new ResizeObserver(i);
+  return L(() => {
+    c && l();
+  }, [c, v]), L(() => {
+    if (!n.current || !c) return;
+    const t = new ResizeObserver(l);
     return t.observe(n.current), () => t.disconnect();
-  }, [s]), $(() => {
-    if (!e || !s) return;
-    const t = new ResizeObserver(i);
-    return t.observe(e), window.addEventListener("scroll", i, !0), window.addEventListener("resize", i), () => {
-      t.disconnect(), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i);
+  }, [c]), k(() => {
+    if (!e || !c) return;
+    const t = new ResizeObserver(l);
+    return t.observe(e), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
+      t.disconnect(), window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
     };
-  }, [e, s]), !s || !e ? null : A(
-    /* @__PURE__ */ B(
+  }, [e, c]), !c || !e ? null : F(
+    /* @__PURE__ */ j(
       "div",
       {
         ref: n,
-        className: `small3Medium ${_.tooltip} ${_[q]}`,
+        className: `${g.tooltip} ${g[W]}`,
         style: {
-          top: v.top,
-          left: v.left,
-          "--arrow-offset": `${y}px`,
+          top: R.top,
+          left: R.left,
+          "--arrow-offset": `${$}px`,
           //posición flecha tooltip
-          ...j
+          ...O
         },
-        children: /* @__PURE__ */ B(
+        children: /* @__PURE__ */ j(
           "div",
           {
-            className: _.scrollableContent,
+            className: g.scrollableContent,
             style: {
-              maxWidth: `calc(85dvw - ${x}px)`,
-              maxHeight: `calc(100dvh - ${x}px)`
+              maxWidth: `calc(85dvw - ${z}px)`,
+              maxHeight: `calc(100dvh - ${z}px)`
             },
-            children: C
+            children: v
           }
         )
       }
@@ -110,5 +133,5 @@ import '../../assets/index8.css';const N = "_tooltip_11uqe_1", V = "_scrollableC
   );
 };
 export {
-  Q as Tooltip
+  nt as Tooltip
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",