@elcrm/tooltip 0.1.1 → 0.1.2

package/README.md

@@ -75,12 +75,14 @@ import {
 | ----------------------- | ----------------- |
 | `--tooltip-bg`          | Фон               |
 | `--tooltip-fg`          | Цвет текста       |
-| `--tooltip-radius`      | Скругление        |
-| `--tooltip-max-width`   | Макс. ширина      |
-| `--tooltip-font-size`   | Размер шрифта     |
-| `--tooltip-padding`     | Внутренние отступы |
-| `--tooltip-shadow`      | Тень              |
-| `--tooltip-gap`         | Зазор до якоря    |
+| `--tooltip-radius`           | Скругление (по умолчанию `8px`) |
+| `--tooltip-max-width`        | Макс. ширина      |
+| `--tooltip-font-size`        | Размер шрифта     |
+| `--tooltip-padding-block`    | Вертикальный padding |
+| `--tooltip-padding-inline`   | Горизонтальный padding |
+| `--tooltip-padding`          | Shorthand padding |
+| `--tooltip-shadow`           | Тень              |
+| `--tooltip-gap`              | Зазор до якоря    |
 
 ## Поведение
 

package/dist/index.css

@@ -1 +1 @@
-@layer elcrm-tooltip{.ttr{display:inline-flex;vertical-align:middle;max-width:100%}.ttt{position:fixed;box-sizing:border-box;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding);border-radius:var(--tooltip-radius);background:var(--tooltip-bg);color:var(--tooltip-fg);font-size:var(--tooltip-font-size);line-height:1.35;font-weight:500;box-shadow:var(--tooltip-shadow);pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:normal;word-break:break-word}.ttv{opacity:1}.ttl{text-align:left}.ttm{text-align:center}.ttx{text-align:right}.ttt:before{content:"";position:fixed;pointer-events:none;width:0;height:0;top:var(--tooltip-arrow-y);left:var(--tooltip-arrow-x);transform:var(--tooltip-arrow-r, none);margin-left:-6px;border-width:6px;border-style:solid;border-color:var(--tooltip-bg) transparent transparent transparent}}
+@layer elcrm-tooltip{.ttr{display:inline-flex;vertical-align:middle;max-width:100%}.ttt{position:fixed;box-sizing:border-box;max-width:var(--tooltip-max-width, 280px);padding:var(--tooltip-padding-block, 6px) var(--tooltip-padding-inline, 12px);border-radius:var(--tooltip-radius, 8px);background:var(--tooltip-bg, #1e1f24);color:var(--tooltip-fg, #eaeaea);font-size:var(--tooltip-font-size, 13px);line-height:1.35;font-weight:500;box-shadow:var(--tooltip-shadow, 0 8px 24px rgba(0, 0, 0, .28));pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:normal;word-break:break-word}.ttv{opacity:1}.ttl{text-align:left}.ttm{text-align:center}.ttx{text-align:right}.ttt:before{content:"";position:absolute;width:0;height:0;pointer-events:none;border-style:solid;border-width:6px}.tta:before{top:100%;left:var(--tooltip-arrow-offset);margin-left:-6px;border-color:var(--tooltip-bg, #1e1f24) transparent transparent transparent}.ttb:before{bottom:100%;left:var(--tooltip-arrow-offset);margin-left:-6px;border-color:transparent transparent var(--tooltip-bg, #1e1f24) transparent}.ttc:before{left:100%;top:var(--tooltip-arrow-offset);margin-top:-6px;border-color:transparent transparent transparent var(--tooltip-bg, #1e1f24)}.ttd:before{right:100%;top:var(--tooltip-arrow-offset);margin-top:-6px;border-color:transparent var(--tooltip-bg, #1e1f24) transparent transparent}}

package/dist/index.es.js

@@ -1,163 +1,177 @@
-import B, { useId as V, useRef as p, useState as z, useCallback as P, useLayoutEffect as X, useEffect as F } from "react";
-import { createPortal as J } from "react-dom";
-import './index.css';const K = "0.1.1", Q = {
-  version: K
-}, U = "ttr", _ = "ttt", tt = "ttv", et = "ttl", nt = "ttm", rt = "ttx", f = {
-  r: U,
-  t: _,
-  v: tt,
-  l: et,
-  m: nt,
-  x: rt
-}, j = 1e3, ot = 10;
-function R() {
+import k, { useId as K, useRef as w, useState as T, useCallback as A, useLayoutEffect as G, useEffect as Q } from "react";
+import { createPortal as U } from "react-dom";
+import './index.css';const tt = "0.1.2", et = {
+  version: tt
+}, nt = "ttr", rt = "ttt", ot = "ttv", it = "ttl", lt = "ttm", st = "ttx", ct = "tta", ut = "ttb", ft = "ttc", at = "ttd", i = {
+  r: nt,
+  t: rt,
+  v: ot,
+  l: it,
+  m: lt,
+  x: st,
+  a: ct,
+  b: ut,
+  c: ft,
+  d: at
+}, s = 10, c = 8, W = 10;
+function j(t, e) {
+  return Math.min(Math.max(c, t), window.innerWidth - e - c);
+}
+function D(t, e) {
+  return Math.min(Math.max(c, t), window.innerHeight - e - c);
+}
+function p(t, e) {
+  return Math.min(Math.max(W, t), e - W);
+}
+function dt(t, e, b) {
+  const f = t.left + t.width / 2, a = t.top + t.height / 2;
+  switch (b) {
+    case "top": {
+      let n = t.top - e.height - s, r = j(f - e.width / 2, e.width), o = "top";
+      return n < c && (n = t.bottom + s, o = "bottom"), { top: n, left: r, side: o, arrow: p(f - r, e.width) };
+    }
+    case "bottom": {
+      let n = t.bottom + s, r = j(f - e.width / 2, e.width), o = "bottom";
+      return n + e.height > window.innerHeight - c && (n = t.top - e.height - s, o = "top"), { top: n, left: r, side: o, arrow: p(f - r, e.width) };
+    }
+    case "left": {
+      let n = D(a - e.height / 2, e.height), r = t.left - e.width - s, o = "left";
+      return r < c && (r = t.right + s, o = "right"), { top: n, left: r, side: o, arrow: p(a - n, e.height) };
+    }
+    case "right": {
+      let n = D(a - e.height / 2, e.height), r = t.right + s, o = "right";
+      return r + e.width > window.innerWidth - c && (r = t.left - e.width - s, o = "left"), { top: n, left: r, side: o, arrow: p(a - n, e.height) };
+    }
+  }
+}
+const X = 1e3, mt = 10;
+function z() {
   const t = globalThis;
   return t.elcrm || (t.elcrm = {}), t.elcrm.overlayZ || (t.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), t.elcrm.overlayZ;
 }
-function it() {
-  const t = R();
+function ht() {
+  const t = z();
   t.seq += 1;
-  const e = j + t.seq * ot;
+  const e = X + t.seq * mt;
   return t.active.add(e), e;
 }
-function Y(t) {
-  const e = R();
+function N(t) {
+  const e = z();
   e.active.delete(t), e.active.size === 0 && (e.seq = 0);
 }
-function at() {
-  const t = R();
-  return t.active.size === 0 ? j : Math.max(...t.active);
-}
-const n = 8, s = 8;
-function lt(t, e, y) {
-  const w = t.left + t.width / 2, d = t.top + t.height / 2;
-  let o = 0, i = 0, c = w, l = 0, r = "";
-  const g = (b) => Math.min(
-    Math.max(s, b),
-    window.innerWidth - e.width - s
-  );
-  switch (y) {
-    case "top":
-      o = t.top - e.height - n, i = g(w - e.width / 2), l = t.top - n, r = "", o < s && (o = t.bottom + n, l = t.bottom + n - 2, r = "rotate(180deg)");
-      break;
-    case "bottom":
-      o = t.bottom + n, i = g(w - e.width / 2), l = t.bottom + n - 2, r = "rotate(180deg)", o + e.height > window.innerHeight - s && (o = t.top - e.height - n, l = t.top - n, r = "");
-      break;
-    case "left":
-      o = Math.min(
-        Math.max(s, d - e.height / 2),
-        window.innerHeight - e.height - s
-      ), i = t.left - e.width - n, c = t.left - n + 2, l = d, r = "rotate(270deg)", i < s && (i = t.right + n, c = t.right + n - 2, r = "rotate(90deg)");
-      break;
-    case "right":
-      o = Math.min(
-        Math.max(s, d - e.height / 2),
-        window.innerHeight - e.height - s
-      ), i = t.right + n, c = t.right + n - 2, l = d, r = "rotate(90deg)", i + e.width > window.innerWidth - s && (i = t.left - e.width - n, c = t.left - n + 2, r = "rotate(270deg)");
-      break;
-  }
-  return { top: o, left: i, arrowX: c, arrowY: l, arrowR: r };
+function bt() {
+  const t = z();
+  return t.active.size === 0 ? X : Math.max(...t.active);
 }
-function st(t) {
-  return t === "left" ? f.l : t === "right" ? f.x : f.m;
+const wt = {
+  top: i.a,
+  bottom: i.b,
+  left: i.c,
+  right: i.d
+};
+function gt(t) {
+  return t === "left" ? i.l : t === "right" ? i.x : i.m;
 }
-function ft({
+function xt({
   content: t,
   children: e,
-  placement: y,
-  orientation: w,
-  textAlign: d = "center",
-  delay: o = 180,
-  delayHide: i = 60,
-  className: c,
-  disabled: l = !1,
-  open: r
+  placement: b,
+  orientation: f,
+  textAlign: a = "center",
+  delay: n = 180,
+  delayHide: r = 60,
+  className: o,
+  disabled: I = !1,
+  open: x
 }) {
-  const g = y ?? w ?? "top", b = V(), M = p(null), k = p(null), x = p(null), E = p(null), u = p(null), [G, L] = z(!1), [a, O] = z(null), [Z, S] = z(null), T = () => {
-    x.current != null && (window.clearTimeout(x.current), x.current = null), E.current != null && (window.clearTimeout(E.current), E.current = null);
-  }, q = P(() => {
-    l || t == null || t === "" || (T(), x.current = window.setTimeout(() => {
-      L(!0);
-    }, o));
-  }, [t, o, l]), C = P(() => {
-    r || (T(), E.current = window.setTimeout(() => {
-      L(!1), O(null);
-    }, i));
-  }, [i, r]), m = r || G;
-  X(() => {
-    if (m) {
-      if (u.current == null) {
-        const h = it();
-        u.current = h, S(h);
+  const R = b ?? f ?? "top", M = K(), O = w(null), L = w(null), g = w(null), v = w(null), l = w(null), [Y, Z] = T(!1), [u, C] = T(null), [S, q] = T(null), E = () => {
+    g.current != null && (window.clearTimeout(g.current), g.current = null), v.current != null && (window.clearTimeout(v.current), v.current = null);
+  }, B = A(() => {
+    I || t == null || t === "" || (E(), g.current = window.setTimeout(() => {
+      Z(!0);
+    }, n));
+  }, [t, n, I]), P = A(() => {
+    x || (E(), v.current = window.setTimeout(() => {
+      Z(!1), C(null);
+    }, r));
+  }, [r, x]), d = x || Y;
+  G(() => {
+    if (d) {
+      if (l.current == null) {
+        const m = ht();
+        l.current = m, q(m);
       }
       return;
     }
-    u.current != null && (Y(u.current), u.current = null, S(null));
-  }, [m]), F(() => () => {
-    T(), u.current != null && (Y(u.current), u.current = null);
-  }, []), X(() => {
-    if (!m) return;
-    const h = M.current, $ = k.current;
-    if (!h || !$) return;
-    const v = () => {
-      const A = h.getBoundingClientRect(), D = $.getBoundingClientRect();
-      O(lt(A, D, g));
+    l.current != null && (N(l.current), l.current = null, q(null));
+  }, [d]), Q(() => () => {
+    E(), l.current != null && (N(l.current), l.current = null);
+  }, []), G(() => {
+    if (!d) return;
+    const m = O.current, $ = L.current;
+    if (!m || !$) return;
+    const h = () => {
+      const F = m.getBoundingClientRect(), J = $.getBoundingClientRect();
+      C(dt(F, J, R));
     };
-    return v(), window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
-      window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
+    return h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), () => {
+      window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
     };
-  }, [m, g, t]);
-  const H = a ? {
-    top: a.top,
-    left: a.left,
-    zIndex: Z ?? 1e3,
-    "--tooltip-arrow-x": `${a.arrowX}px`,
-    "--tooltip-arrow-y": `${a.arrowY}px`,
-    "--tooltip-arrow-r": a.arrowR || "none"
+  }, [d, R, t]);
+  const H = u ? {
+    top: u.top,
+    left: u.left,
+    zIndex: S ?? 1e3,
+    "--tooltip-arrow-offset": `${u.arrow}px`
   } : {
     top: -9999,
     left: -9999,
-    zIndex: Z ?? 1e3,
+    zIndex: S ?? 1e3,
     visibility: "hidden"
-  }, N = [f.t, st(d), a ? f.v : ""].filter(Boolean).join(" "), W = m && typeof document < "u" ? J(
-    /* @__PURE__ */ B.createElement(
+  }, V = [
+    i.t,
+    u ? wt[u.side] : "",
+    gt(a),
+    u ? i.v : ""
+  ].filter(Boolean).join(" "), _ = d && typeof document < "u" ? U(
+    /* @__PURE__ */ k.createElement(
       "div",
       {
-        ref: k,
-        id: b,
+        ref: L,
+        id: M,
         role: "tooltip",
-        className: N,
+        className: V,
         style: H
       },
       t
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ B.createElement(
+  return /* @__PURE__ */ k.createElement(
     "span",
     {
-      ref: M,
-      className: c ? `${f.r} ${c}` : f.r,
-      onMouseEnter: q,
-      onMouseLeave: C,
-      onFocus: q,
-      onBlur: C,
-      "aria-describedby": m ? b : void 0
+      ref: O,
+      className: o ? `${i.r} ${o}` : i.r,
+      onMouseEnter: B,
+      onMouseLeave: P,
+      onFocus: B,
+      onBlur: P,
+      "aria-describedby": d ? M : void 0
     },
     e,
-    W
+    _
   );
 }
-const dt = () => null;
-function I() {
+const Et = () => null;
+function y() {
   return typeof globalThis < "u" ? globalThis : {};
 }
-I().elcrm || (I().elcrm = {});
-Object.assign(I().elcrm, { tooltip: Q.version });
+y().elcrm || (y().elcrm = {});
+Object.assign(y().elcrm, { tooltip: et.version });
 export {
-  dt as Item,
-  ft as Tooltip,
-  it as acquireOverlayZIndex,
-  at as peekOverlayZIndex,
-  Y as releaseOverlayZIndex
+  Et as Item,
+  xt as Tooltip,
+  ht as acquireOverlayZIndex,
+  bt as peekOverlayZIndex,
+  N as releaseOverlayZIndex
 };

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],n):(o=typeof globalThis<"u"?globalThis:o||self,n((o.elCRM=o.elCRM||{},o.elCRM.tooltip={}),o.React,o.ReactDOM))})(this,function(o,n,R){"use strict";var O=document.createElement("style");O.textContent=`@layer elcrm-tooltip{.ttr{display:inline-flex;vertical-align:middle;max-width:100%}.ttt{position:fixed;box-sizing:border-box;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding);border-radius:var(--tooltip-radius);background:var(--tooltip-bg);color:var(--tooltip-fg);font-size:var(--tooltip-font-size);line-height:1.35;font-weight:500;box-shadow:var(--tooltip-shadow);pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:normal;word-break:break-word}.ttv{opacity:1}.ttl{text-align:left}.ttm{text-align:center}.ttx{text-align:right}.ttt:before{content:"";position:fixed;pointer-events:none;width:0;height:0;top:var(--tooltip-arrow-y);left:var(--tooltip-arrow-x);transform:var(--tooltip-arrow-r, none);margin-left:-6px;border-width:6px;border-style:solid;border-color:var(--tooltip-bg) transparent transparent transparent}}
-/*$vite$:1*/`,document.head.appendChild(O);const Y={version:"0.1.1"},f={r:"ttr",t:"ttt",v:"ttv",l:"ttl",m:"ttm",x:"ttx"},C=1e3,D=10;function T(){const t=globalThis;return t.elcrm||(t.elcrm={}),t.elcrm.overlayZ||(t.elcrm.overlayZ={seq:0,active:new Set}),t.elcrm.overlayZ}function S(){const t=T();t.seq+=1;const e=C+t.seq*D;return t.active.add(e),e}function I(t){const e=T();e.active.delete(t),e.active.size===0&&(e.seq=0)}function G(){const t=T();return t.active.size===0?C:Math.max(...t.active)}const r=8,u=8;function H(t,e,z){const v=t.left+t.width/2,p=t.top+t.height/2;let l=0,s=0,d=v,a=0,i="";const h=b=>Math.min(Math.max(u,b),window.innerWidth-e.width-u);switch(z){case"top":l=t.top-e.height-r,s=h(v-e.width/2),a=t.top-r,i="",l<u&&(l=t.bottom+r,a=t.bottom+r-2,i="rotate(180deg)");break;case"bottom":l=t.bottom+r,s=h(v-e.width/2),a=t.bottom+r-2,i="rotate(180deg)",l+e.height>window.innerHeight-u&&(l=t.top-e.height-r,a=t.top-r,i="");break;case"left":l=Math.min(Math.max(u,p-e.height/2),window.innerHeight-e.height-u),s=t.left-e.width-r,d=t.left-r+2,a=p,i="rotate(270deg)",s<u&&(s=t.right+r,d=t.right+r-2,i="rotate(90deg)");break;case"right":l=Math.min(Math.max(u,p-e.height/2),window.innerHeight-e.height-u),s=t.right+r,d=t.right+r-2,a=p,i="rotate(90deg)",s+e.width>window.innerWidth-u&&(s=t.left-e.width-r,d=t.left-r+2,i="rotate(270deg)");break}return{top:l,left:s,arrowX:d,arrowY:a,arrowR:i}}function N(t){return t==="left"?f.l:t==="right"?f.x:f.m}function W({content:t,children:e,placement:z,orientation:v,textAlign:p="center",delay:l=180,delayHide:s=60,className:d,disabled:a=!1,open:i}){const h=z??v??"top",b=n.useId(),Z=n.useRef(null),q=n.useRef(null),y=n.useRef(null),E=n.useRef(null),c=n.useRef(null),[V,L]=n.useState(!1),[m,$]=n.useState(null),[P,_]=n.useState(null),k=()=>{y.current!=null&&(window.clearTimeout(y.current),y.current=null),E.current!=null&&(window.clearTimeout(E.current),E.current=null)},j=n.useCallback(()=>{a||t==null||t===""||(k(),y.current=window.setTimeout(()=>{L(!0)},l))},[t,l,a]),B=n.useCallback(()=>{i||(k(),E.current=window.setTimeout(()=>{L(!1),$(null)},s))},[s,i]),w=i||V;n.useLayoutEffect(()=>{if(w){if(c.current==null){const g=S();c.current=g,_(g)}return}c.current!=null&&(I(c.current),c.current=null,_(null))},[w]),n.useEffect(()=>()=>{k(),c.current!=null&&(I(c.current),c.current=null)},[]),n.useLayoutEffect(()=>{if(!w)return;const g=Z.current,X=q.current;if(!g||!X)return;const x=()=>{const Q=g.getBoundingClientRect(),U=X.getBoundingClientRect();$(H(Q,U,h))};return x(),window.addEventListener("resize",x),window.addEventListener("scroll",x,!0),()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",x,!0)}},[w,h,t]);const F=m?{top:m.top,left:m.left,zIndex:P??1e3,"--tooltip-arrow-x":`${m.arrowX}px`,"--tooltip-arrow-y":`${m.arrowY}px`,"--tooltip-arrow-r":m.arrowR||"none"}:{top:-9999,left:-9999,zIndex:P??1e3,visibility:"hidden"},J=[f.t,N(p),m?f.v:""].filter(Boolean).join(" "),K=w&&typeof document<"u"?R.createPortal(n.createElement("div",{ref:q,id:b,role:"tooltip",className:J,style:F},t),document.body):null;return n.createElement("span",{ref:Z,className:d?`${f.r} ${d}`:f.r,onMouseEnter:j,onMouseLeave:B,onFocus:j,onBlur:B,"aria-describedby":w?b:void 0},e,K)}const A=()=>null;function M(){return typeof globalThis<"u"?globalThis:{}}M().elcrm||(M().elcrm={}),Object.assign(M().elcrm,{tooltip:Y.version}),o.Item=A,o.Tooltip=W,o.acquireOverlayZIndex=S,o.peekOverlayZIndex=G,o.releaseOverlayZIndex=I,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(i,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],n):(i=typeof globalThis<"u"?globalThis:i||self,n((i.elCRM=i.elCRM||{},i.elCRM.tooltip={}),i.React,i.ReactDOM))})(this,function(i,n,N){"use strict";var z=document.createElement("style");z.textContent=`@layer elcrm-tooltip{.ttr{display:inline-flex;vertical-align:middle;max-width:100%}.ttt{position:fixed;box-sizing:border-box;max-width:var(--tooltip-max-width, 280px);padding:var(--tooltip-padding-block, 6px) var(--tooltip-padding-inline, 12px);border-radius:var(--tooltip-radius, 8px);background:var(--tooltip-bg, #1e1f24);color:var(--tooltip-fg, #eaeaea);font-size:var(--tooltip-font-size, 13px);line-height:1.35;font-weight:500;box-shadow:var(--tooltip-shadow, 0 8px 24px rgba(0, 0, 0, .28));pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:normal;word-break:break-word}.ttv{opacity:1}.ttl{text-align:left}.ttm{text-align:center}.ttx{text-align:right}.ttt:before{content:"";position:absolute;width:0;height:0;pointer-events:none;border-style:solid;border-width:6px}.tta:before{top:100%;left:var(--tooltip-arrow-offset);margin-left:-6px;border-color:var(--tooltip-bg, #1e1f24) transparent transparent transparent}.ttb:before{bottom:100%;left:var(--tooltip-arrow-offset);margin-left:-6px;border-color:transparent transparent var(--tooltip-bg, #1e1f24) transparent}.ttc:before{left:100%;top:var(--tooltip-arrow-offset);margin-top:-6px;border-color:transparent transparent transparent var(--tooltip-bg, #1e1f24)}.ttd:before{right:100%;top:var(--tooltip-arrow-offset);margin-top:-6px;border-color:transparent var(--tooltip-bg, #1e1f24) transparent transparent}}
+/*$vite$:1*/`,document.head.appendChild(z);const X={version:"0.1.2"},s={r:"ttr",t:"ttt",v:"ttv",l:"ttl",m:"ttm",x:"ttx",a:"tta",b:"ttb",c:"ttc",d:"ttd"},a=10,c=8,O=10;function C(t,e){return Math.min(Math.max(c,t),window.innerWidth-e-c)}function S(t,e){return Math.min(Math.max(c,t),window.innerHeight-e-c)}function v(t,e){return Math.min(Math.max(O,t),e-O)}function Y(t,e,T){const f=t.left+t.width/2,p=t.top+t.height/2;switch(T){case"top":{let r=t.top-e.height-a,o=C(f-e.width/2,e.width),l="top";return r<c&&(r=t.bottom+a,l="bottom"),{top:r,left:o,side:l,arrow:v(f-o,e.width)}}case"bottom":{let r=t.bottom+a,o=C(f-e.width/2,e.width),l="bottom";return r+e.height>window.innerHeight-c&&(r=t.top-e.height-a,l="top"),{top:r,left:o,side:l,arrow:v(f-o,e.width)}}case"left":{let r=S(p-e.height/2,e.height),o=t.left-e.width-a,l="left";return o<c&&(o=t.right+a,l="right"),{top:r,left:o,side:l,arrow:v(p-r,e.height)}}case"right":{let r=S(p-e.height/2,e.height),o=t.right+a,l="right";return o+e.width>window.innerWidth-c&&(o=t.left-e.width-a,l="left"),{top:r,left:o,side:l,arrow:v(p-r,e.height)}}}}const Z=1e3,H=10;function x(){const t=globalThis;return t.elcrm||(t.elcrm={}),t.elcrm.overlayZ||(t.elcrm.overlayZ={seq:0,active:new Set}),t.elcrm.overlayZ}function k(){const t=x();t.seq+=1;const e=Z+t.seq*H;return t.active.add(e),e}function y(t){const e=x();e.active.delete(t),e.active.size===0&&(e.seq=0)}function V(){const t=x();return t.active.size===0?Z:Math.max(...t.active)}const F={top:s.a,bottom:s.b,left:s.c,right:s.d};function J(t){return t==="left"?s.l:t==="right"?s.x:s.m}function K({content:t,children:e,placement:T,orientation:f,textAlign:p="center",delay:r=180,delayHide:o=60,className:l,disabled:q=!1,open:I}){const L=T??f??"top",_=n.useId(),$=n.useRef(null),P=n.useRef(null),g=n.useRef(null),b=n.useRef(null),u=n.useRef(null),[U,j]=n.useState(!1),[d,B]=n.useState(null),[A,D]=n.useState(null),M=()=>{g.current!=null&&(window.clearTimeout(g.current),g.current=null),b.current!=null&&(window.clearTimeout(b.current),b.current=null)},G=n.useCallback(()=>{q||t==null||t===""||(M(),g.current=window.setTimeout(()=>{j(!0)},r))},[t,r,q]),R=n.useCallback(()=>{I||(M(),b.current=window.setTimeout(()=>{j(!1),B(null)},o))},[o,I]),h=I||U;n.useLayoutEffect(()=>{if(h){if(u.current==null){const m=k();u.current=m,D(m)}return}u.current!=null&&(y(u.current),u.current=null,D(null))},[h]),n.useEffect(()=>()=>{M(),u.current!=null&&(y(u.current),u.current=null)},[]),n.useLayoutEffect(()=>{if(!h)return;const m=$.current,W=P.current;if(!m||!W)return;const w=()=>{const rt=m.getBoundingClientRect(),ot=W.getBoundingClientRect();B(Y(rt,ot,L))};return w(),window.addEventListener("resize",w),window.addEventListener("scroll",w,!0),()=>{window.removeEventListener("resize",w),window.removeEventListener("scroll",w,!0)}},[h,L,t]);const tt=d?{top:d.top,left:d.left,zIndex:A??1e3,"--tooltip-arrow-offset":`${d.arrow}px`}:{top:-9999,left:-9999,zIndex:A??1e3,visibility:"hidden"},et=[s.t,d?F[d.side]:"",J(p),d?s.v:""].filter(Boolean).join(" "),nt=h&&typeof document<"u"?N.createPortal(n.createElement("div",{ref:P,id:_,role:"tooltip",className:et,style:tt},t),document.body):null;return n.createElement("span",{ref:$,className:l?`${s.r} ${l}`:s.r,onMouseEnter:G,onMouseLeave:R,onFocus:G,onBlur:R,"aria-describedby":h?_:void 0},e,nt)}const Q=()=>null;function E(){return typeof globalThis<"u"?globalThis:{}}E().elcrm||(E().elcrm={}),Object.assign(E().elcrm,{tooltip:X.version}),i.Item=Q,i.Tooltip=K,i.acquireOverlayZIndex=k,i.peekOverlayZIndex=V,i.releaseOverlayZIndex=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@elcrm/tooltip",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "React-подсказки для elCRM: portal, общий overlayZ-стек, hover/focus, CSS-переменные.",
     "type": "module",
     "author": "MaSkal <dev@elcrm.online>",
@@ -55,7 +55,7 @@
         "./package.json": "./package.json"
     },
     "scripts": {
-        "dev": "vite",
+        "dev": "vite --port 3001",
         "build": "vite build && node scripts/postbuild.mjs",
         "check:css": "bun scripts/check-css-scoped.mjs",
         "check:tokens": "bun scripts/check-tokens.mjs",