@gearbox-protocol/ui-kit 4.0.0-next.28 → 4.0.0-next.29

package/dist/cjs/components/tooltip/simple-tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),J=require("@radix-ui/react-tooltip"),Q=require("react");require("@gearbox-protocol/sdk/onchain");const h=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");const U=require("../../utils/z-index.cjs");function I(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(s,i,t.get?t:{enumerable:!0,get:()=>c[i]})}}return s.default=c,Object.freeze(s)}const l=I(J),e=I(Q),g=e.createContext({lockParent:()=>{},unlockParent:()=>{}}),N=e.createContext(!1),S=7,Y=12;function L({children:c,title:s,placement:i="top",trigger:t="hover",triangle:z=!0,delayShow:P=5,maxWidth:b="200px",minWidth:A,type:H="tooltip",open:v,onOpenChange:y,className:M,triggerClassName:C,useTitleAsTrigger:K=!1}){const[W,B]=e.useState(!1),[T,R]=e.useState(!1),k=e.useRef(null),f=e.useRef(null),m=v!==void 0,a=m?v:W,o=e.useCallback(n=>{m?y?.(n):B(n)},[m,y]),u=e.useContext(g),G=e.useMemo(()=>({lockParent:()=>R(!0),unlockParent:()=>R(!1)}),[]),w=e.useRef(!1);w.current=T;const d=e.useRef(null),p=e.useCallback(()=>{d.current!==null&&(clearTimeout(d.current),d.current=null)},[]),V=e.useCallback(n=>{if(t!=="click"){if(n){p(),o(!0),u.lockParent();return}d.current=setTimeout(()=>{d.current=null,!w.current&&(o(!1),u.unlockParent())},100)}},[t,o,u,p]);e.useEffect(()=>p,[p]);const X=e.useCallback(n=>{t==="click"&&(n.stopPropagation(),o(!a))},[t,a,o]),Z=e.useCallback(n=>{t==="click"&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),n.stopPropagation(),o(!a))},[t,a,o]);e.useEffect(()=>{if(t!=="click"||!a)return;const n=x=>{const q=x.target;k.current&&!k.current.contains(q)&&f.current&&!f.current.contains(q)&&o(!1)},_=x=>{x.key==="Escape"&&o(!1)};return document.addEventListener("pointerdown",n),document.addEventListener("keydown",_),()=>{document.removeEventListener("pointerdown",n),document.removeEventListener("keydown",_)}},[t,a,o]);const j=e.useRef(u.unlockParent);j.current=u.unlockParent,e.useEffect(()=>()=>j.current(),[]);const O=H==="modal-tooltip",D=z&&!O,$=h.cn(U.Z_INDEX.TOOLTIP,"pointer-events-auto","animate-in fade-in-0 zoom-in-75 duration-150","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",O?"bg-transparent p-0":"rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",M),F=e.useContext(N),E=r.jsxs(l.Root,{open:a||T,onOpenChange:V,delayDuration:t==="click"?0:P,children:[r.jsx(l.Trigger,{asChild:!0,children:K?s:t==="click"?r.jsx("button",{ref:f,type:"button",onClick:X,onKeyDown:Z,className:h.cn("inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",C),children:s}):r.jsx("span",{ref:f,className:h.cn("inline-flex",C),children:s})}),r.jsx(l.Portal,{children:r.jsxs(l.Content,{ref:k,side:i,sideOffset:D?S-4:8,collisionPadding:8,className:$,style:{maxWidth:b?`min(${b}, calc(100vw - 16px))`:"calc(100vw - 16px)",minWidth:A},children:[r.jsx(g.Provider,{value:G,children:c}),D&&r.jsx(l.Arrow,{width:Y,height:S,className:"fill-black/85"})]})})]});return F?E:r.jsx(N.Provider,{value:!0,children:r.jsx(l.Provider,{delayDuration:t==="click"?0:P,skipDelayDuration:300,children:E})})}L.displayName="SimpleTooltip";exports.SimpleTooltip=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),J=require("@radix-ui/react-tooltip"),Q=require("react");require("@gearbox-protocol/sdk/onchain");const h=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");const U=require("../../utils/z-index.cjs");function L(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(s,i,t.get?t:{enumerable:!0,get:()=>c[i]})}}return s.default=c,Object.freeze(s)}const l=L(J),e=L(Q),N=e.createContext({lockParent:()=>{},unlockParent:()=>{}}),S=e.createContext(!1),I=7,Y=12;function z({children:c,title:s,placement:i="top",trigger:t="hover",triangle:A=!0,delayShow:v=5,maxWidth:P="200px",minWidth:b,type:H="tooltip",open:y,onOpenChange:C,className:M,triggerClassName:T,useTitleAsTrigger:K=!1}){const[W,B]=e.useState(!1),[w,R]=e.useState(!1),m=e.useRef(null),f=e.useRef(null),k=y!==void 0,a=k?y:W,o=e.useCallback(n=>{k?C?.(n):B(n)},[k,C]),u=e.useContext(N),$=e.useMemo(()=>({lockParent:()=>R(!0),unlockParent:()=>R(!1)}),[]),j=e.useRef(!1);j.current=w;const d=e.useRef(null),p=e.useCallback(()=>{d.current!==null&&(clearTimeout(d.current),d.current=null)},[]),G=e.useCallback(n=>{if(t!=="click"){if(n){p(),o(!0),u.lockParent();return}d.current=setTimeout(()=>{d.current=null,!j.current&&(o(!1),u.unlockParent())},100)}},[t,o,u,p]);e.useEffect(()=>p,[p]);const V=e.useCallback(n=>{t==="click"&&(n.stopPropagation(),o(!a))},[t,a,o]),X=e.useCallback(n=>{t==="click"&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),n.stopPropagation(),o(!a))},[t,a,o]);e.useEffect(()=>{if(t!=="click"||!a)return;const n=x=>{const g=x.target;m.current&&!m.current.contains(g)&&f.current&&!f.current.contains(g)&&o(!1)},q=x=>{x.key==="Escape"&&o(!1)};return document.addEventListener("pointerdown",n),document.addEventListener("keydown",q),()=>{document.removeEventListener("pointerdown",n),document.removeEventListener("keydown",q)}},[t,a,o]);const O=e.useRef(u.unlockParent);O.current=u.unlockParent,e.useEffect(()=>()=>O.current(),[]);const D=H==="modal-tooltip",E=A&&!D,Z=h.cn(U.Z_INDEX.TOOLTIP,"pointer-events-auto","animate-in fade-in-0 zoom-in-75 duration-150","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",D?"bg-transparent p-0":"rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",M),F=e.useContext(S),_=r.jsxs(l.Root,{open:a||w,onOpenChange:G,delayDuration:t==="click"?0:v,children:[r.jsx(l.Trigger,{asChild:!0,children:K?s:t==="click"?r.jsx("button",{ref:f,type:"button",onClick:V,onKeyDown:X,className:h.cn("inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",T),children:s}):r.jsx("span",{ref:f,className:h.cn("inline-flex",T),children:s})}),r.jsx(l.Portal,{children:r.jsxs(l.Content,{ref:m,side:i,sideOffset:E?I-4:8,collisionPadding:8,className:Z,style:{maxWidth:P?`min(${P}, calc(100vw - 16px))`:"calc(100vw - 16px)",minWidth:b?`min(${b}, calc(100vw - 16px))`:void 0},children:[r.jsx(N.Provider,{value:$,children:c}),E&&r.jsx(l.Arrow,{width:Y,height:I,className:"fill-black/85"})]})})]});return F?_:r.jsx(S.Provider,{value:!0,children:r.jsx(l.Provider,{delayDuration:t==="click"?0:v,skipDelayDuration:300,children:_})})}z.displayName="SimpleTooltip";exports.SimpleTooltip=z;

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,4 +1,4 @@
-import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tooltip";
 import * as e from "react";
 import "@gearbox-protocol/sdk/onchain";
