@cronocode/react-box 1.4.5 → 1.4.7

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),v=require("react-dom"),d=require("../box.cjs"),s=require("react"),q=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");function x(u){const{children:f,onPositionChange:c}=u,o=s.useRef(null),[e,p]=s.useState(),w=q.usePortalContainer(),b=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]),m=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}))}},[e]);return s.useLayoutEffect(()=>{if(o.current){i();const t=b(o.current,i),r=m(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&&v.createPortal(l.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`},children:f}),w)]})}exports.default=x;
+"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,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 } from '../types';
-interface Props extends BoxPosition {
-    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,49 @@
-import { jsxs as x, Fragment as b, jsx as a } from "react/jsx-runtime";
-import { createPortal as E } from "react-dom";
-import f from "../box.mjs";
-import { useRef as L, useState as z, useCallback as c, useLayoutEffect as g } from "react";
-import { u as C } from "../utils/utils.mjs";
+import { jsxs as v, Fragment as x, jsx as u } from "react/jsx-runtime";
+import { createPortal as b } from "react-dom";
+import a 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(i) {
-  const { children: p, onPositionChange: s } = i, n = L(null), [t, d] = z(), m = C(), w = c(
-    (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 = c(
-    (e, r) => {
-      const o = (u) => {
-        r();
-      };
-      return window.addEventListener("resize", o, { capture: !0 }), () => {
-        window.removeEventListener("resize", o, { capture: !0 });
-      };
-    },
-    [t]
-  ), l = c(() => {
-    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 }), d({ top: e.top + window.scrollY, left: e.left + window.scrollX }));
-    }
-  }, [t]);
+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 (n.current) {
-      l();
-      const e = w(n.current, l), r = v(n.current, l);
+    if (s.current) {
+      l(s.current);
+      const o = w(s.current, l), e = h(s.current, l);
       return () => {
-        e(), r();
+        o(), e();
       };
     }
-  }, [t]), /* @__PURE__ */ x(b, { children: [
-    /* @__PURE__ */ a(f, { ref: n, position: "absolute", top: 0, left: 0, ...i, children: void 0 }),
-    t && E(
-      /* @__PURE__ */ a(
-        f,
+  }, []), /* @__PURE__ */ v(x, { children: [
+    /* @__PURE__ */ u(a, { ref: s }),
+    t && b(
+      /* @__PURE__ */ u(
+        a,
         {
           position: "absolute",
           top: 0,
           left: 0,
-          transition: "none",
-          style: { transform: `translate(${t.left}px,${t.top}px)` },
-          children: p
+          style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
+          children: /* @__PURE__ */ u(a, { position: "absolute", width: "fit", ...f })
         }
       ),
       m
@@ -59,5 +51,5 @@ function P(i) {
   ] });
 }
 export {
-  P as default
+  M as default
 };

package/package.json

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

package/plugins.cjs

@@ -1,11 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(r){const l=Object.entries(r.colors).map(([o,e])=>`--color${o}: ${e};`).join(`
-`),_=Object.entries(r.shadows).map(([o,e])=>`--shadow${o}: ${e};`).join(`
-`),t=Object.entries(r.backgrounds).map(([o,e])=>`--background${o}: ${e};`).join(`
-`),c=`:root {
-  ${l}
-  ${_}
-  ${t}
-}`,n=Object.keys(r.colors).map(o=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(r){const _=Object.entries(r.colors).map(([o,l])=>`--color${o}: ${l};`).join(`
+  `),t=Object.entries(r.shadows).map(([o,l])=>`--shadow${o}: ${l};`).join(`
+  `),c=Object.entries(r.backgrounds).map(([o,l])=>`--background${o}: ${l};`).join(`
+  `),e=[":root {"];_&&e.push(`  ${_}`),t&&e.push(`  ${t}`),c&&e.push(`  ${c}`),e.push("}");const n=Object.keys(r.colors).map(o=>`
 .color_${o},
 .color_h_${o}:hover,
 ._h:hover>.color_h_${o} {
@@ -138,7 +134,7 @@
 
 .shadow_a_${o}:active {
   box-shadow: var(--shadow${o});
-}`),$=Object.keys(r.backgrounds).map(o=>`
+}`),h=Object.keys(r.backgrounds).map(o=>`
 .bg_${o},
 .bg_h_${o}:hover,
 ._h:hover>.bg_h_${o} {
@@ -152,11 +148,11 @@
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`),h=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),s=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),b=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),d=`import {ColorType} from '@cronocode/react-box';
+}`),s=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),$=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),b=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import {ColorType} from '@cronocode/react-box';
 
 declare module '@cronocode/react-box' {
-  type ColorType = ${h};
-  type BackgroundType = ${s};
+  type ColorType = ${s};
+  type BackgroundType = ${$};
   type ShadowType = ${b};
 
   namespace Augmented {
@@ -211,5 +207,6 @@ declare module '@cronocode/react-box/components/baseSvg' {
     }
   }
 }
-`;return{themeCss:[c,...n,...i,...$].join(`
-`),boxDts:d}}exports.boxTheme=p;
+`;return{themeCss:[e.join(`
+`),...n,...i,...h].join(`
+`),boxDts:p}}exports.boxTheme=u;

package/plugins.mjs

@@ -1,12 +1,10 @@
-function p(r) {
-  const l = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
-`), _ = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
-`), t = Object.entries(r.backgrounds).map(([o, e]) => `--background${o}: ${e};`).join(`
-`), c = `:root {
-  ${l}
-  ${_}
-  ${t}
-}`, n = Object.keys(r.colors).map((o) => `
+function d(r) {
+  const _ = Object.entries(r.colors).map(([o, l]) => `--color${o}: ${l};`).join(`
+  `), t = Object.entries(r.shadows).map(([o, l]) => `--shadow${o}: ${l};`).join(`
+  `), c = Object.entries(r.backgrounds).map(([o, l]) => `--background${o}: ${l};`).join(`
+  `), e = [":root {"];
+  _ && e.push(`  ${_}`), t && e.push(`  ${t}`), c && e.push(`  ${c}`), e.push("}");
+  const n = Object.keys(r.colors).map((o) => `
 .color_${o},
 .color_h_${o}:hover,
 ._h:hover>.color_h_${o} {
@@ -139,7 +137,7 @@ function p(r) {
 
 .shadow_a_${o}:active {
   box-shadow: var(--shadow${o});
-}`), $ = Object.keys(r.backgrounds).map((o) => `
+}`), h = Object.keys(r.backgrounds).map((o) => `
 .bg_${o},
 .bg_h_${o}:hover,
 ._h:hover>.bg_h_${o} {
@@ -153,10 +151,10 @@ function p(r) {
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`), h = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), s = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), b = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), d = `import {ColorType} from '@cronocode/react-box';
+}`), $ = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), s = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), b = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), p = `import {ColorType} from '@cronocode/react-box';
 
 declare module '@cronocode/react-box' {
-  type ColorType = ${h};
+  type ColorType = ${$};
   type BackgroundType = ${s};
   type ShadowType = ${b};
 
@@ -214,11 +212,12 @@ declare module '@cronocode/react-box/components/baseSvg' {
 }
 `;
   return {
-    themeCss: [c, ...n, ...i, ...$].join(`
+    themeCss: [e.join(`
+`), ...n, ...i, ...h].join(`
 `),
-    boxDts: d
+    boxDts: p
   };
 }
 export {
-  p as boxTheme
+  d as boxTheme
 };