@frontify/fondue 12.0.0-beta.121 → 12.0.0-beta.123
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/components/Tooltip/BrightHeader.es.js +26 -26
- package/dist/components/Tooltip/BrightHeader.es.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.es.js +86 -87
- package/dist/components/Tooltip/Tooltip.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import t, { cloneElement as
|
|
2
|
-
import { merge as
|
|
1
|
+
import t, { cloneElement as o } from "react";
|
|
2
|
+
import { merge as r } from "../../utilities/merge.es.js";
|
|
3
3
|
import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
|
|
4
4
|
import i from "../../foundation/Icon/Generated/IconExclamationMarkCircle.es.js";
|
|
5
5
|
import a from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
|
|
6
6
|
import m from "../../foundation/Icon/Generated/IconCheckMark.es.js";
|
|
7
|
-
import
|
|
8
|
-
var
|
|
9
|
-
const
|
|
10
|
-
Information: "tw-bg-
|
|
11
|
-
Warning: "tw-bg-
|
|
12
|
-
Tip: "tw-bg-
|
|
13
|
-
Note: "tw-bg-
|
|
14
|
-
},
|
|
15
|
-
Information: "before:tw-bg-
|
|
16
|
-
Warning: "before:tw-bg-
|
|
17
|
-
Tip: "before:tw-bg-
|
|
18
|
-
Note: "before:tw-bg-
|
|
19
|
-
},
|
|
7
|
+
import s from "../../foundation/Icon/Generated/IconDocument.es.js";
|
|
8
|
+
var g = /* @__PURE__ */ ((e) => (e.Information = "Information", e.Warning = "Warning", e.Tip = "Tip", e.Note = "Note", e))(g || {});
|
|
9
|
+
const c = {
|
|
10
|
+
Information: "tw-bg-box-selected-strong",
|
|
11
|
+
Warning: "tw-bg-box-negative-strong-pressed",
|
|
12
|
+
Tip: "tw-bg-box-positive-strong-pressed",
|
|
13
|
+
Note: "tw-bg-box-warning-strong"
|
|
14
|
+
}, E = {
|
|
15
|
+
Information: "before:tw-bg-box-selected-strong",
|
|
16
|
+
Warning: "before:tw-bg-box-negative-strong-pressed",
|
|
17
|
+
Tip: "before:tw-bg-box-positive-strong-pressed",
|
|
18
|
+
Note: "before:tw-bg-box-warning-strong"
|
|
19
|
+
}, b = {
|
|
20
20
|
Information: /* @__PURE__ */ t.createElement(i, null),
|
|
21
21
|
Warning: /* @__PURE__ */ t.createElement(a, null),
|
|
22
22
|
Tip: /* @__PURE__ */ t.createElement(m, null),
|
|
23
|
-
Note: /* @__PURE__ */ t.createElement(
|
|
24
|
-
},
|
|
23
|
+
Note: /* @__PURE__ */ t.createElement(s, null)
|
|
24
|
+
}, l = ({ headerStyle: e }) => /* @__PURE__ */ t.createElement(
|
|
25
25
|
"div",
|
|
26
26
|
{
|
|
27
27
|
"data-test-id": "bright-header",
|
|
28
|
-
className:
|
|
29
|
-
"tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-
|
|
30
|
-
|
|
28
|
+
className: r([
|
|
29
|
+
"tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text",
|
|
30
|
+
c[e]
|
|
31
31
|
])
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
o(b[e], { size: n.Size20 })
|
|
34
34
|
);
|
|
35
|
-
|
|
35
|
+
l.displayName = "FondueBrightHeader";
|
|
36
36
|
export {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
l as BrightHeader,
|
|
38
|
+
g as BrightHeaderStyle,
|
|
39
|
+
E as brightHeaderArrowBackgroundColors,
|
|
40
|
+
c as brightHeaderBackgroundColors
|
|
41
41
|
};
|
|
42
42
|
//# sourceMappingURL=BrightHeader.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-
|
|
1
|
+
{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n [BrightHeaderStyle.Tip]: <IconCheckMark />,\n [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: FC<BrightHeaderProps> = ({ headerStyle }) => {\n return (\n <div\n data-test-id=\"bright-header\"\n className={merge([\n 'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n brightHeaderBackgroundColors[headerStyle],\n ])}\n >\n {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n </div>\n );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["BrightHeaderStyle","brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","React","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAJCA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAAkE;AAAA,EAC1E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAAA,cAACC,GAA0B,IAAA;AAAA,EAC3D,SAA4B,gBAAAD,EAAA,cAACE,GAA4B,IAAA;AAAA,EACzD,KAAwB,gBAAAF,EAAA,cAACG,GAAc,IAAA;AAAA,EACvC,MAAyB,gBAAAH,EAAA,cAACI,GAAa,IAAA;AAC5C,GAMaC,IAAsC,CAAC,EAAE,aAAAC,QAE9C,gBAAAN,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,EAAA;AAAA,EAEAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA;AAIlFJ,EAAa,cAAc;"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { IconSize as
|
|
1
|
+
import { IconSize as V } from "../../foundation/Icon/IconSize.es.js";
|
|
2
2
|
import { useLink as ne } from "@react-aria/link";
|
|
3
|
-
import { FOCUS_VISIBLE_STYLE as
|
|
3
|
+
import { FOCUS_VISIBLE_STYLE as fe } from "../../utilities/focusStyle.es.js";
|
|
4
4
|
import { merge as n } from "../../utilities/merge.es.js";
|
|
5
|
-
import t, { useState as
|
|
6
|
-
import { BrightHeader as de, brightHeaderArrowBackgroundColors as
|
|
7
|
-
import { usePopper as
|
|
5
|
+
import t, { useState as c, useRef as Y, useMemo as we, useCallback as h, useEffect as me, useLayoutEffect as ie, cloneElement as x } from "react";
|
|
6
|
+
import { BrightHeader as de, brightHeaderArrowBackgroundColors as B } from "./BrightHeader.es.js";
|
|
7
|
+
import { usePopper as ce } from "react-popper";
|
|
8
8
|
import { useMemoizedId as pe } from "../../hooks/useMemoizedId.es.js";
|
|
9
|
-
import { Button as
|
|
10
|
-
import { ButtonStyle as
|
|
11
|
-
const
|
|
9
|
+
import { Button as j } from "../Button/Button.es.js";
|
|
10
|
+
import { ButtonStyle as q, ButtonEmphasis as D, ButtonSize as G } from "../Button/ButtonTypes.es.js";
|
|
11
|
+
const J = {
|
|
12
12
|
small: "tw-pt-3.5",
|
|
13
13
|
large: "tw-pt-4"
|
|
14
|
-
},
|
|
14
|
+
}, K = {
|
|
15
15
|
small: "tw-pb-3.5",
|
|
16
16
|
large: "tw-pb-4"
|
|
17
17
|
};
|
|
18
18
|
var ue = /* @__PURE__ */ ((e) => (e.Top = "Top", e.Right = "Right", e.Bottom = "Bottom", e.Left = "Left", e))(ue || {}), be = /* @__PURE__ */ ((e) => (e.Start = "Start", e.Middle = "Middle", e.End = "End", e))(be || {});
|
|
19
|
-
const
|
|
19
|
+
const Ee = {
|
|
20
20
|
["Top-Start"]: "top-start",
|
|
21
21
|
["Top-End"]: "top-end",
|
|
22
22
|
["Bottom-Start"]: "bottom-start",
|
|
@@ -29,56 +29,56 @@ const ge = {
|
|
|
29
29
|
["Right-Middle"]: "right",
|
|
30
30
|
["Bottom-Middle"]: "bottom",
|
|
31
31
|
["Left-Middle"]: "left"
|
|
32
|
-
},
|
|
32
|
+
}, ge = (e, s, l) => {
|
|
33
33
|
switch (!0) {
|
|
34
34
|
case e.toString().includes("Top".toLowerCase()):
|
|
35
|
-
return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-
|
|
35
|
+
return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base";
|
|
36
36
|
case e.toString().includes("Right".toLowerCase()):
|
|
37
37
|
return n([
|
|
38
38
|
"before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]",
|
|
39
|
-
|
|
39
|
+
s && l === "Start" && e.toString().includes("Start".toLowerCase()) ? B[s] : "before:tw-dark before:tw-bg-base"
|
|
40
40
|
]);
|
|
41
41
|
case e.toString().includes("Bottom".toLowerCase()):
|
|
42
42
|
return n([
|
|
43
43
|
"before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
|
|
44
|
-
|
|
44
|
+
s ? B[s] : "before:tw-dark before:tw-bg-base"
|
|
45
45
|
]);
|
|
46
46
|
case e.toString().includes("Left".toLowerCase()):
|
|
47
47
|
return n([
|
|
48
48
|
"before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]",
|
|
49
|
-
|
|
49
|
+
s && l === "Start" && e.toString().includes("Start".toLowerCase()) ? B[s] : "before:tw-dark before:tw-bg-base"
|
|
50
50
|
]);
|
|
51
51
|
default:
|
|
52
|
-
return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-
|
|
52
|
+
return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base";
|
|
53
53
|
}
|
|
54
54
|
}, Se = ({
|
|
55
55
|
content: e,
|
|
56
|
-
tooltipIcon:
|
|
57
|
-
heading:
|
|
56
|
+
tooltipIcon: s,
|
|
57
|
+
heading: l,
|
|
58
58
|
headingIcon: p,
|
|
59
|
-
linkUrl:
|
|
60
|
-
linkLabel:
|
|
59
|
+
linkUrl: i,
|
|
60
|
+
linkLabel: Q,
|
|
61
61
|
brightHeader: d,
|
|
62
62
|
buttons: r,
|
|
63
|
-
children:
|
|
64
|
-
position:
|
|
65
|
-
alignment:
|
|
63
|
+
children: W,
|
|
64
|
+
position: L = "Bottom",
|
|
65
|
+
alignment: k = "Middle",
|
|
66
66
|
withArrow: u,
|
|
67
|
-
flip:
|
|
68
|
-
triggerElement:
|
|
69
|
-
hoverDelay:
|
|
67
|
+
flip: X = !0,
|
|
68
|
+
triggerElement: T,
|
|
69
|
+
hoverDelay: C = 200,
|
|
70
70
|
enterDelay: b = 0,
|
|
71
|
-
open:
|
|
72
|
-
disabled:
|
|
73
|
-
hidden:
|
|
71
|
+
open: M = !1,
|
|
72
|
+
disabled: E = !1,
|
|
73
|
+
hidden: g = !1
|
|
74
74
|
}) => {
|
|
75
|
-
var
|
|
76
|
-
const [
|
|
75
|
+
var I;
|
|
76
|
+
const [S, Z] = c(
|
|
77
77
|
null
|
|
78
|
-
),
|
|
79
|
-
() =>
|
|
80
|
-
[
|
|
81
|
-
), H =
|
|
78
|
+
), R = Y(null), { linkProps: A } = ne({}, R), P = we(
|
|
79
|
+
() => i || d || r || l || p,
|
|
80
|
+
[i, d, r, l, p]
|
|
81
|
+
), H = Ee[`${L}-${k}`], [f, U] = c(null), [y, ee] = c(null), [te, re] = c(null), z = pe(), w = ce(S, f, {
|
|
82
82
|
placement: H,
|
|
83
83
|
strategy: "fixed",
|
|
84
84
|
modifiers: [
|
|
@@ -96,101 +96,100 @@ const ge = {
|
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
name: "flip",
|
|
99
|
-
enabled:
|
|
99
|
+
enabled: X
|
|
100
100
|
}
|
|
101
101
|
]
|
|
102
|
-
}), oe = ((
|
|
103
|
-
|
|
104
|
-
}, [
|
|
105
|
-
if (
|
|
106
|
-
|
|
102
|
+
}), oe = ((I = w.state) == null ? void 0 : I.placement) ?? L, ae = ge(oe, d, k), [v, o] = c(!1), m = Y(null), N = h(() => {
|
|
103
|
+
m.current && clearTimeout(m.current), m.current = setTimeout(() => o(!1), C);
|
|
104
|
+
}, [C]), O = h(() => {
|
|
105
|
+
if (m.current && clearTimeout(m.current), b) {
|
|
106
|
+
m.current = setTimeout(() => o(!0), b);
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
109
|
o(!0);
|
|
110
|
-
}, [b]),
|
|
110
|
+
}, [b]), F = h(
|
|
111
111
|
(a) => {
|
|
112
|
-
var
|
|
113
|
-
const
|
|
114
|
-
|
|
112
|
+
var $;
|
|
113
|
+
const _ = a.path ?? (($ = a.composedPath) == null ? void 0 : $.call(a));
|
|
114
|
+
_ && [S, y, f].some((le) => _.includes(le)) && O();
|
|
115
115
|
},
|
|
116
|
-
[
|
|
117
|
-
),
|
|
118
|
-
onMouseOver: (a) =>
|
|
119
|
-
onMouseLeave:
|
|
116
|
+
[O, S, y, f]
|
|
117
|
+
), se = {
|
|
118
|
+
onMouseOver: (a) => F(a.nativeEvent),
|
|
119
|
+
onMouseLeave: N,
|
|
120
120
|
onFocus: () => o(!0),
|
|
121
121
|
onBlur: (a) => {
|
|
122
|
-
|
|
122
|
+
f != null && f.contains(a.relatedTarget) || o(!1);
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
-
return
|
|
126
|
-
o(
|
|
127
|
-
}, [
|
|
128
|
-
typeof
|
|
129
|
-
}, [
|
|
125
|
+
return me(() => {
|
|
126
|
+
o(M);
|
|
127
|
+
}, [M]), ie(() => {
|
|
128
|
+
typeof w.update == "function" && v && w.update();
|
|
129
|
+
}, [v]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...se, ref: ee }, T && x(T, {
|
|
130
130
|
ref: Z,
|
|
131
|
-
"aria-describedby":
|
|
131
|
+
"aria-describedby": z,
|
|
132
|
+
"aria-disabled": !!(g || E)
|
|
132
133
|
})), /* @__PURE__ */ t.createElement(
|
|
133
134
|
"div",
|
|
134
135
|
{
|
|
135
136
|
ref: U,
|
|
137
|
+
"aria-hidden": !!(g || E),
|
|
136
138
|
className: n([
|
|
137
|
-
"tw-popper-container tw-inline-block tw-max-w-[200px] tw-
|
|
138
|
-
(
|
|
139
|
-
!
|
|
139
|
+
"tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]",
|
|
140
|
+
(g || E) && "tw-hidden",
|
|
141
|
+
!v && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
|
|
140
142
|
]),
|
|
141
143
|
"data-test-id": "tooltip",
|
|
142
144
|
role: "tooltip",
|
|
143
|
-
id:
|
|
144
|
-
style:
|
|
145
|
-
...
|
|
145
|
+
id: z,
|
|
146
|
+
style: w.styles.popper,
|
|
147
|
+
...w.attributes.popper,
|
|
146
148
|
onFocus: () => o(!0),
|
|
147
|
-
onMouseOver: (a) =>
|
|
148
|
-
onMouseLeave:
|
|
149
|
+
onMouseOver: (a) => F(a.nativeEvent),
|
|
150
|
+
onMouseLeave: N
|
|
149
151
|
},
|
|
150
152
|
d && /* @__PURE__ */ t.createElement(de, { headerStyle: d }),
|
|
151
153
|
/* @__PURE__ */ t.createElement(
|
|
152
154
|
"div",
|
|
153
155
|
{
|
|
154
156
|
className: n([
|
|
155
|
-
"tw-px-4 tw-
|
|
156
|
-
P ?
|
|
157
|
-
|
|
157
|
+
"tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]",
|
|
158
|
+
P ? J.small : J.large,
|
|
159
|
+
i ? K.small : K.large
|
|
158
160
|
])
|
|
159
161
|
},
|
|
160
|
-
|
|
161
|
-
/* @__PURE__ */ t.createElement("div", { className: "tw-flex" },
|
|
162
|
-
|
|
162
|
+
l && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, p && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, x(p, { size: V.Size20 })), l),
|
|
163
|
+
/* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, s && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, x(s, { size: V.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
|
|
164
|
+
i && /* @__PURE__ */ t.createElement(
|
|
163
165
|
"a",
|
|
164
166
|
{
|
|
165
167
|
...A,
|
|
166
168
|
"data-test-id": "tooltip-link",
|
|
167
|
-
ref:
|
|
168
|
-
href:
|
|
169
|
+
ref: R,
|
|
170
|
+
href: i,
|
|
169
171
|
target: "_blank",
|
|
170
172
|
rel: "noopener noreferrer",
|
|
171
|
-
className: n([
|
|
172
|
-
"tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
|
|
173
|
-
we
|
|
174
|
-
]),
|
|
173
|
+
className: n(["tw-text-xs tw-text-black-40 tw-underline tw-mt-1", fe]),
|
|
175
174
|
onBlur: () => r && r.length > 0 ? null : o(!1)
|
|
176
175
|
},
|
|
177
|
-
|
|
176
|
+
Q ?? "Click here to learn more."
|
|
178
177
|
),
|
|
179
178
|
r && /* @__PURE__ */ t.createElement("div", { className: "tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4" }, r.length > 0 && /* @__PURE__ */ t.createElement("div", { onBlur: () => r && r.length < 2 ? o(!1) : null }, /* @__PURE__ */ t.createElement(
|
|
180
|
-
|
|
179
|
+
j,
|
|
181
180
|
{
|
|
182
|
-
style:
|
|
183
|
-
emphasis:
|
|
184
|
-
size:
|
|
181
|
+
style: q.Default,
|
|
182
|
+
emphasis: D.Strong,
|
|
183
|
+
size: G.Small,
|
|
185
184
|
onClick: r[0].action
|
|
186
185
|
},
|
|
187
186
|
r[0].label
|
|
188
187
|
)), r.length === 2 && /* @__PURE__ */ t.createElement("div", { onBlur: () => o(!1) }, /* @__PURE__ */ t.createElement(
|
|
189
|
-
|
|
188
|
+
j,
|
|
190
189
|
{
|
|
191
|
-
style:
|
|
192
|
-
emphasis:
|
|
193
|
-
size:
|
|
190
|
+
style: q.Default,
|
|
191
|
+
emphasis: D.Default,
|
|
192
|
+
size: G.Small,
|
|
194
193
|
onClick: r[1].action
|
|
195
194
|
},
|
|
196
195
|
r[1].label
|
|
@@ -202,14 +201,14 @@ const ge = {
|
|
|
202
201
|
"data-test-id": "popover-arrow",
|
|
203
202
|
"data-popper-arrow": u,
|
|
204
203
|
ref: re,
|
|
205
|
-
style:
|
|
204
|
+
style: w.styles.arrow,
|
|
206
205
|
className: n([
|
|
207
206
|
u && "tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
|
|
208
207
|
u && ae
|
|
209
208
|
])
|
|
210
209
|
}
|
|
211
210
|
)),
|
|
212
|
-
|
|
211
|
+
W
|
|
213
212
|
));
|
|
214
213
|
};
|
|
215
214
|
Se.displayName = "FondueTooltip";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n FocusEvent,\n HTMLAttributes,\n PropsWithChildren,\n ReactChild,\n ReactElement,\n ReactNode,\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n children?: ReactChild;\n position?: TooltipPosition;\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n small: 'tw-pt-3.5',\n large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-3.5',\n large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n Top = 'Top',\n Right = 'Right',\n Bottom = 'Bottom',\n Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n ['Left-Start']: 'left-start',\n ['Left-End']: 'left-end',\n ['Right-Start']: 'right-start',\n ['Right-End']: 'right-end',\n ['Top-Middle']: 'top',\n ['Right-Middle']: 'right',\n ['Bottom-Middle']: 'bottom',\n ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n }\n};\n\nexport const Tooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n hidden = false,\n}: TooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n null,\n );\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const { linkProps } = useLink({}, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl || brightHeader || buttons || heading || headingIcon,\n [linkUrl, brightHeader, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const [isOpen, setIsOpen] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event) => {\n const hoveredElement = event.path ?? event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n );\n\n const triggerProps: HTMLAttributes<HTMLElement> = {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: (event: FocusEvent) => {\n if (!tooltipContainerRef?.contains(event.relatedTarget)) {\n setIsOpen(false);\n }\n },\n };\n\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n return (\n <>\n <div {...triggerProps} ref={setTriggerElementContainerRef}>\n {triggerElement &&\n cloneElement(triggerElement, {\n ref: setTriggerElementRef,\n 'aria-describedby': id,\n })}\n </div>\n <div\n ref={setTooltipContainerRef}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]',\n (hidden || disabled) && 'tw-hidden',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n ])}\n data-test-id=\"tooltip\"\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n onFocus={() => setIsOpen(true)}\n onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n onMouseLeave={handleHideTooltipOnHover}\n >\n {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n <div\n className={merge([\n 'tw-px-4 tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n linkUrl ? paddingsBottom.small : paddingsBottom.large,\n ])}\n >\n {heading && (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n )}\n <div className=\"tw-flex\">\n {tooltipIcon && (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n )}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl && (\n <a\n {...linkProps}\n data-test-id=\"tooltip-link\"\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge([\n 'tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1',\n FOCUS_VISIBLE_STYLE,\n ])}\n onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n )}\n {buttons && (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <div onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n >\n {buttons[0].label}\n </Button>\n </div>\n )}\n {buttons.length === 2 && (\n <div onBlur={() => setIsOpen(false)}>\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n >\n {buttons[1].label}\n </Button>\n </div>\n )}\n </div>\n )}\n </div>\n {/**\n * This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n withArrow && arrowStyling,\n ])}\n />\n </div>\n {children}\n </div>\n </>\n );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","triggerProps","useEffect","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n FocusEvent,\n HTMLAttributes,\n PropsWithChildren,\n ReactChild,\n ReactElement,\n ReactNode,\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n children?: ReactChild;\n position?: TooltipPosition;\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n small: 'tw-pt-3.5',\n large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-3.5',\n large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n Top = 'Top',\n Right = 'Right',\n Bottom = 'Bottom',\n Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n ['Left-Start']: 'left-start',\n ['Left-End']: 'left-end',\n ['Right-Start']: 'right-start',\n ['Right-End']: 'right-end',\n ['Top-Middle']: 'top',\n ['Right-Middle']: 'right',\n ['Bottom-Middle']: 'bottom',\n ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n }\n};\n\nexport const Tooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n hidden = false,\n}: TooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n null,\n );\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const { linkProps } = useLink({}, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl || brightHeader || buttons || heading || headingIcon,\n [linkUrl, brightHeader, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const [isOpen, setIsOpen] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event) => {\n const hoveredElement = event.path ?? event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n );\n\n const triggerProps: HTMLAttributes<HTMLElement> = {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: (event: FocusEvent) => {\n if (!tooltipContainerRef?.contains(event.relatedTarget)) {\n setIsOpen(false);\n }\n },\n };\n\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n return (\n <>\n <div {...triggerProps} ref={setTriggerElementContainerRef}>\n {triggerElement &&\n cloneElement(triggerElement, {\n ref: setTriggerElementRef,\n 'aria-describedby': id,\n 'aria-disabled': hidden || disabled ? true : false,\n })}\n </div>\n <div\n ref={setTooltipContainerRef}\n aria-hidden={hidden || disabled ? true : false}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n (hidden || disabled) && 'tw-hidden',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n ])}\n data-test-id=\"tooltip\"\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n onFocus={() => setIsOpen(true)}\n onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n onMouseLeave={handleHideTooltipOnHover}\n >\n {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n <div\n className={merge([\n 'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n linkUrl ? paddingsBottom.small : paddingsBottom.large,\n ])}\n >\n {heading && (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n )}\n <div className=\"tw-flex\">\n {tooltipIcon && (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n )}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl && (\n <a\n {...linkProps}\n data-test-id=\"tooltip-link\"\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n )}\n {buttons && (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <div onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n >\n {buttons[0].label}\n </Button>\n </div>\n )}\n {buttons.length === 2 && (\n <div onBlur={() => setIsOpen(false)}>\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n >\n {buttons[1].label}\n </Button>\n </div>\n )}\n </div>\n )}\n </div>\n {/**\n * This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n withArrow && arrowStyling,\n ])}\n />\n </div>\n {children}\n </div>\n </>\n );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","triggerProps","useEffect","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
|