@stenajs-webui/tooltip 23.18.0 → 23.19.0
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/dist/index.css +1 -1
- package/dist/index.es.js +87 -87
- package/dist/index.js +1 -1
- package/package.json +5 -5
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._floating_dg9ix_1{display:flex;flex-direction:row;align-items:center;background:#fff;color:#fff;border-radius:var(--swui-border-radius);padding:var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2);box-shadow:var(--swui-shadow-popover)}._floating_dg9ix_1._disablePadding_dg9ix_11{padding:0}._iconWrapper_dg9ix_16{--current-bg-color: transparent;--current-border-color: var(--lhds-color-ui-50);--current-icon-color: var(--lhds-color-ui-50);display:inline-flex;flex-direction:row;white-space:nowrap;background-color:var(--current-bg-color);border:1px solid var(--current-border-color);border-radius:var(--swui-border-radius);padding:calc(var(--swui-metrics-spacing) * .5);align-items:flex-start}._iconWrapper_dg9ix_16 svg{color:var(--current-icon-color)}._iconWrapper_dg9ix_16._info_dg9ix_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--swui-info-weak-bg-color);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_dg9ix_16._warning_dg9ix_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--swui-warning-weak-bg-color);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_dg9ix_16._error_dg9ix_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--swui-error-weak-bg-color);--current-icon-color: var(--lhds-color-red-700)}._floating_pdrwr_1{display:flex;align-items:center;background:#333;color:#fff;border-radius:var(--swui-border-radius);padding:var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2);width:-webkit-fit-content;width:fit-content}._floating_pdrwr_1._withIcon_pdrwr_10{padding:calc(var(--swui-metrics-spacing) * .5);padding-right:calc(var(--swui-metrics-indent) * 2)}._iconWrapper_pdrwr_16{--current-bg-color: transparent;--current-border-color: var(--lhds-color-ui-50);--current-icon-color: var(--lhds-color-ui-50);display:inline-flex;flex-direction:row;white-space:nowrap;background-color:var(--current-bg-color);border:1px solid var(--current-border-color);border-radius:var(--swui-border-radius);padding:calc(var(--swui-metrics-spacing) * .5);align-items:flex-start}._iconWrapper_pdrwr_16 svg{color:var(--current-icon-color)}._iconWrapper_pdrwr_16._info_pdrwr_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--swui-info-weak-bg-color);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_pdrwr_16._warning_pdrwr_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--swui-warning-weak-bg-color);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_pdrwr_16._error_pdrwr_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--swui-error-weak-bg-color);--current-icon-color: var(--lhds-color-red-700)}
|
package/dist/index.es.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Column as
|
|
3
|
-
import { FlatButton as
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { useFloatingParentNodeId as ne, FloatingTree as te, useFloatingNodeId as oe, useFloating as
|
|
6
|
-
import
|
|
1
|
+
import { jsxs as l, jsx as e, Fragment as C } from "react/jsx-runtime";
|
|
2
|
+
import { Column as we, Text as Z, Space as O, Row as q } from "@stenajs-webui/core";
|
|
3
|
+
import { FlatButton as _e, PrimaryButton as ye, Spinner as Ie, Icon as Re, stenaExclamationTriangle as Pe, stenaExclamationCircle as ve, stenaInfoCircle as Fe } from "@stenajs-webui/elements";
|
|
4
|
+
import { useRef as H, useCallback as S, useState as ee } from "react";
|
|
5
|
+
import { useFloatingParentNodeId as ne, FloatingTree as te, useFloatingNodeId as oe, useFloating as E, autoUpdate as M, offset as $, flip as k, shift as G, arrow as D, useTransitionStyles as j, useDismiss as ie, useRole as se, useInteractions as z, FloatingNode as re, FloatingPortal as B, FloatingFocusManager as le, FloatingArrow as U, useFocus as Ce, useClick as xe, useHover as ce, safePolygon as be } from "@floating-ui/react";
|
|
6
|
+
import x from "classnames";
|
|
7
7
|
import { cssColor as Ae } from "@stenajs-webui/theme";
|
|
8
8
|
import './index.css';const Ve = ({
|
|
9
9
|
text: n = "Are you sure?",
|
|
10
10
|
yesLabel: t = "Yes",
|
|
11
11
|
noLabel: o = "No",
|
|
12
12
|
onNo: a,
|
|
13
|
-
onYes:
|
|
13
|
+
onYes: i,
|
|
14
14
|
loading: d
|
|
15
|
-
}) => /* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
15
|
+
}) => /* @__PURE__ */ l(we, { position: "relative", children: [
|
|
16
|
+
/* @__PURE__ */ l("div", { style: { opacity: d ? 0 : 1 }, children: [
|
|
17
17
|
/* @__PURE__ */ e(Z, { children: n }),
|
|
18
|
-
/* @__PURE__ */ e(
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
-
/* @__PURE__ */ e(
|
|
21
|
-
/* @__PURE__ */ e(
|
|
22
|
-
/* @__PURE__ */ e(ye, { label: t, onClick:
|
|
18
|
+
/* @__PURE__ */ e(O, {}),
|
|
19
|
+
/* @__PURE__ */ l(q, { justifyContent: "flex-end", alignItems: "center", children: [
|
|
20
|
+
/* @__PURE__ */ e(_e, { label: o, onClick: a }),
|
|
21
|
+
/* @__PURE__ */ e(O, {}),
|
|
22
|
+
/* @__PURE__ */ e(ye, { label: t, onClick: i })
|
|
23
23
|
] })
|
|
24
24
|
] }),
|
|
25
25
|
d && /* @__PURE__ */ e(
|
|
@@ -35,10 +35,10 @@ import './index.css';const Ve = ({
|
|
|
35
35
|
children: /* @__PURE__ */ e(Ie, { size: "small" })
|
|
36
36
|
}
|
|
37
37
|
)
|
|
38
|
-
] }), Te = "
|
|
38
|
+
] }), Te = "_floating_dg9ix_1", We = "_disablePadding_dg9ix_11", R = {
|
|
39
39
|
floating: Te,
|
|
40
40
|
disablePadding: We
|
|
41
|
-
},
|
|
41
|
+
}, Ne = 12, J = 8, Oe = 2, Xe = ({
|
|
42
42
|
children: n,
|
|
43
43
|
...t
|
|
44
44
|
}) => ne() == null ? /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(K, { ...t, children: n }) }) : /* @__PURE__ */ e(K, { ...t, children: n }), K = ({
|
|
@@ -46,63 +46,63 @@ import './index.css';const Ve = ({
|
|
|
46
46
|
placement: t = "bottom",
|
|
47
47
|
hideArrow: o,
|
|
48
48
|
renderTrigger: a,
|
|
49
|
-
disablePadding:
|
|
49
|
+
disablePadding: i,
|
|
50
50
|
open: d,
|
|
51
51
|
onRequestClose: f,
|
|
52
|
-
restoreFocus:
|
|
52
|
+
restoreFocus: _,
|
|
53
53
|
returnFocus: y,
|
|
54
54
|
initialFocus: I,
|
|
55
55
|
appendTo: p,
|
|
56
56
|
zIndex: h
|
|
57
57
|
}) => {
|
|
58
|
-
const g = oe(), c =
|
|
58
|
+
const g = oe(), c = H(null), u = S(
|
|
59
59
|
(W) => {
|
|
60
60
|
W || f();
|
|
61
61
|
},
|
|
62
62
|
[f]
|
|
63
|
-
), { refs: m, floatingStyles:
|
|
63
|
+
), { refs: m, floatingStyles: w, context: s } = E({
|
|
64
64
|
nodeId: g,
|
|
65
65
|
open: d,
|
|
66
66
|
onOpenChange: u,
|
|
67
67
|
placement: t,
|
|
68
68
|
middleware: [
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
$(J + Oe),
|
|
70
|
+
k({ padding: 5 }),
|
|
71
71
|
G({ padding: 5 }),
|
|
72
72
|
D({ element: c })
|
|
73
73
|
],
|
|
74
|
-
whileElementsMounted:
|
|
75
|
-
}), { isMounted: P, styles:
|
|
74
|
+
whileElementsMounted: M
|
|
75
|
+
}), { isMounted: P, styles: b } = j(s, {
|
|
76
76
|
initial: {
|
|
77
77
|
opacity: 0
|
|
78
78
|
}
|
|
79
|
-
}), v =
|
|
79
|
+
}), v = ie(s), A = se(s), { getReferenceProps: r, getFloatingProps: T } = z([
|
|
80
80
|
v,
|
|
81
81
|
A
|
|
82
82
|
]);
|
|
83
|
-
return /* @__PURE__ */
|
|
84
|
-
a({ ref: m.setReference, ...
|
|
85
|
-
/* @__PURE__ */ e(
|
|
86
|
-
|
|
83
|
+
return /* @__PURE__ */ l(C, { children: [
|
|
84
|
+
a({ ref: m.setReference, ...r() }),
|
|
85
|
+
/* @__PURE__ */ e(re, { id: g, children: P && /* @__PURE__ */ e(B, { root: p, children: /* @__PURE__ */ e(
|
|
86
|
+
le,
|
|
87
87
|
{
|
|
88
|
-
context:
|
|
88
|
+
context: s,
|
|
89
89
|
modal: !1,
|
|
90
|
-
restoreFocus:
|
|
90
|
+
restoreFocus: _,
|
|
91
91
|
returnFocus: y,
|
|
92
92
|
initialFocus: I,
|
|
93
93
|
children: /* @__PURE__ */ e(
|
|
94
94
|
"div",
|
|
95
95
|
{
|
|
96
96
|
ref: m.setFloating,
|
|
97
|
-
style: { zIndex: h, ...
|
|
97
|
+
style: { zIndex: h, ...w },
|
|
98
98
|
...T(),
|
|
99
|
-
children: /* @__PURE__ */
|
|
99
|
+
children: /* @__PURE__ */ l(
|
|
100
100
|
"div",
|
|
101
101
|
{
|
|
102
|
-
style:
|
|
103
|
-
className:
|
|
102
|
+
style: b,
|
|
103
|
+
className: x(
|
|
104
104
|
R.floating,
|
|
105
|
-
|
|
105
|
+
i && R.disablePadding
|
|
106
106
|
),
|
|
107
107
|
children: [
|
|
108
108
|
n,
|
|
@@ -110,8 +110,8 @@ import './index.css';const Ve = ({
|
|
|
110
110
|
U,
|
|
111
111
|
{
|
|
112
112
|
ref: c,
|
|
113
|
-
context:
|
|
114
|
-
width:
|
|
113
|
+
context: s,
|
|
114
|
+
width: Ne,
|
|
115
115
|
height: J,
|
|
116
116
|
fill: "white"
|
|
117
117
|
}
|
|
@@ -124,15 +124,15 @@ import './index.css';const Ve = ({
|
|
|
124
124
|
}
|
|
125
125
|
) }) })
|
|
126
126
|
] });
|
|
127
|
-
},
|
|
127
|
+
}, Se = 12, L = 8, He = 2, Ze = ({ children: n, ...t }) => ne() == null ? /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(Q, { ...t, children: n }) }) : /* @__PURE__ */ e(Q, { ...t, children: n }), Q = ({
|
|
128
128
|
children: n,
|
|
129
129
|
variant: t,
|
|
130
130
|
trigger: o = "hover",
|
|
131
131
|
placement: a = "bottom",
|
|
132
|
-
hideArrow:
|
|
132
|
+
hideArrow: i,
|
|
133
133
|
renderTrigger: d,
|
|
134
134
|
disablePadding: f,
|
|
135
|
-
restoreFocus:
|
|
135
|
+
restoreFocus: _,
|
|
136
136
|
returnFocus: y,
|
|
137
137
|
initialFocus: I,
|
|
138
138
|
appendTo: p,
|
|
@@ -141,35 +141,35 @@ import './index.css';const Ve = ({
|
|
|
141
141
|
onOpened: c,
|
|
142
142
|
onClosed: u
|
|
143
143
|
}) => {
|
|
144
|
-
const [m,
|
|
144
|
+
const [m, w] = ee(!1), s = oe(), P = H(null), b = S(
|
|
145
145
|
(Y) => {
|
|
146
|
-
|
|
146
|
+
w(Y), Y ? c?.() : u?.();
|
|
147
147
|
},
|
|
148
148
|
[u, c]
|
|
149
|
-
), { refs: v, floatingStyles: A, context:
|
|
150
|
-
nodeId:
|
|
149
|
+
), { refs: v, floatingStyles: A, context: r } = E({
|
|
150
|
+
nodeId: s,
|
|
151
151
|
open: m,
|
|
152
|
-
onOpenChange:
|
|
152
|
+
onOpenChange: b,
|
|
153
153
|
placement: a,
|
|
154
154
|
elements: {
|
|
155
155
|
reference: h
|
|
156
156
|
},
|
|
157
157
|
middleware: [
|
|
158
|
-
|
|
159
|
-
|
|
158
|
+
$(L + He),
|
|
159
|
+
k({ padding: 5, fallbackAxisSideDirection: "start" }),
|
|
160
160
|
G({ padding: 5 }),
|
|
161
161
|
D({ element: P })
|
|
162
162
|
],
|
|
163
|
-
whileElementsMounted:
|
|
164
|
-
}), { isMounted: T, styles: W } = j(
|
|
163
|
+
whileElementsMounted: M
|
|
164
|
+
}), { isMounted: T, styles: W } = j(r, {
|
|
165
165
|
initial: {
|
|
166
166
|
opacity: 0
|
|
167
167
|
}
|
|
168
|
-
}), ae =
|
|
169
|
-
|
|
170
|
-
}, []), de =
|
|
171
|
-
enabled:
|
|
172
|
-
handleClose:
|
|
168
|
+
}), ae = S(() => {
|
|
169
|
+
w(!1);
|
|
170
|
+
}, []), de = ie(r), fe = se(r), pe = Ce(r, { enabled: N(o, "focus") }), he = xe(r, { enabled: N(o, "click") }), ge = ce(r, {
|
|
171
|
+
enabled: N(o, "hover"),
|
|
172
|
+
handleClose: be(),
|
|
173
173
|
restMs: 100
|
|
174
174
|
}), { getReferenceProps: ue, getFloatingProps: me } = z([
|
|
175
175
|
pe,
|
|
@@ -178,14 +178,14 @@ import './index.css';const Ve = ({
|
|
|
178
178
|
de,
|
|
179
179
|
fe
|
|
180
180
|
]);
|
|
181
|
-
return /* @__PURE__ */
|
|
181
|
+
return /* @__PURE__ */ l(C, { children: [
|
|
182
182
|
d({ ref: v.setReference, ...ue() }),
|
|
183
|
-
/* @__PURE__ */ e(
|
|
184
|
-
|
|
183
|
+
/* @__PURE__ */ e(re, { id: s, children: T && /* @__PURE__ */ e(B, { root: p, children: /* @__PURE__ */ e(
|
|
184
|
+
le,
|
|
185
185
|
{
|
|
186
|
-
context:
|
|
186
|
+
context: r,
|
|
187
187
|
modal: !1,
|
|
188
|
-
restoreFocus:
|
|
188
|
+
restoreFocus: _,
|
|
189
189
|
returnFocus: y,
|
|
190
190
|
initialFocus: I,
|
|
191
191
|
children: /* @__PURE__ */ e(
|
|
@@ -194,23 +194,23 @@ import './index.css';const Ve = ({
|
|
|
194
194
|
ref: v.setFloating,
|
|
195
195
|
style: { zIndex: g, ...A },
|
|
196
196
|
...me(),
|
|
197
|
-
children: /* @__PURE__ */
|
|
197
|
+
children: /* @__PURE__ */ l(
|
|
198
198
|
"div",
|
|
199
199
|
{
|
|
200
200
|
style: W,
|
|
201
|
-
className:
|
|
201
|
+
className: x(
|
|
202
202
|
R.floating,
|
|
203
203
|
f && R.disablePadding,
|
|
204
204
|
t && R.withIcon
|
|
205
205
|
),
|
|
206
206
|
children: [
|
|
207
207
|
typeof n == "function" ? n({ onRequestClose: ae }) : n,
|
|
208
|
-
!
|
|
208
|
+
!i && /* @__PURE__ */ e(
|
|
209
209
|
U,
|
|
210
210
|
{
|
|
211
211
|
ref: P,
|
|
212
|
-
context:
|
|
213
|
-
width:
|
|
212
|
+
context: r,
|
|
213
|
+
width: Se,
|
|
214
214
|
height: L,
|
|
215
215
|
fill: "white"
|
|
216
216
|
}
|
|
@@ -223,11 +223,11 @@ import './index.css';const Ve = ({
|
|
|
223
223
|
}
|
|
224
224
|
) }) })
|
|
225
225
|
] });
|
|
226
|
-
},
|
|
227
|
-
floating:
|
|
228
|
-
withIcon:
|
|
229
|
-
iconWrapper:
|
|
230
|
-
info:
|
|
226
|
+
}, N = (n, t) => typeof n == "string" ? n === t : n.includes(t), Ee = "_floating_pdrwr_1", Me = "_withIcon_pdrwr_10", $e = "_iconWrapper_pdrwr_16", ke = "_info_pdrwr_36", Ge = "_warning_pdrwr_42", De = "_error_pdrwr_48", F = {
|
|
227
|
+
floating: Ee,
|
|
228
|
+
withIcon: Me,
|
|
229
|
+
iconWrapper: $e,
|
|
230
|
+
info: ke,
|
|
231
231
|
warning: Ge,
|
|
232
232
|
error: De
|
|
233
233
|
}, je = {
|
|
@@ -239,50 +239,50 @@ import './index.css';const Ve = ({
|
|
|
239
239
|
visible: t,
|
|
240
240
|
placement: o,
|
|
241
241
|
label: a,
|
|
242
|
-
variant:
|
|
242
|
+
variant: i,
|
|
243
243
|
maxWidth: d = "500px",
|
|
244
244
|
appendTo: f,
|
|
245
|
-
zIndex:
|
|
245
|
+
zIndex: _
|
|
246
246
|
}) => {
|
|
247
|
-
const [y, I] = ee(!1), p =
|
|
247
|
+
const [y, I] = ee(!1), p = H(null), { refs: h, floatingStyles: g, context: c } = E({
|
|
248
248
|
placement: o,
|
|
249
249
|
open: t ?? y,
|
|
250
250
|
onOpenChange: I,
|
|
251
251
|
middleware: [
|
|
252
|
-
|
|
253
|
-
|
|
252
|
+
$(V + Be),
|
|
253
|
+
k({ padding: 5 }),
|
|
254
254
|
G({ padding: 5 }),
|
|
255
255
|
D({ element: p })
|
|
256
256
|
],
|
|
257
|
-
whileElementsMounted:
|
|
257
|
+
whileElementsMounted: M
|
|
258
258
|
}), { isMounted: u, styles: m } = j(c, {
|
|
259
259
|
initial: {
|
|
260
260
|
opacity: 0
|
|
261
261
|
}
|
|
262
|
-
}),
|
|
263
|
-
return /* @__PURE__ */
|
|
264
|
-
/* @__PURE__ */ e("div", { ref: h.setReference, ...
|
|
265
|
-
u && /* @__PURE__ */ e(B, { root: f, children: /* @__PURE__ */ e("div", { ref: h.setFloating, style: { zIndex:
|
|
262
|
+
}), w = ce(c), { getReferenceProps: s } = z([w]);
|
|
263
|
+
return /* @__PURE__ */ l(C, { children: [
|
|
264
|
+
/* @__PURE__ */ e("div", { ref: h.setReference, ...s(), children: n }),
|
|
265
|
+
u && /* @__PURE__ */ e(B, { root: f, children: /* @__PURE__ */ e("div", { ref: h.setFloating, style: { zIndex: _, ...g }, children: /* @__PURE__ */ l(
|
|
266
266
|
"div",
|
|
267
267
|
{
|
|
268
268
|
style: { maxWidth: d, ...m },
|
|
269
|
-
className:
|
|
269
|
+
className: x(
|
|
270
270
|
F.floating,
|
|
271
|
-
|
|
271
|
+
i && F.withIcon
|
|
272
272
|
),
|
|
273
273
|
children: [
|
|
274
|
-
|
|
274
|
+
i ? /* @__PURE__ */ l(C, { children: [
|
|
275
275
|
/* @__PURE__ */ e(
|
|
276
276
|
"div",
|
|
277
277
|
{
|
|
278
|
-
className:
|
|
278
|
+
className: x(
|
|
279
279
|
F.iconWrapper,
|
|
280
|
-
F[
|
|
280
|
+
F[i]
|
|
281
281
|
),
|
|
282
|
-
children: /* @__PURE__ */ e(Re, { icon: je[
|
|
282
|
+
children: /* @__PURE__ */ e(Re, { icon: je[i], size: 16 })
|
|
283
283
|
}
|
|
284
284
|
),
|
|
285
|
-
/* @__PURE__ */ e(
|
|
285
|
+
/* @__PURE__ */ e(O, {}),
|
|
286
286
|
/* @__PURE__ */ e(X, { label: a })
|
|
287
287
|
] }) : /* @__PURE__ */ e(X, { label: a }),
|
|
288
288
|
/* @__PURE__ */ e(
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const n=require("react/jsx-runtime"),u=require("@stenajs-webui/core"),g=require("@stenajs-webui/elements"),f=require("react"),e=require("@floating-ui/react"),b=require("classnames"),L=require("@stenajs-webui/theme"),Q=({text:t="Are you sure?",yesLabel:s="Yes",noLabel:o="No",onNo:c,onYes:i,loading:d})=>n.jsxs(u.Column,{position:"relative",children:[n.jsxs("div",{style:{opacity:d?0:1},children:[n.jsx(u.Text,{children:t}),n.jsx(u.Space,{}),n.jsxs(u.Row,{justifyContent:"flex-end",alignItems:"center",children:[n.jsx(g.FlatButton,{label:o,onClick:c}),n.jsx(u.Space,{}),n.jsx(g.PrimaryButton,{label:s,onClick:i})]})]}),d&&n.jsx(u.Row,{justifyContent:"center",alignItems:"center",left:0,top:0,width:"100%",height:"100%",position:"absolute",children:n.jsx(g.Spinner,{size:"small"})})]}),V="_floating_dg9ix_1",X="_disablePadding_dg9ix_11",R={floating:V,disablePadding:X},Z=12,H=8,ee=2,ne=({children:t,...s})=>e.useFloatingParentNodeId()==null?n.jsx(e.FloatingTree,{children:n.jsx(M,{...s,children:t})}):n.jsx(M,{...s,children:t}),M=({children:t,placement:s="bottom",hideArrow:o,renderTrigger:c,disablePadding:i,open:d,onRequestClose:p,restoreFocus:F,returnFocus:I,initialFocus:_,appendTo:x,zIndex:h})=>{const j=e.useFloatingNodeId(),a=f.useRef(null),m=f.useCallback(N=>{N||p()},[p]),{refs:w,floatingStyles:y,context:r}=e.useFloating({nodeId:j,open:d,onOpenChange:m,placement:s,middleware:[e.offset(H+ee),e.flip({padding:5}),e.shift({padding:5}),e.arrow({element:a})],whileElementsMounted:e.autoUpdate}),{isMounted:P,styles:S}=e.useTransitionStyles(r,{initial:{opacity:0}}),v=e.useDismiss(r),T=e.useRole(r),{getReferenceProps:l,getFloatingProps:A}=e.useInteractions([v,T]);return n.jsxs(n.Fragment,{children:[c({ref:w.setReference,...l()}),n.jsx(e.FloatingNode,{id:j,children:P&&n.jsx(e.FloatingPortal,{root:x,children:n.jsx(e.FloatingFocusManager,{context:r,modal:!1,restoreFocus:F,returnFocus:I,initialFocus:_,children:n.jsx("div",{ref:w.setFloating,style:{zIndex:h,...y},...A(),children:n.jsxs("div",{style:S,className:b(R.floating,i&&R.disablePadding),children:[t,!o&&n.jsx(e.FloatingArrow,{ref:a,context:r,width:Z,height:H,fill:"white"})]})})})})})]})},te=12,$=8,se=2,oe=({children:t,...s})=>e.useFloatingParentNodeId()==null?n.jsx(e.FloatingTree,{children:n.jsx(k,{...s,children:t})}):n.jsx(k,{...s,children:t}),k=({children:t,variant:s,trigger:o="hover",placement:c="bottom",hideArrow:i,renderTrigger:d,disablePadding:p,restoreFocus:F,returnFocus:I,initialFocus:_,appendTo:x,anchor:h,zIndex:j,onOpened:a,onClosed:m})=>{const[w,y]=f.useState(!1),r=e.useFloatingNodeId(),P=f.useRef(null),S=f.useCallback(W=>{y(W),W?a?.():m?.()},[m,a]),{refs:v,floatingStyles:T,context:l}=e.useFloating({nodeId:r,open:w,onOpenChange:S,placement:c,elements:{reference:h},middleware:[e.offset($+se),e.flip({padding:5,fallbackAxisSideDirection:"start"}),e.shift({padding:5}),e.arrow({element:P})],whileElementsMounted:e.autoUpdate}),{isMounted:A,styles:N}=e.useTransitionStyles(l,{initial:{opacity:0}}),D=f.useCallback(()=>{y(!1)},[]),G=e.useDismiss(l),z=e.useRole(l),U=e.useFocus(l,{enabled:O(o,"focus")}),B=e.useClick(l,{enabled:O(o,"click")}),Y=e.useHover(l,{enabled:O(o,"hover"),handleClose:e.safePolygon(),restMs:100}),{getReferenceProps:J,getFloatingProps:K}=e.useInteractions([U,B,Y,G,z]);return n.jsxs(n.Fragment,{children:[d({ref:v.setReference,...J()}),n.jsx(e.FloatingNode,{id:r,children:A&&n.jsx(e.FloatingPortal,{root:x,children:n.jsx(e.FloatingFocusManager,{context:l,modal:!1,restoreFocus:F,returnFocus:I,initialFocus:_,children:n.jsx("div",{ref:v.setFloating,style:{zIndex:j,...T},...K(),children:n.jsxs("div",{style:N,className:b(R.floating,p&&R.disablePadding,s&&R.withIcon),children:[typeof t=="function"?t({onRequestClose:D}):t,!i&&n.jsx(e.FloatingArrow,{ref:P,context:l,width:te,height:$,fill:"white"})]})})})})})]})},O=(t,s)=>typeof t=="string"?t===s:t.includes(s),ie="_floating_pdrwr_1",re="_withIcon_pdrwr_10",le="_iconWrapper_pdrwr_16",ae="_info_pdrwr_36",ce="_warning_pdrwr_42",de="_error_pdrwr_48",C={floating:ie,withIcon:re,iconWrapper:le,info:ae,warning:ce,error:de},ue={info:g.stenaInfoCircle,warning:g.stenaExclamationCircle,error:g.stenaExclamationTriangle},fe=12,E=8,ge=2,pe=({children:t,visible:s,placement:o,label:c,variant:i,maxWidth:d="500px",appendTo:p,zIndex:F})=>{const[I,_]=f.useState(!1),x=f.useRef(null),{refs:h,floatingStyles:j,context:a}=e.useFloating({placement:o,open:s??I,onOpenChange:_,middleware:[e.offset(E+ge),e.flip({padding:5}),e.shift({padding:5}),e.arrow({element:x})],whileElementsMounted:e.autoUpdate}),{isMounted:m,styles:w}=e.useTransitionStyles(a,{initial:{opacity:0}}),y=e.useHover(a),{getReferenceProps:r}=e.useInteractions([y]);return n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:h.setReference,...r(),children:t}),m&&n.jsx(e.FloatingPortal,{root:p,children:n.jsx("div",{ref:h.setFloating,style:{zIndex:F,...j},children:n.jsxs("div",{style:{maxWidth:d,...w},className:b(C.floating,i&&C.withIcon),children:[i?n.jsxs(n.Fragment,{children:[n.jsx("div",{className:b(C.iconWrapper,C[i]),children:n.jsx(g.Icon,{icon:ue[i],size:16})}),n.jsx(u.Space,{}),n.jsx(q,{label:c})]}):n.jsx(q,{label:c}),n.jsx(e.FloatingArrow,{ref:x,context:a,width:fe,height:E,fill:"#333"})]})})})]})},q=({label:t})=>n.jsx(u.Text,{color:L.cssColor("--lhds-color-ui-50"),size:"small",variant:"bold",children:t});exports.ActionPrompt=Q;exports.ControlledPopover=ne;exports.Popover=oe;exports.Tooltip=pe;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/tooltip",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.19.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"author": "mattias800",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "^0.27.3",
|
|
41
|
-
"@stenajs-webui/core": "23.
|
|
42
|
-
"@stenajs-webui/elements": "23.
|
|
43
|
-
"@stenajs-webui/theme": "23.
|
|
41
|
+
"@stenajs-webui/core": "23.19.0",
|
|
42
|
+
"@stenajs-webui/elements": "23.19.0",
|
|
43
|
+
"@stenajs-webui/theme": "23.19.0",
|
|
44
44
|
"classnames": "^2.5.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"files": [
|
|
63
63
|
"dist"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "912cc8c27a008b28e422ac639ced616b74da3194",
|
|
66
66
|
"publishConfig": {
|
|
67
67
|
"access": "public"
|
|
68
68
|
}
|