@cronocode/react-box 1.4.5 → 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.5",
+  "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 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
 };

package/types.d.ts

@@ -79,7 +79,7 @@ export interface BoxPosition {
     bottom?: SizeType;
     left?: SizeType;
 }
-interface BoxSize {
+export interface BoxSize {
     width?: BoxSizeValue;
     height?: BoxSizeValue;
     minWidth?: BoxSizeValue;