@@ -7,63 +7,63 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import { Z_INDEX as F } from "../../utils/z-index.js";
-const I = e.createContext({ lockParent: () => {
+const A = e.createContext({ lockParent: () => {
 }, unlockParent: () => {
-} }), A = e.createContext(!1), H = 7, J = 12;
+} }), H = e.createContext(!1), K = 7, J = 12;
 function Q({
-  children: K,
+  children: S,
   title: d,
-  placement: S = "top",
+  placement: W = "top",
   trigger: n = "hover",
-  triangle: W = !0,
+  triangle: _ = !0,
   delayShow: h = 5,
-  maxWidth: C = "200px",
-  minWidth: _,
+  maxWidth: v = "200px",
+  minWidth: C,
   type: j = "tooltip",
-  open: P,
-  onOpenChange: v,
+  open: x,
+  onOpenChange: P,
   className: z,
-  triggerClassName: x,
+  triggerClassName: w,
   useTitleAsTrigger: B = !1
 }) {
-  const [M, g] = e.useState(!1), [y, w] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = P !== void 0, c = p ? P : M, o = e.useCallback(
+  const [M, $] = e.useState(!1), [y, R] = e.useState(!1), f = e.useRef(null), l = e.useRef(null), p = x !== void 0, c = p ? x : M, o = e.useCallback(
     (t) => {
-      p ? v?.(t) : g(t);
+      p ? P?.(t) : $(t);
     },
-    [p, v]
-  ), s = e.useContext(I), G = e.useMemo(
+    [p, P]
+  ), s = e.useContext(A), g = e.useMemo(
     () => ({
-      lockParent: () => w(!0),
-      unlockParent: () => w(!1)
+      lockParent: () => R(!0),
+      unlockParent: () => R(!1)
     }),
     []
-  ), R = e.useRef(!1);
-  R.current = y;
-  const l = e.useRef(
+  ), T = e.useRef(!1);
+  T.current = y;
+  const i = e.useRef(
     null
   ), u = e.useCallback(() => {
-    l.current !== null && (clearTimeout(l.current), l.current = null);
-  }, []), V = e.useCallback(
+    i.current !== null && (clearTimeout(i.current), i.current = null);
+  }, []), G = e.useCallback(
     (t) => {
       if (n !== "click") {
         if (t) {
           u(), o(!0), s.lockParent();
           return;
         }
-        l.current = setTimeout(() => {
-          l.current = null, !R.current && (o(!1), s.unlockParent());
+        i.current = setTimeout(() => {
+          i.current = null, !T.current && (o(!1), s.unlockParent());
         }, 100);
       }
     },
     [n, o, s, u]
   );
   e.useEffect(() => u, [u]);
-  const X = e.useCallback(
+  const V = e.useCallback(
     (t) => {
       n === "click" && (t.stopPropagation(), o(!c));
     },
     [n, c, o]
-  ), Z = e.useCallback(
+  ), X = e.useCallback(
     (t) => {
       n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!c));
     },
@@ -72,71 +72,73 @@ function Q({
   e.useEffect(() => {
     if (n !== "click" || !c) return;
     const t = (m) => {
-      const N = m.target;
-      f.current && !f.current.contains(N) && i.current && !i.current.contains(N) && o(!1);
-    }, O = (m) => {
+      const L = m.target;
+      f.current && !f.current.contains(L) && l.current && !l.current.contains(L) && o(!1);
+    }, N = (m) => {
       m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", O), () => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", O);
+    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", N), () => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", N);
     };
   }, [n, c, o]);
-  const T = e.useRef(s.unlockParent);
-  T.current = s.unlockParent, e.useEffect(() => () => T.current(), []);
-  const b = j === "modal-tooltip", D = W && !b, $ = k(
+  const b = e.useRef(s.unlockParent);
+  b.current = s.unlockParent, e.useEffect(() => () => b.current(), []);
+  const D = j === "modal-tooltip", E = _ && !D, Z = k(
     F.TOOLTIP,
     "pointer-events-auto",
     "animate-in fade-in-0 zoom-in-75 duration-150",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",
-    b ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
+    D ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
     z
-  ), q = e.useContext(A), E = /* @__PURE__ */ L(
+  ), q = e.useContext(H), O = /* @__PURE__ */ I(
     a.Root,
     {
       open: c || y,
-      onOpenChange: V,
+      onOpenChange: G,
       delayDuration: n === "click" ? 0 : h,
       children: [
         /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
           "button",
           {
-            ref: i,
+            ref: l,
             type: "button",
-            onClick: X,
-            onKeyDown: Z,
+            onClick: V,
+            onKeyDown: X,
             className: k(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-              x
+              w
             ),
             children: d
           }
         ) : /* @__PURE__ */ r(
           "span",
           {
-            ref: i,
-            className: k("inline-flex", x),
+            ref: l,
+            className: k("inline-flex", w),
             children: d
           }
         ) }),
-        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ L(
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ I(
           a.Content,
           {
             ref: f,
-            side: S,
-            sideOffset: D ? H - 4 : 8,
+            side: W,
+            sideOffset: E ? K - 4 : 8,
             collisionPadding: 8,
-            className: $,
+            className: Z,
             style: {
-              maxWidth: C ? `min(${C}, calc(100vw - 16px))` : "calc(100vw - 16px)",
-              minWidth: _
+              maxWidth: v ? `min(${v}, calc(100vw - 16px))` : "calc(100vw - 16px)",
+              // min-width wins over max-width in CSS; cap it the same way or a
+              // 400px breakdown overflows a phone.
+              minWidth: C ? `min(${C}, calc(100vw - 16px))` : void 0
             },
             children: [
-              /* @__PURE__ */ r(I.Provider, { value: G, children: K }),
-              D && /* @__PURE__ */ r(
+              /* @__PURE__ */ r(A.Provider, { value: g, children: S }),
+              E && /* @__PURE__ */ r(
                 a.Arrow,
                 {
                   width: J,
-                  height: H,
+                  height: K,
                   className: "fill-black/85"
                 }
               )
@@ -146,12 +148,12 @@ function Q({
       ]
     }
   );
-  return q ? E : /* @__PURE__ */ r(A.Provider, { value: !0, children: /* @__PURE__ */ r(
+  return q ? O : /* @__PURE__ */ r(H.Provider, { value: !0, children: /* @__PURE__ */ r(
     a.Provider,
     {
       delayDuration: n === "click" ? 0 : h,
       skipDelayDuration: 300,
-      children: E
+      children: O
     }
   ) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.28",
+  "version": "4.0.0-next.29",
   "description": "Internal UI components",
   "repository": {
     "type": "git",