@cronocode/react-box 1.4.4 → 1.4.6

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 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;

package/components/tooltip.d.ts

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

package/components/tooltip.mjs

@@ -1,12 +1,12 @@
-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 h, 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 "../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(
+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();
@@ -16,7 +16,7 @@ function P(i) {
       };
     },
     [t]
-  ), v = c(
+  ), v = l(
     (e, r) => {
       const o = (u) => {
         r();
@@ -26,32 +26,32 @@ function P(i) {
       };
     },
     [t]
-  ), l = c(() => {
+  ), 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 }), d({ top: e.top + window.scrollY, left: 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 g(() => {
+  return z(() => {
     if (n.current) {
-      l();
-      const e = w(n.current, l), r = v(n.current, l);
+      i();
+      const e = w(n.current, i), r = v(n.current, i);
       return () => {
         e(), r();
       };
     }
-  }, [t]), /* @__PURE__ */ x(b, { children: [
-    /* @__PURE__ */ a(f, { ref: n, position: "absolute", top: 0, left: 0, ...i, children: void 0 }),
-    t && E(
+  }, [t]), /* @__PURE__ */ h(x, { children: [
+    /* @__PURE__ */ a(d, { ref: n, position: "absolute", top: 0, left: 0, ...c, children: void 0 }),
+    t && b(
       /* @__PURE__ */ a(
-        f,
+        d,
         {
           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: f
         }
       ),
       m

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "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 u(r){const _=Object.entries(r.colors).map(([o,e])=>`--color${o}: ${e};`).join(`
-`),n=Object.entries(r.shadows).map(([o,e])=>`--shadow${o}: ${e};`).join(`
-`),i=Object.entries(r.backgrounds).map(([o,e])=>`--background${o}: ${e};`).join(`
-`),s=`:root {
-  ${_}
-  ${n}
-  ${i}
-}`,$=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} {
@@ -124,7 +120,7 @@
   line {
     stroke: var(--color${o});
   }
-}`),h=Object.keys(r.shadows).map(o=>`
+}`),i=Object.keys(r.shadows).map(o=>`
 .shadow_${o},
 .shadow_h_${o}:hover,
 ._h:hover>.shadow_h_${o} {
@@ -138,7 +134,7 @@
 
 .shadow_a_${o}:active {
   box-shadow: var(--shadow${o});
-}`),b=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,12 +148,12 @@
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`),l=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),t=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),c=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import '@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 = ${l};
-  type BackgroundType = ${t};
-  type ShadowType = ${c};
+  type ColorType = ${s};
+  type BackgroundType = ${$};
+  type ShadowType = ${b};
 
   namespace Augmented {
     interface Props {
@@ -196,13 +192,8 @@ declare module '@cronocode/react-box' {
     }
   }
 }
-`,d=`import '@cronocode/react-box/components/baseSvg';
 
 declare module '@cronocode/react-box/components/baseSvg' {
-  type ColorType = ${l};
-  type BackgroundType = ${t};
-  type ShadowType = ${c};
-
   namespace Augmented {
     interface Props {
       fill?: ColorType;
@@ -216,5 +207,6 @@ declare module '@cronocode/react-box/components/baseSvg' {
     }
   }
 }
-`;return{themeCss:[s,...$,...h,...b].join(`
-`),boxDts:p,baseSvgDts:d}}exports.boxTheme=u;
+`;return{themeCss:[e.join(`
+`),...n,...i,...h].join(`
+`),boxDts:p}}exports.boxTheme=u;

package/plugins.d.ts

@@ -6,7 +6,6 @@ interface BoxThemeOptions {
 interface BoxThemeResources {
     themeCss: string;
     boxDts: string;
-    baseSvgDts: string;
 }
 export declare function boxTheme(options: BoxThemeOptions): BoxThemeResources;
 export {};

package/plugins.mjs

@@ -1,12 +1,10 @@
-function C(r) {
-  const c = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
-`), n = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
-`), i = Object.entries(r.backgrounds).map(([o, e]) => `--background${o}: ${e};`).join(`
-`), $ = `:root {
-  ${c}
-  ${n}
-  ${i}
-}`, s = 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} {
@@ -125,7 +123,7 @@ function C(r) {
   line {
     stroke: var(--color${o});
   }
-}`), h = Object.keys(r.shadows).map((o) => `
+}`), i = Object.keys(r.shadows).map((o) => `
 .shadow_${o},
 .shadow_h_${o}:hover,
 ._h:hover>.shadow_h_${o} {
@@ -139,7 +137,7 @@ function C(r) {
 
 .shadow_a_${o}:active {
   box-shadow: var(--shadow${o});
-}`), b = 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,12 +151,12 @@ function C(r) {
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`), l = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), t = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), _ = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), p = `import '@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 = ${l};
-  type BackgroundType = ${t};
-  type ShadowType = ${_};
+  type ColorType = ${$};
+  type BackgroundType = ${s};
+  type ShadowType = ${b};
 
   namespace Augmented {
     interface Props {
@@ -197,13 +195,8 @@ declare module '@cronocode/react-box' {
     }
   }
 }
-`, d = `import '@cronocode/react-box/components/baseSvg';
 
 declare module '@cronocode/react-box/components/baseSvg' {
-  type ColorType = ${l};
-  type BackgroundType = ${t};
-  type ShadowType = ${_};
-
   namespace Augmented {
     interface Props {
       fill?: ColorType;
@@ -219,12 +212,12 @@ declare module '@cronocode/react-box/components/baseSvg' {
 }
 `;
   return {
-    themeCss: [$, ...s, ...h, ...b].join(`
+    themeCss: [e.join(`
+`), ...n, ...i, ...h].join(`
 `),
-    boxDts: p,
-    baseSvgDts: d
+    boxDts: p
   };
 }
 export {
-  C as boxTheme
+  d as boxTheme
 };