@cfx-dev/ui-components 5.0.23 → 5.0.24

package/dist/components/Title/Title.js

@@ -1,14 +1,14 @@
-import { jsx as h, jsxs as C, Fragment as M } from "react/jsx-runtime";
-import s from "react";
-import { clsx as O } from "../../utils/clsx.js";
+import { jsx as b, jsxs as O, Fragment as R } from "react/jsx-runtime";
+import a from "react";
+import { clsx as L } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import { useOutlet as y } from "../../utils/hooks/useOutlet.js";
-import { mergeRefs as N } from "../../utils/mergeRefs.js";
-const $ = "cfxui__Title__wrapper__ec63b", A = "cfxui__Title__appearance__9b5a4", F = "cfxui__Title__animated__151a8", I = "cfxui__Title__root__0f286", S = "cfxui__Title__shortcut__85352", p = {
-  wrapper: $,
-  appearance: A,
-  animated: F,
+import { useOutlet as S } from "../../utils/hooks/useOutlet.js";
+import { mergeRefs as k } from "../../utils/mergeRefs.js";
+const N = "cfxui__Title__wrapper__ec63b", $ = "cfxui__Title__appearance__9b5a4", A = "cfxui__Title__animated__151a8", F = "cfxui__Title__root__0f286", I = "cfxui__Title__shortcut__85352", x = {
+  wrapper: N,
+  appearance: $,
+  animated: A,
   "fixed-on-top": "cfxui__Title__fixed-on-top__100f6",
   "fixed-on-top-left": "cfxui__Title__fixed-on-top-left__ec383",
   "fixed-on-bottom": "cfxui__Title__fixed-on-bottom__a00c2",
@@ -16,112 +16,116 @@ const $ = "cfxui__Title__wrapper__ec63b", A = "cfxui__Title__appearance__9b5a4",
   "fixed-on-bottom-right": "cfxui__Title__fixed-on-bottom-right__58fb5",
   "fixed-on-left": "cfxui__Title__fixed-on-left__01d9d",
   "fixed-on-right": "cfxui__Title__fixed-on-right__2c799",
-  root: I,
-  shortcut: S
+  root: F,
+  shortcut: I
 }, _ = 10, j = "title-outlet";
-function D(l, f, [e, o]) {
-  const r = l ? o : o - 20, n = l ? e : e + 16;
+function D(n, c) {
+  var o;
+  return typeof n.computedStyleMap == "function" ? ((o = n.computedStyleMap().get(c)) == null ? void 0 : o.toString()) || "" : window.getComputedStyle(n).getPropertyValue(c) || "";
+}
+function G(n, c, [o, r]) {
+  const e = n ? r : r - 20, s = n ? o : o + 16;
   return {
-    top: `${r}px`,
-    left: `${n}px`,
-    maxWidth: `calc(100vw - ${n}px - 10px)`,
-    animationDelay: `${f}ms`
+    top: `${e}px`,
+    left: `${s}px`,
+    maxWidth: `calc(100vw - ${s}px - 10px)`,
+    animationDelay: `${c}ms`
   };
 }
-function G(l, f) {
-  const {
-    x: e,
-    y: o,
-    width: r,
-    height: n
-  } = l.getBoundingClientRect();
-  let i = 0, t = 0;
-  switch (f) {
+function X(n, c) {
+  const o = D(n, "display") === "contents" ? n.children[0] : n, {
+    x: r,
+    y: e,
+    width: s,
+    height: u
+  } = o.getBoundingClientRect();
+  let t = 0, i = 0;
+  switch (c) {
     case "top":
-      i = e + r / 2, t = o - _;
+      t = r + s / 2, i = e - _;
       break;
     case "top-left":
-      i = e, t = o - _;
+      t = r, i = e - _;
       break;
     case "bottom":
-      i = e + r / 2, t = o + n + _;
+      t = r + s / 2, i = e + u + _;
       break;
     case "bottom-left":
-      i = e, t = o + n + _;
+      t = r, i = e + u + _;
       break;
     case "bottom-right":
-      i = e + r, t = o + n + _;
+      t = r + s, i = e + u + _;
       break;
     case "left":
-      i = e - _, t = o + n / 2;
+      t = r - _, i = e + u / 2;
       break;
     case "right":
-      i = e + r + _, t = o + n / 2;
+      t = r + s + _, i = e + u / 2;
       break;
   }
-  return [i, t];
+  return [t, i];
 }
-function H(l) {
+function z(n) {
   const {
-    title: f,
-    children: e,
-    animated: o = !0,
-    fixedOn: r = "bottom",
-    delay: n = 0,
-    className: i = "",
+    title: c,
+    children: o,
+    animated: r = !0,
+    fixedOn: e = "bottom",
+    delay: s = 0,
+    className: u = "",
     suppressMouseActivation: t = !1,
-    active: b = !1,
+    active: i = !1,
     rootClassName: v = ""
-  } = l, m = s.useRef(r), d = s.useRef([0, 0]);
-  m.current = r;
-  const T = y(j), a = s.useRef(null), [E, x] = s.useState(!1);
-  s.useEffect(() => {
-    t && x(b);
-  }, [b, t]), s.useEffect(() => {
-    if (!a.current)
+  } = n, m = a.useRef(e), p = a.useRef([0, 0]);
+  m.current = e;
+  const T = S(j), l = a.useRef(null), [g, h] = a.useState(!1);
+  a.useEffect(() => {
+    t && h(i);
+  }, [i, t]), a.useEffect(() => {
+    if (!l.current)
       return;
-    const c = a.current, g = (u) => {
-      m.current && a.current ? d.current = G(a.current, m.current) : d.current = [u.clientX, u.clientY], t || x(!0);
-    }, L = () => {
-      t || x(!1);
-    }, w = (u) => {
-      m.current || (d.current = [u.clientX, u.clientY]);
+    const f = l.current, E = (d) => {
+      m.current && l.current ? p.current = X(l.current, m.current) : p.current = [d.clientX, d.clientY], t || h(!0);
+    }, y = () => {
+      t || h(!1);
+    }, w = (d) => {
+      m.current || (p.current = [d.clientX, d.clientY]);
     };
-    return c.addEventListener("mouseenter", g), c.addEventListener("mouseleave", L), c.addEventListener("mousemove", w), () => {
-      c && (c.removeEventListener("mouseenter", g), c.removeEventListener("mouseleave", L), c.removeEventListener("mousemove", w));
+    return f.addEventListener("mouseenter", E), f.addEventListener("mouseleave", y), f.addEventListener("mousemove", w), () => {
+      f && (f.removeEventListener("mouseenter", E), f.removeEventListener("mouseleave", y), f.removeEventListener("mousemove", w));
     };
   }, [t]);
-  const R = s.useMemo(() => {
-    if (!E || !f)
+  const M = a.useMemo(() => {
+    if (!g || !c)
       return null;
-    const c = O(
-      p.wrapper,
-      p[`fixed-on-${r}`],
+    const f = L(
+      x.wrapper,
+      x[`fixed-on-${e}`],
       {
-        [p.animated]: o
+        [x.animated]: r
       },
-      i
+      u
     );
-    return /* @__PURE__ */ h(T, { children: /* @__PURE__ */ h(
+    return /* @__PURE__ */ b(T, { children: /* @__PURE__ */ b(
       "div",
       {
-        className: c,
-        style: D(!!r, n, d.current),
-        children: /* @__PURE__ */ h("div", { className: O(p.root, v), children: f })
+        className: f,
+        style: G(!!e, s, p.current),
+        children: /* @__PURE__ */ b("div", { className: L(x.root, v), children: c })
       }
     ) });
-  }, [E, f, r, o, T, n, i, v]), k = s.useMemo(
-    () => typeof e == "function" ? e(a) : s.cloneElement(e, { ref: N(a, e.props.ref) }),
-    [e, a]
+  }, [g, c, e, r, T, s, u, v]), C = a.useMemo(
+    () => typeof o == "function" ? o(l) : a.cloneElement(o, { ref: k(l, o.props.ref) }),
+    [o, l]
   );
-  return /* @__PURE__ */ C(M, { children: [
-    k,
-    R
+  return /* @__PURE__ */ O(R, { children: [
+    C,
+    M
   ] });
 }
 export {
   j as TITLE_OUTLET_ID,
-  H as Title,
-  G as titleGetCoords,
-  D as titleGetCssStyle
+  z as Title,
+  X as titleGetCoords,
+  G as titleGetCssStyle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfx-dev/ui-components",
-  "version": "5.0.23",
+  "version": "5.0.24",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",