@cronocode/react-box 1.4.6 → 1.5.0

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("react-dom"),d=require("../box.cjs"),s=require("react"),h=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");function q(u){const{children:f,onPositionChange:c}=u,o=s.useRef(null),[e,p]=s.useState(),w=h.usePortalContainer(),v=s.useCallback((t,r)=>{const n=a=>{a.target.contains(t)&&r()};return document.addEventListener("scroll",n,{capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},[e]),b=s.useCallback((t,r)=>{const n=a=>{r()};return window.addEventListener("resize",n,{capture:!0}),()=>{window.removeEventListener("resize",n,{capture:!0})}},[e]),i=s.useCallback(()=>{if(o.current){const t=o.current.getBoundingClientRect(),r=t.top+window.scrollY,n=t.left+window.scrollX;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==n)&&(c==null||c({top:r,left:n}),p({top:t.top+window.scrollY,left:t.left+window.scrollX,width:t.width>0?t.width:void 0}))}},[e]);return s.useLayoutEffect(()=>{if(o.current){i();const t=v(o.current,i),r=b(o.current,i);return()=>{t(),r()}}},[e]),l.jsxs(l.Fragment,{children:[l.jsx(d.default,{ref:o,position:"absolute",top:0,left:0,...u,children:void 0}),e&&m.createPortal(l.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:f}),w)]})}exports.default=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("react-dom"),d=require("../box.cjs"),s=require("react"),h=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const u=2;function x(f){const{onPositionChange:l}=f,i=s.useRef(null),[e,p]=s.useState(),w=h.usePortalContainer(),b=s.useCallback((n,t)=>{const r=o=>{o.target.contains(n)&&t(n)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[]),m=s.useCallback((n,t)=>{const r=o=>{t(n)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[]),a=s.useCallback(n=>{const t=n.getBoundingClientRect(),r=Math.round((t.top+window.scrollY)*u)/u,o=Math.round((t.left+window.scrollX)*u)/u;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==o)&&(l==null||l({top:r,left:o}),p({top:r,left:o,width:t.width>0?t.width:void 0}))},[]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=b(i.current,a),t=m(i.current,a);return()=>{n(),t()}}},[]),c.jsxs(c.Fragment,{children:[c.jsx(d.default,{ref:i}),e&&v.createPortal(c.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:c.jsx(d.default,{position:"absolute",width:"fit",...f})}),w)]})}exports.default=x;

package/components/tooltip.d.ts

@@ -1,8 +1,6 @@
+import Box from '../box';
 import React from 'react';
-import { BoxPosition, BoxSize } from '../types';
-interface Props extends BoxPosition, BoxSize {
-    children: React.ReactNode;
-    style?: React.ComponentProps<'div'>['style'];
+interface Props extends React.ComponentProps<typeof Box> {
     onPositionChange?(position: {
         top: number;
         left: number;

package/components/tooltip.mjs

@@ -1,57 +1,50 @@
-import { jsxs as h, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
 import { createPortal as b } from "react-dom";
-import d from "../box.mjs";
-import { useRef as E, useState as L, useCallback as l, useLayoutEffect as z } from "react";
-import { u as g } from "../utils/utils.mjs";
+import u from "../box.mjs";
+import { useRef as E, useState as L, useCallback as d, useLayoutEffect as g } from "react";
+import { u as z } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
 import "../theme.mjs";
-function P(c) {
-  const { children: f, onPositionChange: s } = c, n = E(null), [t, p] = L(), m = g(), w = l(
-    (e, r) => {
-      const o = (u) => {
-        u.target.contains(e) && r();
-      };
-      return document.addEventListener("scroll", o, { capture: !0 }), () => {
-        document.removeEventListener("scroll", o, { capture: !0 });
-      };
-    },
-    [t]
-  ), v = l(
-    (e, r) => {
-      const o = (u) => {
-        r();
-      };
-      return window.addEventListener("resize", o, { capture: !0 }), () => {
-        window.removeEventListener("resize", o, { capture: !0 });
-      };
-    },
-    [t]
-  ), i = l(() => {
-    if (n.current) {
-      const e = n.current.getBoundingClientRect(), r = e.top + window.scrollY, o = e.left + window.scrollX;
-      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== o) && (s == null || s({ top: r, left: o }), p({ top: e.top + window.scrollY, left: e.left + window.scrollX, width: e.width > 0 ? e.width : void 0 }));
-    }
-  }, [t]);
-  return z(() => {
-    if (n.current) {
-      i();
-      const e = w(n.current, i), r = v(n.current, i);
+const i = 2;
+function M(f) {
+  const { onPositionChange: c } = f, s = E(null), [t, p] = L(), m = z(), w = d((o, e) => {
+    const r = (n) => {
+      n.target.contains(o) && e(o);
+    };
+    return document.addEventListener("scroll", r, { capture: !0 }), () => {
+      document.removeEventListener("scroll", r, { capture: !0 });
+    };
+  }, []), h = d((o, e) => {
+    const r = (n) => {
+      e(o);
+    };
+    return window.addEventListener("resize", r, { capture: !0 }), () => {
+      window.removeEventListener("resize", r, { capture: !0 });
+    };
+  }, []), l = d((o) => {
+    const e = o.getBoundingClientRect(), r = Math.round((e.top + window.scrollY) * i) / i, n = Math.round((e.left + window.scrollX) * i) / i;
+    ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), p({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
+  }, []);
+  return g(() => {
+    if (s.current) {
+      l(s.current);
+      const o = w(s.current, l), e = h(s.current, l);
       return () => {
-        e(), r();
+        o(), e();
       };
     }
-  }, [t]), /* @__PURE__ */ h(x, { children: [
-    /* @__PURE__ */ a(d, { ref: n, position: "absolute", top: 0, left: 0, ...c, children: void 0 }),
+  }, []), /* @__PURE__ */ v(x, { children: [
+    /* @__PURE__ */ a(u, { ref: s }),
     t && b(
       /* @__PURE__ */ a(
-        d,
+        u,
         {
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
           style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
-          children: f
+          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
         }
       ),
       m
@@ -59,5 +52,5 @@ function P(c) {
   ] });
 }
 export {
-  P as default
+  M as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "main": "./box.cjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",