@elcrm/tooltip 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/index.css +1 -1
- package/dist/index.es.js +92 -88
- package/dist/index.umd.js +2 -2
- package/package.json +10 -7
package/README.md
CHANGED
|
@@ -69,10 +69,12 @@ import {
|
|
|
69
69
|
|
|
70
70
|
## CSS-переменные
|
|
71
71
|
|
|
72
|
+
Стили — CSS Modules с короткими классами (`r` корень, `t` пузырь). Цвета задаёт тема приложения; fallback в пакете нет.
|
|
73
|
+
|
|
72
74
|
| Переменная | Назначение |
|
|
73
75
|
| ----------------------- | ----------------- |
|
|
74
|
-
| `--tooltip-
|
|
75
|
-
| `--tooltip-
|
|
76
|
+
| `--tooltip-bg` | Фон |
|
|
77
|
+
| `--tooltip-fg` | Цвет текста |
|
|
76
78
|
| `--tooltip-radius` | Скругление |
|
|
77
79
|
| `--tooltip-max-width` | Макс. ширина |
|
|
78
80
|
| `--tooltip-font-size` | Размер шрифта |
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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}}
|
package/dist/index.es.js
CHANGED
|
@@ -1,105 +1,112 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { createPortal as
|
|
3
|
-
import './index.css';const
|
|
4
|
-
version:
|
|
5
|
-
},
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import B, { useId as V, useRef as p, useState as z, useCallback as P, useLayoutEffect as X, useEffect as F } from "react";
|
|
2
|
+
import { createPortal as J } from "react-dom";
|
|
3
|
+
import './index.css';const K = "0.1.1", Q = {
|
|
4
|
+
version: K
|
|
5
|
+
}, U = "ttr", _ = "ttt", tt = "ttv", et = "ttl", nt = "ttm", rt = "ttx", f = {
|
|
6
|
+
r: U,
|
|
7
|
+
t: _,
|
|
8
|
+
v: tt,
|
|
9
|
+
l: et,
|
|
10
|
+
m: nt,
|
|
11
|
+
x: rt
|
|
12
|
+
}, j = 1e3, ot = 10;
|
|
9
13
|
function R() {
|
|
10
|
-
const
|
|
11
|
-
return
|
|
14
|
+
const t = globalThis;
|
|
15
|
+
return t.elcrm || (t.elcrm = {}), t.elcrm.overlayZ || (t.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), t.elcrm.overlayZ;
|
|
12
16
|
}
|
|
13
|
-
function
|
|
14
|
-
const e = R();
|
|
15
|
-
e.seq += 1;
|
|
16
|
-
const t = Y + e.seq * U;
|
|
17
|
-
return e.active.add(t), t;
|
|
18
|
-
}
|
|
19
|
-
function C(e) {
|
|
17
|
+
function it() {
|
|
20
18
|
const t = R();
|
|
21
|
-
t.
|
|
19
|
+
t.seq += 1;
|
|
20
|
+
const e = j + t.seq * ot;
|
|
21
|
+
return t.active.add(e), e;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function Y(t) {
|
|
24
24
|
const e = R();
|
|
25
|
-
|
|
25
|
+
e.active.delete(t), e.active.size === 0 && (e.seq = 0);
|
|
26
|
+
}
|
|
27
|
+
function at() {
|
|
28
|
+
const t = R();
|
|
29
|
+
return t.active.size === 0 ? j : Math.max(...t.active);
|
|
26
30
|
}
|
|
27
31
|
const n = 8, s = 8;
|
|
28
|
-
function
|
|
29
|
-
const w =
|
|
30
|
-
let o = 0, i = 0,
|
|
31
|
-
const
|
|
32
|
-
Math.max(s,
|
|
33
|
-
window.innerWidth -
|
|
32
|
+
function lt(t, e, y) {
|
|
33
|
+
const w = t.left + t.width / 2, d = t.top + t.height / 2;
|
|
34
|
+
let o = 0, i = 0, c = w, l = 0, r = "";
|
|
35
|
+
const g = (b) => Math.min(
|
|
36
|
+
Math.max(s, b),
|
|
37
|
+
window.innerWidth - e.width - s
|
|
34
38
|
);
|
|
35
39
|
switch (y) {
|
|
36
40
|
case "top":
|
|
37
|
-
o =
|
|
41
|
+
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)");
|
|
38
42
|
break;
|
|
39
43
|
case "bottom":
|
|
40
|
-
o =
|
|
44
|
+
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 = "");
|
|
41
45
|
break;
|
|
42
46
|
case "left":
|
|
43
47
|
o = Math.min(
|
|
44
|
-
Math.max(s, d -
|
|
45
|
-
window.innerHeight -
|
|
46
|
-
), i =
|
|
48
|
+
Math.max(s, d - e.height / 2),
|
|
49
|
+
window.innerHeight - e.height - s
|
|
50
|
+
), 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)");
|
|
47
51
|
break;
|
|
48
52
|
case "right":
|
|
49
53
|
o = Math.min(
|
|
50
|
-
Math.max(s, d -
|
|
51
|
-
window.innerHeight -
|
|
52
|
-
), i =
|
|
54
|
+
Math.max(s, d - e.height / 2),
|
|
55
|
+
window.innerHeight - e.height - s
|
|
56
|
+
), 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)");
|
|
53
57
|
break;
|
|
54
58
|
}
|
|
55
|
-
return { top: o, left: i, arrowX:
|
|
59
|
+
return { top: o, left: i, arrowX: c, arrowY: l, arrowR: r };
|
|
60
|
+
}
|
|
61
|
+
function st(t) {
|
|
62
|
+
return t === "left" ? f.l : t === "right" ? f.x : f.m;
|
|
56
63
|
}
|
|
57
|
-
function
|
|
58
|
-
content:
|
|
59
|
-
children:
|
|
64
|
+
function ft({
|
|
65
|
+
content: t,
|
|
66
|
+
children: e,
|
|
60
67
|
placement: y,
|
|
61
68
|
orientation: w,
|
|
62
69
|
textAlign: d = "center",
|
|
63
70
|
delay: o = 180,
|
|
64
71
|
delayHide: i = 60,
|
|
65
|
-
className:
|
|
72
|
+
className: c,
|
|
66
73
|
disabled: l = !1,
|
|
67
74
|
open: r
|
|
68
75
|
}) {
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
l ||
|
|
76
|
+
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 = () => {
|
|
77
|
+
x.current != null && (window.clearTimeout(x.current), x.current = null), E.current != null && (window.clearTimeout(E.current), E.current = null);
|
|
78
|
+
}, q = P(() => {
|
|
79
|
+
l || t == null || t === "" || (T(), x.current = window.setTimeout(() => {
|
|
73
80
|
L(!0);
|
|
74
81
|
}, o));
|
|
75
|
-
}, [
|
|
76
|
-
r || (
|
|
82
|
+
}, [t, o, l]), C = P(() => {
|
|
83
|
+
r || (T(), E.current = window.setTimeout(() => {
|
|
77
84
|
L(!1), O(null);
|
|
78
85
|
}, i));
|
|
79
|
-
}, [i, r]),
|
|
80
|
-
|
|
81
|
-
if (
|
|
82
|
-
if (
|
|
83
|
-
const
|
|
84
|
-
|
|
86
|
+
}, [i, r]), m = r || G;
|
|
87
|
+
X(() => {
|
|
88
|
+
if (m) {
|
|
89
|
+
if (u.current == null) {
|
|
90
|
+
const h = it();
|
|
91
|
+
u.current = h, S(h);
|
|
85
92
|
}
|
|
86
93
|
return;
|
|
87
94
|
}
|
|
88
|
-
|
|
89
|
-
}, [
|
|
90
|
-
|
|
91
|
-
}, []),
|
|
92
|
-
if (!
|
|
93
|
-
const
|
|
94
|
-
if (!
|
|
95
|
-
const
|
|
96
|
-
const
|
|
97
|
-
O(
|
|
95
|
+
u.current != null && (Y(u.current), u.current = null, S(null));
|
|
96
|
+
}, [m]), F(() => () => {
|
|
97
|
+
T(), u.current != null && (Y(u.current), u.current = null);
|
|
98
|
+
}, []), X(() => {
|
|
99
|
+
if (!m) return;
|
|
100
|
+
const h = M.current, $ = k.current;
|
|
101
|
+
if (!h || !$) return;
|
|
102
|
+
const v = () => {
|
|
103
|
+
const A = h.getBoundingClientRect(), D = $.getBoundingClientRect();
|
|
104
|
+
O(lt(A, D, g));
|
|
98
105
|
};
|
|
99
|
-
return
|
|
100
|
-
window.removeEventListener("resize",
|
|
106
|
+
return v(), window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
|
|
107
|
+
window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
|
|
101
108
|
};
|
|
102
|
-
}, [
|
|
109
|
+
}, [m, g, t]);
|
|
103
110
|
const H = a ? {
|
|
104
111
|
top: a.top,
|
|
105
112
|
left: a.left,
|
|
@@ -108,52 +115,49 @@ function ie({
|
|
|
108
115
|
"--tooltip-arrow-y": `${a.arrowY}px`,
|
|
109
116
|
"--tooltip-arrow-r": a.arrowR || "none"
|
|
110
117
|
} : {
|
|
111
|
-
// скрытый замер до первой позиции
|
|
112
118
|
top: -9999,
|
|
113
119
|
left: -9999,
|
|
114
120
|
zIndex: Z ?? 1e3,
|
|
115
121
|
visibility: "hidden"
|
|
116
|
-
}, N = f && typeof document < "u" ?
|
|
117
|
-
/* @__PURE__ */
|
|
122
|
+
}, N = [f.t, st(d), a ? f.v : ""].filter(Boolean).join(" "), W = m && typeof document < "u" ? J(
|
|
123
|
+
/* @__PURE__ */ B.createElement(
|
|
118
124
|
"div",
|
|
119
125
|
{
|
|
120
126
|
ref: k,
|
|
121
|
-
id:
|
|
127
|
+
id: b,
|
|
122
128
|
role: "tooltip",
|
|
123
|
-
className:
|
|
124
|
-
"data-visible": a ? "true" : "false",
|
|
125
|
-
"data-align": d,
|
|
129
|
+
className: N,
|
|
126
130
|
style: H
|
|
127
131
|
},
|
|
128
|
-
|
|
132
|
+
t
|
|
129
133
|
),
|
|
130
134
|
document.body
|
|
131
135
|
) : null;
|
|
132
|
-
return /* @__PURE__ */
|
|
136
|
+
return /* @__PURE__ */ B.createElement(
|
|
133
137
|
"span",
|
|
134
138
|
{
|
|
135
139
|
ref: M,
|
|
136
|
-
className:
|
|
137
|
-
onMouseEnter:
|
|
138
|
-
onMouseLeave:
|
|
139
|
-
onFocus:
|
|
140
|
-
onBlur:
|
|
141
|
-
"aria-describedby":
|
|
140
|
+
className: c ? `${f.r} ${c}` : f.r,
|
|
141
|
+
onMouseEnter: q,
|
|
142
|
+
onMouseLeave: C,
|
|
143
|
+
onFocus: q,
|
|
144
|
+
onBlur: C,
|
|
145
|
+
"aria-describedby": m ? b : void 0
|
|
142
146
|
},
|
|
143
|
-
|
|
144
|
-
|
|
147
|
+
e,
|
|
148
|
+
W
|
|
145
149
|
);
|
|
146
150
|
}
|
|
147
|
-
const
|
|
151
|
+
const dt = () => null;
|
|
148
152
|
function I() {
|
|
149
153
|
return typeof globalThis < "u" ? globalThis : {};
|
|
150
154
|
}
|
|
151
155
|
I().elcrm || (I().elcrm = {});
|
|
152
|
-
Object.assign(I().elcrm, { tooltip:
|
|
156
|
+
Object.assign(I().elcrm, { tooltip: Q.version });
|
|
153
157
|
export {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
158
|
+
dt as Item,
|
|
159
|
+
ft as Tooltip,
|
|
160
|
+
it as acquireOverlayZIndex,
|
|
161
|
+
at as peekOverlayZIndex,
|
|
162
|
+
Y as releaseOverlayZIndex
|
|
159
163
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(n
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(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}}
|
|
2
|
+
/*$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"})});
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elcrm/tooltip",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React-подсказки для elCRM: portal, общий overlayZ-стек, hover/focus, CSS-переменные.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "MaSkal <dev@elcrm.online>",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "git+https://
|
|
10
|
+
"url": "git+https://elgit.ru/lib/elCRM.tooltip.git"
|
|
11
11
|
},
|
|
12
12
|
"bugs": {
|
|
13
|
-
"url": "https://
|
|
13
|
+
"url": "https://elgit.ru/lib/elCRM.tooltip/issues"
|
|
14
14
|
},
|
|
15
15
|
"homepage": "https://www.npmjs.com/package/@elcrm/tooltip",
|
|
16
16
|
"publishConfig": {
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"portal"
|
|
31
31
|
],
|
|
32
32
|
"sideEffects": [
|
|
33
|
-
"**/*.css"
|
|
33
|
+
"**/*.css",
|
|
34
|
+
"**/*.module.css"
|
|
34
35
|
],
|
|
35
36
|
"main": "./dist/index.umd.js",
|
|
36
37
|
"module": "./dist/index.es.js",
|
|
@@ -55,10 +56,12 @@
|
|
|
55
56
|
},
|
|
56
57
|
"scripts": {
|
|
57
58
|
"dev": "vite",
|
|
58
|
-
"build": "vite build",
|
|
59
|
+
"build": "vite build && node scripts/postbuild.mjs",
|
|
60
|
+
"check:css": "bun scripts/check-css-scoped.mjs",
|
|
61
|
+
"check:tokens": "bun scripts/check-tokens.mjs",
|
|
59
62
|
"test": "vitest run",
|
|
60
63
|
"test:watch": "vitest",
|
|
61
|
-
"prepublishOnly": "
|
|
64
|
+
"prepublishOnly": "bun run check:css && bun run check:tokens && bun run test && bun run build",
|
|
62
65
|
"pack:check": "npm pack --dry-run"
|
|
63
66
|
},
|
|
64
67
|
"peerDependencies": {
|
|
@@ -80,10 +83,10 @@
|
|
|
80
83
|
"@types/react": "^18.2.66",
|
|
81
84
|
"@types/react-dom": "^18.2.22",
|
|
82
85
|
"@vitejs/plugin-react": "^4.3.1",
|
|
86
|
+
"elcrm": "file:../elCRM.cli",
|
|
83
87
|
"jsdom": "^26.0.0",
|
|
84
88
|
"react": "^18.2.0",
|
|
85
89
|
"react-dom": "^18.2.0",
|
|
86
|
-
"sass-embedded": "^1.85.1",
|
|
87
90
|
"typescript": "^5.8.2",
|
|
88
91
|
"vite": "^5.4.2",
|
|
89
92
|
"vite-plugin-dts": "^4.0.3",
|