@stenajs-webui/tooltip 20.17.4 → 21.0.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/dist/components/popover/ControlledPopover.d.ts +14 -0
- package/dist/components/popover/Popover.d.ts +16 -8
- package/dist/components/tooltip/Tooltip.d.ts +7 -4
- package/dist/index.d.ts +1 -3
- package/dist/index.es.js +265 -137
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/types/Placement.d.ts +4 -0
- package/package.json +7 -8
- package/dist/components/button-with-popover/ButtonWithPopover.d.ts +0 -10
- package/dist/hooks/UseLazyPopover.d.ts +0 -10
- package/dist/hooks/UsePopoverVisibility.d.ts +0 -5
- package/dist/hooks/UseTippyInstance.d.ts +0 -11
- package/dist/types.d.ts +0 -2
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropsWithChildren, ReactNode } from "react";
|
|
3
|
+
import { Placement } from "../../types/Placement";
|
|
4
|
+
export interface ControlledPopoverProps extends PropsWithChildren {
|
|
5
|
+
open: boolean;
|
|
6
|
+
renderTrigger: (props: Record<string, unknown>) => ReactNode;
|
|
7
|
+
onRequestClose: () => void;
|
|
8
|
+
placement?: Placement;
|
|
9
|
+
hideArrow?: boolean;
|
|
10
|
+
disablePadding?: boolean;
|
|
11
|
+
restoreFocus?: boolean;
|
|
12
|
+
returnFocus?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const ControlledPopover: React.FC<ControlledPopoverProps>;
|
|
@@ -1,16 +1,24 @@
|
|
|
1
|
-
import { TippyProps as TippyComponentProps } from "@tippyjs/react";
|
|
2
1
|
import * as React from "react";
|
|
3
|
-
import {
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import { Placement } from "../../types/Placement";
|
|
4
4
|
export type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
|
|
5
5
|
export type PopoverTheme = "light" | "dark";
|
|
6
|
-
export
|
|
7
|
-
|
|
6
|
+
export type PopoverTrigger = "click" | "hover" | "focus";
|
|
7
|
+
export type PopoverChildren = ReactNode | ((args: PopoverChildrenArgs) => ReactNode);
|
|
8
|
+
export interface PopoverChildrenArgs {
|
|
9
|
+
onRequestClose: () => void;
|
|
10
|
+
}
|
|
11
|
+
type TriggerProp = PopoverTrigger | Array<PopoverTrigger>;
|
|
12
|
+
export interface PopoverProps {
|
|
13
|
+
children?: PopoverChildren;
|
|
14
|
+
onRequestClose?: () => void;
|
|
15
|
+
placement?: Placement;
|
|
16
|
+
trigger?: TriggerProp;
|
|
17
|
+
hideArrow?: boolean;
|
|
8
18
|
disablePadding?: boolean;
|
|
9
|
-
lazy?: boolean;
|
|
10
19
|
variant?: PopoverVariant;
|
|
11
20
|
theme?: PopoverTheme;
|
|
21
|
+
renderTrigger: (props: Record<string, unknown>) => ReactNode;
|
|
12
22
|
}
|
|
13
|
-
export declare const tippyStyles: {
|
|
14
|
-
noPadding: string;
|
|
15
|
-
};
|
|
16
23
|
export declare const Popover: React.FC<PopoverProps>;
|
|
24
|
+
export {};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export interface TooltipProps extends
|
|
2
|
+
import { CSSProperties, PropsWithChildren } from "react";
|
|
3
|
+
import { Placement } from "../../types/Placement";
|
|
4
|
+
export interface TooltipProps extends PropsWithChildren {
|
|
5
|
+
placement?: Placement;
|
|
6
|
+
visible?: boolean;
|
|
5
7
|
label: string;
|
|
6
8
|
variant?: TooltipVariant;
|
|
7
|
-
|
|
9
|
+
maxWidth?: CSSProperties["maxWidth"];
|
|
8
10
|
}
|
|
11
|
+
type TooltipVariant = "info" | "warning" | "error";
|
|
9
12
|
export declare const Tooltip: React.FC<TooltipProps>;
|
|
10
13
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export * from "./components/popover/ActionPrompt";
|
|
2
|
+
export * from "./components/popover/ControlledPopover";
|
|
2
3
|
export * from "./components/popover/Popover";
|
|
3
|
-
export * from "./components/button-with-popover/ButtonWithPopover";
|
|
4
4
|
export * from "./components/tooltip/Tooltip";
|
|
5
|
-
export * from "./hooks/UseTippyInstance";
|
|
6
|
-
export * from "./types";
|
package/dist/index.es.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Column as
|
|
4
|
-
import { FlatButton as
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import { cssColor as
|
|
9
|
-
const
|
|
10
|
-
text:
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("._floating_1glwr_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_1glwr_1._disablePadding_1glwr_11{padding:0}._iconWrapper_1glwr_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_1glwr_16 svg{color:var(--current-icon-color)}._iconWrapper_1glwr_16._info_1glwr_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--lhds-color-blue-100);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_1glwr_16._warning_1glwr_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--lhds-color-orange-100);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_1glwr_16._error_1glwr_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--lhds-color-red-100);--current-icon-color: var(--lhds-color-red-700)}._floating_15fk9_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:-moz-fit-content;width:fit-content}._floating_15fk9_1._withIcon_15fk9_10{padding:calc(var(--swui-metrics-spacing) * .5);padding-right:calc(var(--swui-metrics-indent) * 2)}._iconWrapper_15fk9_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_15fk9_16 svg{color:var(--current-icon-color)}._iconWrapper_15fk9_16._info_15fk9_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--lhds-color-blue-100);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_15fk9_16._warning_15fk9_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--lhds-color-orange-100);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_15fk9_16._error_15fk9_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--lhds-color-red-100);--current-icon-color: var(--lhds-color-red-700)}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
2
|
+
import { jsxs as s, jsx as e, Fragment as R } from "react/jsx-runtime";
|
|
3
|
+
import { Column as ee, Text as Y, Space as x, Row as j } from "@stenajs-webui/core";
|
|
4
|
+
import { FlatButton as ne, PrimaryButton as oe, Spinner as te, Icon as ie, stenaInfoCircle as se, stenaExclamationCircle as le, stenaExclamationTriangle as re } from "@stenajs-webui/elements";
|
|
5
|
+
import { useRef as O, useCallback as q, useState as J } from "react";
|
|
6
|
+
import { useFloating as A, offset as S, flip as T, shift as $, arrow as k, autoUpdate as H, useTransitionStyles as E, useDismiss as K, useRole as L, useInteractions as M, FloatingPortal as G, FloatingFocusManager as Q, FloatingArrow as N, useFocus as ce, useClick as ae, useHover as V, safePolygon as de } from "@floating-ui/react";
|
|
7
|
+
import I from "classnames";
|
|
8
|
+
import { cssColor as fe } from "@stenajs-webui/theme";
|
|
9
|
+
const Ge = ({
|
|
10
|
+
text: n = "Are you sure?",
|
|
11
11
|
yesLabel: t = "Yes",
|
|
12
|
-
noLabel:
|
|
13
|
-
onNo:
|
|
14
|
-
onYes:
|
|
15
|
-
loading:
|
|
16
|
-
}) => /* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
-
/* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
/* @__PURE__ */
|
|
12
|
+
noLabel: l = "No",
|
|
13
|
+
onNo: c,
|
|
14
|
+
onYes: i,
|
|
15
|
+
loading: a
|
|
16
|
+
}) => /* @__PURE__ */ s(ee, { position: "relative", children: [
|
|
17
|
+
/* @__PURE__ */ s("div", { style: { opacity: a ? 0 : 1 }, children: [
|
|
18
|
+
/* @__PURE__ */ e(Y, { children: n }),
|
|
19
|
+
/* @__PURE__ */ e(x, {}),
|
|
20
|
+
/* @__PURE__ */ s(j, { justifyContent: "flex-end", alignItems: "center", children: [
|
|
21
|
+
/* @__PURE__ */ e(ne, { label: l, onClick: c }),
|
|
22
|
+
/* @__PURE__ */ e(x, {}),
|
|
23
|
+
/* @__PURE__ */ e(oe, { label: t, onClick: i })
|
|
24
24
|
] })
|
|
25
25
|
] }),
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
a && /* @__PURE__ */ e(
|
|
27
|
+
j,
|
|
28
28
|
{
|
|
29
29
|
justifyContent: "center",
|
|
30
30
|
alignItems: "center",
|
|
@@ -33,126 +33,254 @@ const sn = ({
|
|
|
33
33
|
width: "100%",
|
|
34
34
|
height: "100%",
|
|
35
35
|
position: "absolute",
|
|
36
|
-
children: /* @__PURE__ */
|
|
36
|
+
children: /* @__PURE__ */ e(te, { size: "small" })
|
|
37
37
|
}
|
|
38
38
|
)
|
|
39
|
-
] }),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
noPadding: L.noPadding
|
|
57
|
-
}, u = {
|
|
58
|
-
standard: "light",
|
|
59
|
-
info: "info",
|
|
60
|
-
warning: "warning",
|
|
61
|
-
error: "error",
|
|
62
|
-
outlined: "outlined"
|
|
63
|
-
}, _ = ({
|
|
64
|
-
visible: o,
|
|
65
|
-
trigger: t = "mouseenter",
|
|
66
|
-
children: i,
|
|
67
|
-
tippyRef: r,
|
|
68
|
-
delay: l = 0,
|
|
69
|
-
variant: e = "standard",
|
|
70
|
-
disablePadding: d,
|
|
71
|
-
content: y,
|
|
72
|
-
maxWidth: w = "500px",
|
|
73
|
-
plugins: P,
|
|
74
|
-
lazy: x,
|
|
75
|
-
arrow: v = !0,
|
|
76
|
-
theme: I = "light",
|
|
77
|
-
...C
|
|
39
|
+
] }), pe = "_floating_1glwr_1", ge = "_disablePadding_1glwr_11", he = "_iconWrapper_1glwr_16", me = "_info_1glwr_36", ue = "_warning_1glwr_42", _e = "_error_1glwr_48", w = {
|
|
40
|
+
floating: pe,
|
|
41
|
+
disablePadding: ge,
|
|
42
|
+
iconWrapper: he,
|
|
43
|
+
info: me,
|
|
44
|
+
warning: ue,
|
|
45
|
+
error: _e
|
|
46
|
+
}, we = 12, D = 8, ye = 2, Ne = ({
|
|
47
|
+
children: n,
|
|
48
|
+
placement: t = "bottom",
|
|
49
|
+
hideArrow: l,
|
|
50
|
+
renderTrigger: c,
|
|
51
|
+
disablePadding: i,
|
|
52
|
+
open: a,
|
|
53
|
+
onRequestClose: g,
|
|
54
|
+
restoreFocus: m,
|
|
55
|
+
returnFocus: p
|
|
78
56
|
}) => {
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
57
|
+
const d = O(null), h = q(
|
|
58
|
+
(b) => {
|
|
59
|
+
b || g();
|
|
60
|
+
},
|
|
61
|
+
[g]
|
|
62
|
+
), { refs: f, floatingStyles: o, context: r } = A({
|
|
63
|
+
open: a,
|
|
64
|
+
onOpenChange: h,
|
|
65
|
+
placement: t,
|
|
66
|
+
middleware: [
|
|
67
|
+
S(D + ye),
|
|
68
|
+
T({ padding: 5 }),
|
|
69
|
+
$({ padding: 5 }),
|
|
70
|
+
k({ element: d })
|
|
71
|
+
],
|
|
72
|
+
whileElementsMounted: H
|
|
73
|
+
}), { isMounted: u, styles: _ } = E(r, {
|
|
74
|
+
initial: {
|
|
75
|
+
opacity: 0
|
|
95
76
|
}
|
|
96
|
-
)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
77
|
+
}), P = K(r), v = L(r), { getReferenceProps: W, getFloatingProps: C } = M([
|
|
78
|
+
P,
|
|
79
|
+
v
|
|
80
|
+
]);
|
|
81
|
+
return /* @__PURE__ */ s(R, { children: [
|
|
82
|
+
c({ ref: f.setReference, ...W() }),
|
|
83
|
+
u && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
|
|
84
|
+
Q,
|
|
85
|
+
{
|
|
86
|
+
context: r,
|
|
87
|
+
modal: !1,
|
|
88
|
+
restoreFocus: m,
|
|
89
|
+
returnFocus: p,
|
|
90
|
+
children: /* @__PURE__ */ e(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
ref: f.setFloating,
|
|
94
|
+
style: o,
|
|
95
|
+
...C,
|
|
96
|
+
children: /* @__PURE__ */ s(
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
style: _,
|
|
100
|
+
className: I(
|
|
101
|
+
w.floating,
|
|
102
|
+
i && w.disablePadding
|
|
103
|
+
),
|
|
104
|
+
children: [
|
|
105
|
+
n,
|
|
106
|
+
!l && /* @__PURE__ */ e(
|
|
107
|
+
N,
|
|
108
|
+
{
|
|
109
|
+
ref: d,
|
|
110
|
+
context: r,
|
|
111
|
+
width: we,
|
|
112
|
+
height: D,
|
|
113
|
+
fill: "white"
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
) })
|
|
123
|
+
] });
|
|
124
|
+
}, Re = 12, z = 8, Ie = 2, je = ({
|
|
125
|
+
children: n,
|
|
125
126
|
variant: t,
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
trigger: l = "hover",
|
|
128
|
+
placement: c = "bottom",
|
|
129
|
+
hideArrow: i,
|
|
130
|
+
renderTrigger: a,
|
|
131
|
+
disablePadding: g
|
|
132
|
+
}) => {
|
|
133
|
+
const [m, p] = J(!1), d = O(null), { refs: h, floatingStyles: f, context: o } = A({
|
|
134
|
+
open: m,
|
|
135
|
+
onOpenChange: p,
|
|
136
|
+
placement: c,
|
|
137
|
+
middleware: [
|
|
138
|
+
S(z + Ie),
|
|
139
|
+
T({ padding: 5 }),
|
|
140
|
+
$({ padding: 5 }),
|
|
141
|
+
k({ element: d })
|
|
142
|
+
],
|
|
143
|
+
whileElementsMounted: H
|
|
144
|
+
}), { isMounted: r, styles: u } = E(o, {
|
|
145
|
+
initial: {
|
|
146
|
+
opacity: 0
|
|
147
|
+
}
|
|
148
|
+
}), _ = q(() => {
|
|
149
|
+
p(!1);
|
|
150
|
+
}, []), P = K(o), v = L(o), W = ce(o, { enabled: F(l, "focus") }), C = ae(o, { enabled: F(l, "click") }), b = V(o, {
|
|
151
|
+
enabled: F(l, "hover"),
|
|
152
|
+
handleClose: de(),
|
|
153
|
+
restMs: 100
|
|
154
|
+
}), { getReferenceProps: X, getFloatingProps: Z } = M([
|
|
155
|
+
W,
|
|
156
|
+
C,
|
|
157
|
+
b,
|
|
158
|
+
P,
|
|
159
|
+
v
|
|
160
|
+
]);
|
|
161
|
+
return /* @__PURE__ */ s(R, { children: [
|
|
162
|
+
a({ ref: h.setReference, ...X() }),
|
|
163
|
+
r && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(Q, { context: o, modal: !1, children: /* @__PURE__ */ e(
|
|
164
|
+
"div",
|
|
165
|
+
{
|
|
166
|
+
ref: h.setFloating,
|
|
167
|
+
style: f,
|
|
168
|
+
...Z,
|
|
169
|
+
children: /* @__PURE__ */ s(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
style: u,
|
|
173
|
+
className: I(
|
|
174
|
+
w.floating,
|
|
175
|
+
g && w.disablePadding,
|
|
176
|
+
t && w.withIcon
|
|
177
|
+
),
|
|
178
|
+
children: [
|
|
179
|
+
typeof n == "function" ? n({ onRequestClose: _ }) : n,
|
|
180
|
+
!i && /* @__PURE__ */ e(
|
|
181
|
+
N,
|
|
182
|
+
{
|
|
183
|
+
ref: d,
|
|
184
|
+
context: o,
|
|
185
|
+
width: Re,
|
|
186
|
+
height: z,
|
|
187
|
+
fill: "white"
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
}
|
|
194
|
+
) }) })
|
|
195
|
+
] });
|
|
196
|
+
}, F = (n, t) => typeof n == "string" ? n === t : n.includes(t), Pe = "_floating_15fk9_1", ve = "_withIcon_15fk9_10", We = "_iconWrapper_15fk9_16", Ce = "_info_15fk9_36", be = "_warning_15fk9_42", Fe = "_error_15fk9_48", y = {
|
|
197
|
+
floating: Pe,
|
|
198
|
+
withIcon: ve,
|
|
199
|
+
iconWrapper: We,
|
|
200
|
+
info: Ce,
|
|
201
|
+
warning: be,
|
|
202
|
+
error: Fe
|
|
203
|
+
}, xe = {
|
|
204
|
+
info: se,
|
|
205
|
+
warning: le,
|
|
206
|
+
error: re
|
|
207
|
+
}, Oe = 12, B = 8, Ae = 2, De = ({
|
|
208
|
+
children: n,
|
|
209
|
+
visible: t,
|
|
210
|
+
placement: l,
|
|
211
|
+
label: c,
|
|
212
|
+
variant: i,
|
|
213
|
+
maxWidth: a = "500px"
|
|
214
|
+
}) => {
|
|
215
|
+
const [g, m] = J(!1), p = O(null), { refs: d, floatingStyles: h, context: f } = A({
|
|
216
|
+
placement: l,
|
|
217
|
+
open: t ?? g,
|
|
218
|
+
onOpenChange: m,
|
|
219
|
+
middleware: [
|
|
220
|
+
S(B + Ae),
|
|
221
|
+
T({ padding: 5 }),
|
|
222
|
+
$({ padding: 5 }),
|
|
223
|
+
k({ element: p })
|
|
224
|
+
],
|
|
225
|
+
whileElementsMounted: H
|
|
226
|
+
}), { isMounted: o, styles: r } = E(f, {
|
|
227
|
+
initial: {
|
|
228
|
+
opacity: 0
|
|
229
|
+
}
|
|
230
|
+
}), u = V(f), { getReferenceProps: _ } = M([u]);
|
|
231
|
+
return /* @__PURE__ */ s(R, { children: [
|
|
232
|
+
/* @__PURE__ */ e("div", { ref: d.setReference, ..._(), children: n }),
|
|
233
|
+
o && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("div", { ref: d.setFloating, style: h, children: /* @__PURE__ */ s(
|
|
234
|
+
"div",
|
|
235
|
+
{
|
|
236
|
+
style: { maxWidth: a, ...r },
|
|
237
|
+
className: I(
|
|
238
|
+
y.floating,
|
|
239
|
+
i && y.withIcon
|
|
240
|
+
),
|
|
241
|
+
children: [
|
|
242
|
+
i ? /* @__PURE__ */ s(R, { children: [
|
|
243
|
+
/* @__PURE__ */ e(
|
|
244
|
+
"div",
|
|
245
|
+
{
|
|
246
|
+
className: I(
|
|
247
|
+
y.iconWrapper,
|
|
248
|
+
y[i]
|
|
249
|
+
),
|
|
250
|
+
children: /* @__PURE__ */ e(ie, { icon: xe[i], size: 16 })
|
|
251
|
+
}
|
|
252
|
+
),
|
|
253
|
+
/* @__PURE__ */ e(x, {}),
|
|
254
|
+
/* @__PURE__ */ e(U, { label: c })
|
|
255
|
+
] }) : /* @__PURE__ */ e(U, { label: c }),
|
|
256
|
+
/* @__PURE__ */ e(
|
|
257
|
+
N,
|
|
258
|
+
{
|
|
259
|
+
ref: p,
|
|
260
|
+
context: f,
|
|
261
|
+
width: Oe,
|
|
262
|
+
height: B,
|
|
263
|
+
fill: "#333"
|
|
264
|
+
}
|
|
265
|
+
)
|
|
266
|
+
]
|
|
267
|
+
}
|
|
268
|
+
) }) })
|
|
269
|
+
] });
|
|
270
|
+
}, U = ({ label: n }) => /* @__PURE__ */ e(
|
|
271
|
+
Y,
|
|
130
272
|
{
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
/* @__PURE__ */ n(a, {}),
|
|
137
|
-
/* @__PURE__ */ n(g, { label: o })
|
|
138
|
-
] }) : /* @__PURE__ */ n(g, { label: o }) }),
|
|
139
|
-
children: i
|
|
273
|
+
color: fe("--lhds-color-ui-50"),
|
|
274
|
+
size: "small",
|
|
275
|
+
variant: "bold",
|
|
276
|
+
whiteSpace: "nowrap",
|
|
277
|
+
children: n
|
|
140
278
|
}
|
|
141
|
-
)
|
|
142
|
-
const o = M();
|
|
143
|
-
return [
|
|
144
|
-
(t) => {
|
|
145
|
-
o.current = (t == null ? void 0 : t._tippy) ?? void 0;
|
|
146
|
-
},
|
|
147
|
-
o
|
|
148
|
-
];
|
|
149
|
-
};
|
|
279
|
+
);
|
|
150
280
|
export {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
D as tippyStyles,
|
|
156
|
-
an as useTippyInstance
|
|
281
|
+
Ge as ActionPrompt,
|
|
282
|
+
Ne as ControlledPopover,
|
|
283
|
+
je as Popover,
|
|
284
|
+
De as Tooltip
|
|
157
285
|
};
|
|
158
286
|
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/components/popover/ActionPrompt.tsx","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport type PopoverTheme = \"light\" | \"dark\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n theme?: PopoverTheme;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n theme = \"light\",\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={`${theme} ${variantToTheme[variant] ?? variantToTheme.standard}`}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n {children && <div ref={tippyRef}>{children}</div>}\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text, Space } from \"@stenajs-webui/core\";\nimport {\n Icon,\n stenaExclamationCircle,\n stenaExclamationTriangle,\n stenaInfoCircle,\n} from \"@stenajs-webui/elements\";\nimport cx from \"classnames\";\nimport * as React from \"react\";\nimport styles from \"./Tooltip.module.css\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\ntype TooltipVariant = \"info\" | \"warning\" | \"error\";\n\nconst variantIcons = {\n info: stenaInfoCircle,\n warning: stenaExclamationCircle,\n error: stenaExclamationTriangle,\n};\n\nexport interface TooltipProps extends Omit<PopoverProps, \"theme\" | \"render\"> {\n label: string;\n variant?: TooltipVariant;\n children: JSX.Element;\n}\n\nconst TooltipText: React.FC<{ label: string }> = ({ label }) => (\n <Text color={cssColor(\"--lhds-color-ui-50\")} size={\"small\"} variant=\"bold\">\n {label}\n </Text>\n);\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n label,\n variant,\n children,\n ...popoverProps\n}) => (\n <Popover\n theme=\"dark\"\n {...popoverProps}\n disablePadding\n content={\n <div className={cx(styles.tooltip, variant ? styles.withIcon : null)}>\n {variant ? (\n <>\n <div className={cx(styles.iconWrapper, styles[variant])}>\n <Icon icon={variantIcons[variant]} size={16} />\n </div>\n <Space />\n <TooltipText label={label} />\n </>\n ) : (\n <TooltipText label={label} />\n )}\n </div>\n }\n >\n {children}\n </Popover>\n);\n","import { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","jsxs","Column","jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useLazyPopover","plugins","mounted","setMounted","useState","useMemo","tippyStyles","styles","variantToTheme","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","propsPlugins","lazy","arrow","theme","tippyProps","TippyComponent","Box","ButtonWithPopover","onShow","onHide","buttonProps","variantIcons","stenaInfoCircle","stenaExclamationCircle","stenaExclamationTriangle","TooltipText","label","cssColor","Tooltip","popoverProps","cx","Fragment","Icon","useTippyInstance","useRef","element"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/components/popover/ActionPrompt.tsx","../src/components/popover/ControlledPopover.tsx","../src/components/popover/Popover.tsx","../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","import * as React from \"react\";\nimport { PropsWithChildren, ReactNode, useCallback, useRef } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport cx from \"classnames\";\nimport moduleStyles from \"./Popover.module.css\";\nimport { Placement } from \"../../types/Placement\";\n\nexport interface ControlledPopoverProps extends PropsWithChildren {\n open: boolean;\n renderTrigger: (props: Record<string, unknown>) => ReactNode;\n onRequestClose: () => void;\n placement?: Placement;\n hideArrow?: boolean;\n disablePadding?: boolean;\n restoreFocus?: boolean;\n returnFocus?: boolean;\n}\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const ControlledPopover: React.FC<ControlledPopoverProps> = ({\n children,\n placement = \"bottom\",\n hideArrow,\n renderTrigger,\n disablePadding,\n open,\n onRequestClose,\n restoreFocus,\n returnFocus,\n}) => {\n const arrowRef = useRef(null);\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n if (!open) {\n onRequestClose();\n }\n },\n [onRequestClose]\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange,\n placement,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n dismiss,\n role,\n ]);\n\n return (\n <>\n {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}\n\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n restoreFocus={restoreFocus}\n returnFocus={returnFocus}\n >\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps}\n >\n <div\n style={transitionStyles}\n className={cx(\n moduleStyles.floating,\n disablePadding && moduleStyles.disablePadding\n )}\n >\n {children}\n {!hideArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"white\"}\n />\n )}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n","import * as React from \"react\";\nimport { ReactNode, useCallback, useRef, useState } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport cx from \"classnames\";\nimport moduleStyles from \"./Popover.module.css\";\nimport { Placement } from \"../../types/Placement\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport type PopoverTheme = \"light\" | \"dark\";\nexport type PopoverTrigger = \"click\" | \"hover\" | \"focus\";\n\nexport type PopoverChildren =\n | ReactNode\n | ((args: PopoverChildrenArgs) => ReactNode);\n\nexport interface PopoverChildrenArgs {\n onRequestClose: () => void;\n}\n\ntype TriggerProp = PopoverTrigger | Array<PopoverTrigger>;\n\nexport interface PopoverProps {\n children?: PopoverChildren;\n onRequestClose?: () => void;\n placement?: Placement;\n trigger?: TriggerProp;\n hideArrow?: boolean;\n disablePadding?: boolean;\n variant?: PopoverVariant;\n theme?: PopoverTheme;\n renderTrigger: (props: Record<string, unknown>) => ReactNode;\n}\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n variant,\n trigger = \"hover\",\n placement = \"bottom\",\n hideArrow,\n renderTrigger,\n disablePadding,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const arrowRef = useRef(null);\n\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: setIsOpen,\n placement,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const onRequestClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const onFocus = useFocus(context, { enabled: hasTrigger(trigger, \"focus\") });\n const onClick = useClick(context, { enabled: hasTrigger(trigger, \"click\") });\n const onHover = useHover(context, {\n enabled: hasTrigger(trigger, \"hover\"),\n handleClose: safePolygon(),\n restMs: 100,\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n onFocus,\n onClick,\n onHover,\n dismiss,\n role,\n ]);\n\n return (\n <>\n {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}\n\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps}\n >\n <div\n style={transitionStyles}\n className={cx(\n moduleStyles.floating,\n disablePadding && moduleStyles.disablePadding,\n variant && moduleStyles.withIcon\n )}\n >\n {typeof children === \"function\"\n ? children({ onRequestClose })\n : children}\n {!hideArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"white\"}\n />\n )}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n\nconst hasTrigger = (\n triggerProp: TriggerProp,\n triggerToCheck: PopoverTrigger\n): boolean => {\n if (typeof triggerProp === \"string\") {\n return triggerProp === triggerToCheck;\n }\n return triggerProp.includes(triggerToCheck);\n};\n","import { Space, Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { CSSProperties, PropsWithChildren, useRef, useState } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingPortal,\n offset,\n shift,\n useFloating,\n useHover,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport moduleStyles from \"./Tooltip.module.css\";\nimport { cssColor } from \"@stenajs-webui/theme\";\nimport cx from \"classnames\";\nimport {\n Icon,\n stenaExclamationCircle,\n stenaExclamationTriangle,\n stenaInfoCircle,\n} from \"@stenajs-webui/elements\";\nimport { Placement } from \"../../types/Placement\";\n\nexport interface TooltipProps extends PropsWithChildren {\n placement?: Placement;\n visible?: boolean;\n label: string;\n variant?: TooltipVariant;\n maxWidth?: CSSProperties[\"maxWidth\"];\n}\n\ntype TooltipVariant = \"info\" | \"warning\" | \"error\";\n\nconst variantIcons = {\n info: stenaInfoCircle,\n warning: stenaExclamationCircle,\n error: stenaExclamationTriangle,\n};\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n children,\n visible,\n placement,\n label,\n variant,\n maxWidth = \"500px\",\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const arrowRef = useRef(null);\n\n const { refs, floatingStyles, context } = useFloating({\n placement: placement,\n open: visible ?? isOpen,\n onOpenChange: setIsOpen,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const hover = useHover(context);\n\n const { getReferenceProps } = useInteractions([hover]);\n\n return (\n <>\n <div ref={refs.setReference} {...getReferenceProps()}>\n {children}\n </div>\n\n {isMounted && (\n <FloatingPortal>\n <div ref={refs.setFloating} style={floatingStyles}>\n <div\n style={{ maxWidth, ...styles }}\n className={cx(\n moduleStyles.floating,\n variant && moduleStyles.withIcon\n )}\n >\n {variant ? (\n <>\n <div\n className={cx(\n moduleStyles.iconWrapper,\n moduleStyles[variant]\n )}\n >\n <Icon icon={variantIcons[variant]} size={16} />\n </div>\n <Space />\n <TooltipText label={label} />\n </>\n ) : (\n <TooltipText label={label} />\n )}\n\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"#333\"}\n />\n </div>\n </div>\n </FloatingPortal>\n )}\n </>\n );\n};\n\nconst TooltipText: React.FC<{ label: string }> = ({ label }) => (\n <Text\n color={cssColor(\"--lhds-color-ui-50\")}\n size={\"small\"}\n variant={\"bold\"}\n whiteSpace={\"nowrap\"}\n >\n {label}\n </Text>\n);\n"],"names":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","jsxs","Column","jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","ARROW_WIDTH","ARROW_HEIGHT","GAP","ControlledPopover","children","placement","hideArrow","renderTrigger","disablePadding","open","onRequestClose","restoreFocus","returnFocus","arrowRef","useRef","onOpenChange","useCallback","refs","floatingStyles","context","useFloating","offset","flip","shift","arrow","autoUpdate","isMounted","transitionStyles","useTransitionStyles","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","Fragment","FloatingPortal","FloatingFocusManager","cx","moduleStyles","FloatingArrow","Popover","variant","trigger","isOpen","setIsOpen","useState","onFocus","useFocus","hasTrigger","onClick","useClick","onHover","useHover","safePolygon","triggerProp","triggerToCheck","variantIcons","stenaInfoCircle","stenaExclamationCircle","stenaExclamationTriangle","Tooltip","visible","label","maxWidth","styles","hover","Icon","TooltipText","cssColor"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("._floating_1glwr_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_1glwr_1._disablePadding_1glwr_11{padding:0}._iconWrapper_1glwr_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_1glwr_16 svg{color:var(--current-icon-color)}._iconWrapper_1glwr_16._info_1glwr_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--lhds-color-blue-100);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_1glwr_16._warning_1glwr_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--lhds-color-orange-100);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_1glwr_16._error_1glwr_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--lhds-color-red-100);--current-icon-color: var(--lhds-color-red-700)}._floating_15fk9_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:-moz-fit-content;width:fit-content}._floating_15fk9_1._withIcon_15fk9_10{padding:calc(var(--swui-metrics-spacing) * .5);padding-right:calc(var(--swui-metrics-indent) * 2)}._iconWrapper_15fk9_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_15fk9_16 svg{color:var(--current-icon-color)}._iconWrapper_15fk9_16._info_15fk9_36{--current-border-color: var(--lhds-color-blue-300);--current-bg-color: var(--lhds-color-blue-100);--current-icon-color: var(--lhds-color-blue-700)}._iconWrapper_15fk9_16._warning_15fk9_42{--current-border-color: var(--lhds-color-orange-300);--current-bg-color: var(--lhds-color-orange-100);--current-icon-color: var(--lhds-color-orange-700)}._iconWrapper_15fk9_16._error_15fk9_48{--current-border-color: var(--lhds-color-red-300);--current-bg-color: var(--lhds-color-red-100);--current-icon-color: var(--lhds-color-red-700)}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("@stenajs-webui/core"),p=require("@stenajs-webui/elements"),h=require("react"),e=require("@floating-ui/react"),F=require("classnames"),H=require("@stenajs-webui/theme"),M=({text:s="Are you sure?",yesLabel:o="Yes",noLabel:r="No",onNo:a,onYes:i,loading:c})=>n.jsxs(u.Column,{position:"relative",children:[n.jsxs("div",{style:{opacity:c?0:1},children:[n.jsx(u.Text,{children:s}),n.jsx(u.Space,{}),n.jsxs(u.Row,{justifyContent:"flex-end",alignItems:"center",children:[n.jsx(p.FlatButton,{label:r,onClick:a}),n.jsx(u.Space,{}),n.jsx(p.PrimaryButton,{label:o,onClick:i})]})]}),c&&n.jsx(u.Row,{justifyContent:"center",alignItems:"center",left:0,top:0,width:"100%",height:"100%",position:"absolute",children:n.jsx(p.Spinner,{size:"small"})})]}),E="_floating_1glwr_1",q="_disablePadding_1glwr_11",G="_iconWrapper_1glwr_16",D="_info_1glwr_36",N="_warning_1glwr_42",z="_error_1glwr_48",y={floating:E,disablePadding:q,iconWrapper:G,info:D,warning:N,error:z},U=12,T=8,B=2,Y=({children:s,placement:o="bottom",hideArrow:r,renderTrigger:a,disablePadding:i,open:c,onRequestClose:x,restoreFocus:_,returnFocus:g})=>{const d=h.useRef(null),w=h.useCallback(b=>{b||x()},[x]),{refs:f,floatingStyles:t,context:l}=e.useFloating({open:c,onOpenChange:w,placement:o,middleware:[e.offset(T+B),e.flip({padding:5}),e.shift({padding:5}),e.arrow({element:d})],whileElementsMounted:e.autoUpdate}),{isMounted:m,styles:j}=e.useTransitionStyles(l,{initial:{opacity:0}}),P=e.useDismiss(l),I=e.useRole(l),{getReferenceProps:v,getFloatingProps:S}=e.useInteractions([P,I]);return n.jsxs(n.Fragment,{children:[a({ref:f.setReference,...v()}),m&&n.jsx(e.FloatingPortal,{children:n.jsx(e.FloatingFocusManager,{context:l,modal:!1,restoreFocus:_,returnFocus:g,children:n.jsx("div",{ref:f.setFloating,style:t,...S,children:n.jsxs("div",{style:j,className:F(y.floating,i&&y.disablePadding),children:[s,!r&&n.jsx(e.FloatingArrow,{ref:d,context:l,width:U,height:T,fill:"white"})]})})})})]})},J=12,W=8,K=2,L=({children:s,variant:o,trigger:r="hover",placement:a="bottom",hideArrow:i,renderTrigger:c,disablePadding:x})=>{const[_,g]=h.useState(!1),d=h.useRef(null),{refs:w,floatingStyles:f,context:t}=e.useFloating({open:_,onOpenChange:g,placement:a,middleware:[e.offset(W+K),e.flip({padding:5}),e.shift({padding:5}),e.arrow({element:d})],whileElementsMounted:e.autoUpdate}),{isMounted:l,styles:m}=e.useTransitionStyles(t,{initial:{opacity:0}}),j=h.useCallback(()=>{g(!1)},[]),P=e.useDismiss(t),I=e.useRole(t),v=e.useFocus(t,{enabled:C(r,"focus")}),S=e.useClick(t,{enabled:C(r,"click")}),b=e.useHover(t,{enabled:C(r,"hover"),handleClose:e.safePolygon(),restMs:100}),{getReferenceProps:$,getFloatingProps:k}=e.useInteractions([v,S,b,P,I]);return n.jsxs(n.Fragment,{children:[c({ref:w.setReference,...$()}),l&&n.jsx(e.FloatingPortal,{children:n.jsx(e.FloatingFocusManager,{context:t,modal:!1,children:n.jsx("div",{ref:w.setFloating,style:f,...k,children:n.jsxs("div",{style:m,className:F(y.floating,x&&y.disablePadding,o&&y.withIcon),children:[typeof s=="function"?s({onRequestClose:j}):s,!i&&n.jsx(e.FloatingArrow,{ref:d,context:t,width:J,height:W,fill:"white"})]})})})})]})},C=(s,o)=>typeof s=="string"?s===o:s.includes(o),Q="_floating_15fk9_1",V="_withIcon_15fk9_10",X="_iconWrapper_15fk9_16",Z="_info_15fk9_36",ee="_warning_15fk9_42",ne="_error_15fk9_48",R={floating:Q,withIcon:V,iconWrapper:X,info:Z,warning:ee,error:ne},se={info:p.stenaInfoCircle,warning:p.stenaExclamationCircle,error:p.stenaExclamationTriangle},te=12,A=8,oe=2,ie=({children:s,visible:o,placement:r,label:a,variant:i,maxWidth:c="500px"})=>{const[x,_]=h.useState(!1),g=h.useRef(null),{refs:d,floatingStyles:w,context:f}=e.useFloating({placement:r,open:o??x,onOpenChange:_,middleware:[e.offset(A+oe),e.flip({padding:5}),e.shift({padding:5}),e.arrow({element:g})],whileElementsMounted:e.autoUpdate}),{isMounted:t,styles:l}=e.useTransitionStyles(f,{initial:{opacity:0}}),m=e.useHover(f),{getReferenceProps:j}=e.useInteractions([m]);return n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:d.setReference,...j(),children:s}),t&&n.jsx(e.FloatingPortal,{children:n.jsx("div",{ref:d.setFloating,style:w,children:n.jsxs("div",{style:{maxWidth:c,...l},className:F(R.floating,i&&R.withIcon),children:[i?n.jsxs(n.Fragment,{children:[n.jsx("div",{className:F(R.iconWrapper,R[i]),children:n.jsx(p.Icon,{icon:se[i],size:16})}),n.jsx(u.Space,{}),n.jsx(O,{label:a})]}):n.jsx(O,{label:a}),n.jsx(e.FloatingArrow,{ref:g,context:f,width:te,height:A,fill:"#333"})]})})})]})},O=({label:s})=>n.jsx(u.Text,{color:H.cssColor("--lhds-color-ui-50"),size:"small",variant:"bold",whiteSpace:"nowrap",children:s});exports.ActionPrompt=M;exports.ControlledPopover=Y;exports.Popover=L;exports.Tooltip=ie;
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/popover/ActionPrompt.tsx","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport type PopoverTheme = \"light\" | \"dark\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n theme?: PopoverTheme;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n theme = \"light\",\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={`${theme} ${variantToTheme[variant] ?? variantToTheme.standard}`}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n {children && <div ref={tippyRef}>{children}</div>}\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text, Space } from \"@stenajs-webui/core\";\nimport {\n Icon,\n stenaExclamationCircle,\n stenaExclamationTriangle,\n stenaInfoCircle,\n} from \"@stenajs-webui/elements\";\nimport cx from \"classnames\";\nimport * as React from \"react\";\nimport styles from \"./Tooltip.module.css\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\ntype TooltipVariant = \"info\" | \"warning\" | \"error\";\n\nconst variantIcons = {\n info: stenaInfoCircle,\n warning: stenaExclamationCircle,\n error: stenaExclamationTriangle,\n};\n\nexport interface TooltipProps extends Omit<PopoverProps, \"theme\" | \"render\"> {\n label: string;\n variant?: TooltipVariant;\n children: JSX.Element;\n}\n\nconst TooltipText: React.FC<{ label: string }> = ({ label }) => (\n <Text color={cssColor(\"--lhds-color-ui-50\")} size={\"small\"} variant=\"bold\">\n {label}\n </Text>\n);\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n label,\n variant,\n children,\n ...popoverProps\n}) => (\n <Popover\n theme=\"dark\"\n {...popoverProps}\n disablePadding\n content={\n <div className={cx(styles.tooltip, variant ? styles.withIcon : null)}>\n {variant ? (\n <>\n <div className={cx(styles.iconWrapper, styles[variant])}>\n <Icon icon={variantIcons[variant]} size={16} />\n </div>\n <Space />\n <TooltipText label={label} />\n </>\n ) : (\n <TooltipText label={label} />\n )}\n </div>\n }\n >\n {children}\n </Popover>\n);\n","import { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","jsxs","Column","jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useLazyPopover","plugins","mounted","setMounted","useState","useMemo","tippyStyles","styles","variantToTheme","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","propsPlugins","lazy","arrow","theme","tippyProps","TippyComponent","Box","ButtonWithPopover","onShow","onHide","buttonProps","variantIcons","stenaInfoCircle","stenaExclamationCircle","stenaExclamationTriangle","TooltipText","label","cssColor","Tooltip","popoverProps","cx","Fragment","Icon","useTippyInstance","useRef","element"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/popover/ActionPrompt.tsx","../src/components/popover/ControlledPopover.tsx","../src/components/popover/Popover.tsx","../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","import * as React from \"react\";\nimport { PropsWithChildren, ReactNode, useCallback, useRef } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport cx from \"classnames\";\nimport moduleStyles from \"./Popover.module.css\";\nimport { Placement } from \"../../types/Placement\";\n\nexport interface ControlledPopoverProps extends PropsWithChildren {\n open: boolean;\n renderTrigger: (props: Record<string, unknown>) => ReactNode;\n onRequestClose: () => void;\n placement?: Placement;\n hideArrow?: boolean;\n disablePadding?: boolean;\n restoreFocus?: boolean;\n returnFocus?: boolean;\n}\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const ControlledPopover: React.FC<ControlledPopoverProps> = ({\n children,\n placement = \"bottom\",\n hideArrow,\n renderTrigger,\n disablePadding,\n open,\n onRequestClose,\n restoreFocus,\n returnFocus,\n}) => {\n const arrowRef = useRef(null);\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n if (!open) {\n onRequestClose();\n }\n },\n [onRequestClose]\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange,\n placement,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n dismiss,\n role,\n ]);\n\n return (\n <>\n {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}\n\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n restoreFocus={restoreFocus}\n returnFocus={returnFocus}\n >\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps}\n >\n <div\n style={transitionStyles}\n className={cx(\n moduleStyles.floating,\n disablePadding && moduleStyles.disablePadding\n )}\n >\n {children}\n {!hideArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"white\"}\n />\n )}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n","import * as React from \"react\";\nimport { ReactNode, useCallback, useRef, useState } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport cx from \"classnames\";\nimport moduleStyles from \"./Popover.module.css\";\nimport { Placement } from \"../../types/Placement\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport type PopoverTheme = \"light\" | \"dark\";\nexport type PopoverTrigger = \"click\" | \"hover\" | \"focus\";\n\nexport type PopoverChildren =\n | ReactNode\n | ((args: PopoverChildrenArgs) => ReactNode);\n\nexport interface PopoverChildrenArgs {\n onRequestClose: () => void;\n}\n\ntype TriggerProp = PopoverTrigger | Array<PopoverTrigger>;\n\nexport interface PopoverProps {\n children?: PopoverChildren;\n onRequestClose?: () => void;\n placement?: Placement;\n trigger?: TriggerProp;\n hideArrow?: boolean;\n disablePadding?: boolean;\n variant?: PopoverVariant;\n theme?: PopoverTheme;\n renderTrigger: (props: Record<string, unknown>) => ReactNode;\n}\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n variant,\n trigger = \"hover\",\n placement = \"bottom\",\n hideArrow,\n renderTrigger,\n disablePadding,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const arrowRef = useRef(null);\n\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: setIsOpen,\n placement,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const onRequestClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const onFocus = useFocus(context, { enabled: hasTrigger(trigger, \"focus\") });\n const onClick = useClick(context, { enabled: hasTrigger(trigger, \"click\") });\n const onHover = useHover(context, {\n enabled: hasTrigger(trigger, \"hover\"),\n handleClose: safePolygon(),\n restMs: 100,\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n onFocus,\n onClick,\n onHover,\n dismiss,\n role,\n ]);\n\n return (\n <>\n {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}\n\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps}\n >\n <div\n style={transitionStyles}\n className={cx(\n moduleStyles.floating,\n disablePadding && moduleStyles.disablePadding,\n variant && moduleStyles.withIcon\n )}\n >\n {typeof children === \"function\"\n ? children({ onRequestClose })\n : children}\n {!hideArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"white\"}\n />\n )}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n\nconst hasTrigger = (\n triggerProp: TriggerProp,\n triggerToCheck: PopoverTrigger\n): boolean => {\n if (typeof triggerProp === \"string\") {\n return triggerProp === triggerToCheck;\n }\n return triggerProp.includes(triggerToCheck);\n};\n","import { Space, Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { CSSProperties, PropsWithChildren, useRef, useState } from \"react\";\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingPortal,\n offset,\n shift,\n useFloating,\n useHover,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport moduleStyles from \"./Tooltip.module.css\";\nimport { cssColor } from \"@stenajs-webui/theme\";\nimport cx from \"classnames\";\nimport {\n Icon,\n stenaExclamationCircle,\n stenaExclamationTriangle,\n stenaInfoCircle,\n} from \"@stenajs-webui/elements\";\nimport { Placement } from \"../../types/Placement\";\n\nexport interface TooltipProps extends PropsWithChildren {\n placement?: Placement;\n visible?: boolean;\n label: string;\n variant?: TooltipVariant;\n maxWidth?: CSSProperties[\"maxWidth\"];\n}\n\ntype TooltipVariant = \"info\" | \"warning\" | \"error\";\n\nconst variantIcons = {\n info: stenaInfoCircle,\n warning: stenaExclamationCircle,\n error: stenaExclamationTriangle,\n};\n\nconst ARROW_WIDTH = 12;\nconst ARROW_HEIGHT = 8;\nconst GAP = 2;\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n children,\n visible,\n placement,\n label,\n variant,\n maxWidth = \"500px\",\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const arrowRef = useRef(null);\n\n const { refs, floatingStyles, context } = useFloating({\n placement: placement,\n open: visible ?? isOpen,\n onOpenChange: setIsOpen,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip({ padding: 5 }),\n shift({ padding: 5 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: {\n opacity: 0,\n },\n });\n\n const hover = useHover(context);\n\n const { getReferenceProps } = useInteractions([hover]);\n\n return (\n <>\n <div ref={refs.setReference} {...getReferenceProps()}>\n {children}\n </div>\n\n {isMounted && (\n <FloatingPortal>\n <div ref={refs.setFloating} style={floatingStyles}>\n <div\n style={{ maxWidth, ...styles }}\n className={cx(\n moduleStyles.floating,\n variant && moduleStyles.withIcon\n )}\n >\n {variant ? (\n <>\n <div\n className={cx(\n moduleStyles.iconWrapper,\n moduleStyles[variant]\n )}\n >\n <Icon icon={variantIcons[variant]} size={16} />\n </div>\n <Space />\n <TooltipText label={label} />\n </>\n ) : (\n <TooltipText label={label} />\n )}\n\n <FloatingArrow\n ref={arrowRef}\n context={context}\n width={ARROW_WIDTH}\n height={ARROW_HEIGHT}\n fill={\"#333\"}\n />\n </div>\n </div>\n </FloatingPortal>\n )}\n </>\n );\n};\n\nconst TooltipText: React.FC<{ label: string }> = ({ label }) => (\n <Text\n color={cssColor(\"--lhds-color-ui-50\")}\n size={\"small\"}\n variant={\"bold\"}\n whiteSpace={\"nowrap\"}\n >\n {label}\n </Text>\n);\n"],"names":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","jsxs","Column","jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","ARROW_WIDTH","ARROW_HEIGHT","GAP","ControlledPopover","children","placement","hideArrow","renderTrigger","disablePadding","open","onRequestClose","restoreFocus","returnFocus","arrowRef","useRef","onOpenChange","useCallback","refs","floatingStyles","context","useFloating","offset","flip","shift","arrow","autoUpdate","isMounted","transitionStyles","useTransitionStyles","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","Fragment","FloatingPortal","FloatingFocusManager","cx","moduleStyles","FloatingArrow","Popover","variant","trigger","isOpen","setIsOpen","useState","onFocus","useFocus","hasTrigger","onClick","useClick","onHover","useHover","safePolygon","triggerProp","triggerToCheck","variantIcons","stenaInfoCircle","stenaExclamationCircle","stenaExclamationTriangle","Tooltip","visible","label","maxWidth","styles","hover","Icon","TooltipText","cssColor"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/tooltip",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "21.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"author": "mattias800",
|
|
@@ -33,12 +33,11 @@
|
|
|
33
33
|
"deploy": "gh-pages -d example/build"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@
|
|
37
|
-
"@stenajs-webui/
|
|
38
|
-
"@stenajs-webui/
|
|
39
|
-
"@
|
|
40
|
-
"classnames": "^2.3.1"
|
|
41
|
-
"tippy.js": "^6.2.6"
|
|
36
|
+
"@floating-ui/react": "^0.26.22",
|
|
37
|
+
"@stenajs-webui/core": "21.0.1",
|
|
38
|
+
"@stenajs-webui/elements": "21.0.1",
|
|
39
|
+
"@stenajs-webui/theme": "21.0.1",
|
|
40
|
+
"classnames": "^2.3.1"
|
|
42
41
|
},
|
|
43
42
|
"peerDependencies": {
|
|
44
43
|
"@emotion/react": ">=11.11.4",
|
|
@@ -62,5 +61,5 @@
|
|
|
62
61
|
"files": [
|
|
63
62
|
"dist"
|
|
64
63
|
],
|
|
65
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "130b4465eab967246a95a91dbc1328752433673b"
|
|
66
65
|
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { FlatButtonProps } from "@stenajs-webui/elements";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { PopoverProps } from "../popover/Popover";
|
|
4
|
-
export interface ButtonWithPopoverProps extends FlatButtonProps {
|
|
5
|
-
children?: PopoverProps["children"];
|
|
6
|
-
visible?: boolean;
|
|
7
|
-
onShow?: () => void;
|
|
8
|
-
onHide?: () => void;
|
|
9
|
-
}
|
|
10
|
-
export declare const ButtonWithPopover: React.FC<ButtonWithPopoverProps>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Instance } from "tippy.js";
|
|
2
|
-
import { MutableRefObject } from "react";
|
|
3
|
-
export type TippyInstance = Instance;
|
|
4
|
-
export type TippyElement<TElement extends HTMLElement> = TElement & {
|
|
5
|
-
_tippy: TippyInstance;
|
|
6
|
-
};
|
|
7
|
-
export type TippyCallbackRef<TElement extends HTMLElement> = (element: TippyElement<TElement> | null) => void;
|
|
8
|
-
export declare const useTippyInstance: <TElement extends HTMLElement>() => [
|
|
9
|
-
TippyCallbackRef<TElement>,
|
|
10
|
-
MutableRefObject<TippyInstance | undefined>
|
|
11
|
-
];
|
package/dist/types.d.ts
DELETED