@caseparts-org/caseblocks 0.0.104 → 0.0.105

package/dist/atoms/Tooltip/Tooltip.js

@@ -6,22 +6,22 @@ import '../../assets/Tooltip.css';const I = "_tooltip_17o7a_1", O = "_content_17
   tooltip: I,
   content: O
 };
-function $(u) {
-  return u ? u.includes(" ") ? u : `${u} center` : "top center";
+function $(l) {
+  return l ? l.includes(" ") ? l : `${l} center` : "top center";
 }
-function q(u) {
-  const w = $(u).toLowerCase(), [s, t] = w.split(" ");
+function q(l) {
+  const w = $(l).toLowerCase(), [s, t] = w.split(" ");
   return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: t === "left" || t === "top" ? "start" : t === "right" || t === "bottom" ? "end" : "center" };
 }
-function G(u, w, s, t, d = 0) {
-  const n = u.getBoundingClientRect(), f = w.getBoundingClientRect();
+function G(l, w, s, t, d = 0) {
+  const n = l.getBoundingClientRect(), f = w.getBoundingClientRect();
   let a = 0, c = 0;
   s === "top" ? a = n.top - f.height - d : s === "bottom" ? a = n.bottom + d : s === "left" ? c = n.left - f.width - d : s === "right" && (c = n.right + d), s === "top" || s === "bottom" ? t === "start" ? c = n.left : t === "end" ? c = n.right - f.width : c = n.left + n.width / 2 - f.width / 2 : t === "start" ? a = n.top : t === "end" ? a = n.bottom - f.height : a = n.top + n.height / 2 - f.height / 2;
-  const E = window.innerWidth, v = window.innerHeight;
-  return a = Math.max(4, Math.min(v - f.height - 4, a)), c = Math.max(4, Math.min(E - f.width - 4, c)), { top: a, left: c };
+  const y = window.innerWidth, v = window.innerHeight;
+  return a = Math.max(4, Math.min(v - f.height - 4, a)), c = Math.max(4, Math.min(y - f.width - 4, c)), { top: a, left: c };
 }
 const U = ({
-  tooltipClassName: u,
+  tooltipClassName: l,
   contentClassName: w,
   children: s,
   trigger: t,
@@ -30,50 +30,53 @@ const U = ({
   openDelay: f = 150,
   closeDelay: a = 100,
   leaveGraceMs: c = 0,
-  tooltipOffset: E = 4
+  tooltipOffset: y = 4
 }) => {
-  const { side: v, align: b } = q(d), [o, R] = i.useState(!1), [m, C] = i.useState(null), T = i.useRef(null), g = i.useRef(null), x = i.useRef(null), y = i.useRef(null), L = i.useRef(null), h = i.useRef(!1), p = (e) => {
+  const { side: v, align: T } = q(d), [o, L] = i.useState(!1), [m, C] = i.useState(null), P = i.useRef(null), g = i.useRef(null), x = i.useRef(null), E = i.useRef(null), R = i.useRef(null), h = i.useRef(!1), p = (e) => {
     e.current && (window.clearTimeout(e.current), e.current = null);
   }, B = () => {
-    p(x), p(y), p(L);
+    p(x), p(E), p(R);
   };
   i.useEffect(() => () => B(), []);
   const k = () => {
-    n || o || (p(x), x.current = window.setTimeout(() => R(!0), f));
+    n || o || (p(x), x.current = window.setTimeout(() => L(!0), f));
   }, _ = () => {
-    o && (p(y), y.current = window.setTimeout(() => {
-      h.current || R(!1);
+    o && (p(E), E.current = window.setTimeout(() => {
+      const e = P.current;
+      e && e.matches(":hover") || h.current || L(!1);
     }, a));
   }, z = () => {
     if (o) {
-      if (p(L), c <= 0) {
+      if (p(R), c <= 0) {
         _();
         return;
       }
-      L.current = window.setTimeout(() => {
+      R.current = window.setTimeout(() => {
         h.current || _();
       }, c);
     }
-  }, P = (e, r) => (l) => {
-    e == null || e(l), r == null || r(l);
+  }, b = (e, r) => (u) => {
+    e == null || e(u), r == null || r(u);
   }, N = i.cloneElement(t, {
     ref: (e) => {
       const { ref: r } = t;
-      typeof r == "function" ? r(e) : r && (r.current = e), T.current = e;
+      typeof r == "function" ? r(e) : r && (r.current = e), P.current = e;
     },
-    onPointerEnter: P(t.props.onPointerEnter, k),
-    onPointerLeave: P(t.props.onPointerLeave, z),
-    onFocus: P(t.props.onFocus, k),
-    onBlur: P(t.props.onBlur, _),
+    onPointerEnter: b(t.props.onPointerEnter, () => {
+      p(E), p(R), o || k();
+    }),
+    onPointerLeave: b(t.props.onPointerLeave, z),
+    onFocus: b(t.props.onFocus, k),
+    onBlur: b(t.props.onBlur, _),
     "aria-describedby": o ? "tooltip-popup" : void 0,
     style: { ...t.props.style || {}, outline: "none" }
   });
   return i.useEffect(() => {
-    n && o && (B(), R(!1));
+    n && o && (B(), L(!1));
   }, [n]), i.useEffect(() => {
     if (!o) return;
     const e = (r) => {
-      r.key === "Escape" && R(!1);
+      r.key === "Escape" && L(!1);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
   }, [o]), i.useLayoutEffect(() => {
@@ -81,21 +84,21 @@ const U = ({
       C(null);
       return;
     }
-    const e = T.current, r = g.current;
+    const e = P.current, r = g.current;
     if (!e || !r) return;
-    const l = () => {
-      C(G(e, r, v, b, E));
+    const u = () => {
+      C(G(e, r, v, T, y));
     };
-    return l(), window.addEventListener("resize", l), window.addEventListener("scroll", l, !0), () => {
-      window.removeEventListener("resize", l), window.removeEventListener("scroll", l, !0);
+    return u(), window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), () => {
+      window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0);
     };
-  }, [o, v, b, s, E]), i.useEffect(() => {
+  }, [o, v, T, s, y]), i.useEffect(() => {
     if (!o) return;
     const e = (r) => {
-      const l = T.current, F = g.current;
-      if (!l || !F) return;
+      const u = P.current, F = g.current;
+      if (!u || !F) return;
       const M = r.target;
-      !l.contains(M) && !F.contains(M) && (h.current = !1, z());
+      !u.contains(M) && !F.contains(M) && (h.current = !1, z());
     };
     return document.addEventListener("pointermove", e), () => document.removeEventListener("pointermove", e);
   }, [o]), i.useEffect(() => {
@@ -111,8 +114,8 @@ const U = ({
           role: "tooltip",
           "aria-hidden": !o,
           "data-side": v,
-          "data-align": b,
-          className: j(H.tooltip, u),
+          "data-align": T,
+          className: j(H.tooltip, l),
           style: {
             position: "absolute",
             top: (m == null ? void 0 : m.top) ?? 0,
@@ -121,7 +124,7 @@ const U = ({
             zIndex: 10
           },
           onPointerEnter: () => {
-            h.current = !0, p(y), p(L);
+            h.current = !0, p(E), p(R);
           },
           onPointerLeave: () => {
             h.current = !1, z();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.104",
+  "version": "0.0.105",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",