@stenajs-webui/tooltip 17.13.2 → 17.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +131 -136
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.es.js
CHANGED
|
@@ -1,156 +1,151 @@
|
|
|
1
|
-
(function(){ try
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
alignItems: "center",
|
|
25
|
-
children: [/* @__PURE__ */ jsx(FlatButton, {
|
|
26
|
-
label: noLabel,
|
|
27
|
-
onClick: onNo
|
|
28
|
-
}), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(PrimaryButton, {
|
|
29
|
-
label: yesLabel,
|
|
30
|
-
onClick: onYes
|
|
31
|
-
})]
|
|
32
|
-
})]
|
|
33
|
-
}), loading && /* @__PURE__ */ jsx(Row, {
|
|
34
|
-
justifyContent: "center",
|
|
1
|
+
(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode('._noPadding_183x1_1 .tippy-content{padding:0}.tippy-box[data-theme~=light]{box-shadow:var(--swui-shadow-popover)}.tippy-box[data-theme~=outlined]{border:1px solid var(--lhds-color-blue-500)}.tippy-box[data-theme~=info]{background-color:var(--lhds-color-blue-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=info] .tippy-arrow{color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning]{background-color:var(--lhds-color-orange-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=warning] .tippy-arrow{color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error]{background-color:var(--lhds-color-red-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=error] .tippy-arrow{color:var(--lhds-color-red-50)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-red-50)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:visibility,opacity,-webkit-transform;transition-property:transform,visibility,opacity;transition-property:transform,visibility,opacity,-webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}')),document.head.appendChild(o)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { Column as z, Text as p, Space as d, Row as u, Box as C } from "@stenajs-webui/core";
|
|
3
|
+
import { FlatButton as a, PrimaryButton as w, Spinner as S } from "@stenajs-webui/elements";
|
|
4
|
+
import { jsxs as c, jsx as n } from "react/jsx-runtime";
|
|
5
|
+
import _ from "@tippyjs/react";
|
|
6
|
+
import { useState as j, useMemo as B, useRef as I } from "react";
|
|
7
|
+
const Y = ({
|
|
8
|
+
text: t = "Are you sure?",
|
|
9
|
+
yesLabel: o = "Yes",
|
|
10
|
+
noLabel: e = "No",
|
|
11
|
+
onNo: i,
|
|
12
|
+
onYes: s,
|
|
13
|
+
loading: r
|
|
14
|
+
}) => /* @__PURE__ */ c(z, {
|
|
15
|
+
position: "relative",
|
|
16
|
+
children: [/* @__PURE__ */ c("div", {
|
|
17
|
+
style: {
|
|
18
|
+
opacity: r ? 0 : 1
|
|
19
|
+
},
|
|
20
|
+
children: [/* @__PURE__ */ n(p, {
|
|
21
|
+
children: t
|
|
22
|
+
}), /* @__PURE__ */ n(d, {}), /* @__PURE__ */ c(u, {
|
|
23
|
+
justifyContent: "flex-end",
|
|
35
24
|
alignItems: "center",
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
})
|
|
25
|
+
children: [/* @__PURE__ */ n(a, {
|
|
26
|
+
label: e,
|
|
27
|
+
onClick: i
|
|
28
|
+
}), /* @__PURE__ */ n(d, {}), /* @__PURE__ */ n(w, {
|
|
29
|
+
label: o,
|
|
30
|
+
onClick: s
|
|
31
|
+
})]
|
|
44
32
|
})]
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
fn: () => ({
|
|
56
|
-
onShow: () => setMounted(true),
|
|
57
|
-
onHidden: () => setMounted(false)
|
|
33
|
+
}), r && /* @__PURE__ */ n(u, {
|
|
34
|
+
justifyContent: "center",
|
|
35
|
+
alignItems: "center",
|
|
36
|
+
left: 0,
|
|
37
|
+
top: 0,
|
|
38
|
+
width: "100%",
|
|
39
|
+
height: "100%",
|
|
40
|
+
position: "absolute",
|
|
41
|
+
children: /* @__PURE__ */ n(S, {
|
|
42
|
+
size: "small"
|
|
58
43
|
})
|
|
59
|
-
})
|
|
44
|
+
})]
|
|
45
|
+
}), k = "_noPadding_183x1_1", R = {
|
|
46
|
+
noPadding: k
|
|
47
|
+
};
|
|
48
|
+
const A = (t = []) => {
|
|
49
|
+
const [o, e] = j(!1);
|
|
60
50
|
return {
|
|
61
|
-
plugins: [
|
|
62
|
-
|
|
51
|
+
plugins: [B(
|
|
52
|
+
() => ({
|
|
53
|
+
fn: () => ({
|
|
54
|
+
onShow: () => e(!0),
|
|
55
|
+
onHidden: () => e(!1)
|
|
56
|
+
})
|
|
57
|
+
}),
|
|
58
|
+
[e]
|
|
59
|
+
), ...t],
|
|
60
|
+
mounted: o
|
|
63
61
|
};
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
};
|
|
68
|
-
const variantToTheme = {
|
|
62
|
+
}, M = {
|
|
63
|
+
noPadding: R.noPadding
|
|
64
|
+
}, N = {
|
|
69
65
|
standard: "light",
|
|
70
66
|
info: "info",
|
|
71
67
|
warning: "warning",
|
|
72
68
|
error: "error",
|
|
73
69
|
outlined: "outlined"
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
...tippyProps
|
|
70
|
+
}, m = ({
|
|
71
|
+
visible: t,
|
|
72
|
+
trigger: o = "mouseenter",
|
|
73
|
+
children: e,
|
|
74
|
+
tippyRef: i,
|
|
75
|
+
delay: s = 0,
|
|
76
|
+
variant: r = "standard",
|
|
77
|
+
disablePadding: l,
|
|
78
|
+
content: g,
|
|
79
|
+
maxWidth: h = "500px",
|
|
80
|
+
plugins: f,
|
|
81
|
+
lazy: y,
|
|
82
|
+
arrow: P = !0,
|
|
83
|
+
...v
|
|
89
84
|
}) => {
|
|
90
85
|
const {
|
|
91
|
-
plugins,
|
|
92
|
-
mounted
|
|
93
|
-
} =
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
-
interactive:
|
|
96
|
-
className:
|
|
97
|
-
trigger:
|
|
98
|
-
visible,
|
|
99
|
-
theme: "light " +
|
|
100
|
-
delay,
|
|
101
|
-
maxWidth,
|
|
102
|
-
arrow,
|
|
103
|
-
content: (!
|
|
104
|
-
spacing: !
|
|
105
|
-
indent: !
|
|
106
|
-
children:
|
|
86
|
+
plugins: x,
|
|
87
|
+
mounted: T
|
|
88
|
+
} = A(f);
|
|
89
|
+
return /* @__PURE__ */ n(_, {
|
|
90
|
+
interactive: !0,
|
|
91
|
+
className: M.noPadding,
|
|
92
|
+
trigger: t !== void 0 ? void 0 : o,
|
|
93
|
+
visible: t,
|
|
94
|
+
theme: "light " + N[r],
|
|
95
|
+
delay: s,
|
|
96
|
+
maxWidth: h,
|
|
97
|
+
arrow: P,
|
|
98
|
+
content: (!y || T) && /* @__PURE__ */ n(C, {
|
|
99
|
+
spacing: !l && 1,
|
|
100
|
+
indent: !l && 1,
|
|
101
|
+
children: g
|
|
107
102
|
}),
|
|
108
|
-
plugins,
|
|
109
|
-
...
|
|
110
|
-
children: /* @__PURE__ */
|
|
111
|
-
ref:
|
|
112
|
-
children
|
|
103
|
+
plugins: x,
|
|
104
|
+
...v,
|
|
105
|
+
children: /* @__PURE__ */ n("div", {
|
|
106
|
+
ref: i,
|
|
107
|
+
children: e
|
|
113
108
|
})
|
|
114
109
|
});
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
size: "small",
|
|
141
|
-
children: label
|
|
142
|
-
})
|
|
143
|
-
});
|
|
144
|
-
};
|
|
145
|
-
const useTippyInstance = () => {
|
|
146
|
-
const tippyRef = useRef();
|
|
110
|
+
}, q = ({
|
|
111
|
+
children: t,
|
|
112
|
+
onShow: o,
|
|
113
|
+
onHide: e,
|
|
114
|
+
...i
|
|
115
|
+
}) => /* @__PURE__ */ n(m, {
|
|
116
|
+
content: t,
|
|
117
|
+
trigger: "click",
|
|
118
|
+
zIndex: 1e3,
|
|
119
|
+
onShow: o,
|
|
120
|
+
onHide: e,
|
|
121
|
+
children: /* @__PURE__ */ n(a, {
|
|
122
|
+
...i
|
|
123
|
+
})
|
|
124
|
+
}), D = ({
|
|
125
|
+
label: t,
|
|
126
|
+
...o
|
|
127
|
+
}) => /* @__PURE__ */ n(m, {
|
|
128
|
+
...o,
|
|
129
|
+
content: /* @__PURE__ */ n(p, {
|
|
130
|
+
size: "small",
|
|
131
|
+
children: t
|
|
132
|
+
})
|
|
133
|
+
}), E = () => {
|
|
134
|
+
const t = I();
|
|
147
135
|
return [
|
|
148
|
-
(
|
|
149
|
-
var
|
|
150
|
-
|
|
136
|
+
(o) => {
|
|
137
|
+
var e;
|
|
138
|
+
t.current = (e = o == null ? void 0 : o._tippy) != null ? e : void 0;
|
|
151
139
|
},
|
|
152
|
-
|
|
140
|
+
t
|
|
153
141
|
];
|
|
154
142
|
};
|
|
155
|
-
export {
|
|
143
|
+
export {
|
|
144
|
+
Y as ActionPrompt,
|
|
145
|
+
q as ButtonWithPopover,
|
|
146
|
+
m as Popover,
|
|
147
|
+
D as Tooltip,
|
|
148
|
+
M as tippyStyles,
|
|
149
|
+
E as useTippyInstance
|
|
150
|
+
};
|
|
156
151
|
//# 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 \"./Tippy.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 interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\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 ...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={\"light \" + 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 <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 } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\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","opacity","_jsx","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","
|
|
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 \"./Tippy.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 interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\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 ...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={\"light \" + 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 <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 } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\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","Column","_jsxs","opacity","_jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useLazyPopover","plugins","mounted","setMounted","useState","useMemo","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","propsPlugins","lazy","arrow","tippyProps","TippyComponent","undefined","Box","ButtonWithPopover","onShow","onHide","buttonProps","Tooltip","label","popoverProps","useTippyInstance","useRef","element","_a"],"mappings":";;;;;AAaO,MAAMA,IAA4C,CAAC;AAAA,EACxDC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,SAAAA;AANwD,wBASrDC,GAAD;AAAA,EAAQ,UAAU;AAAA,EAAlB,UACE,CAAAC,gBAAAA,EAAA,OAAA;AAAA,IAAK,OAAO;AAAA,MAAEC,SAASH,IAAU,IAAI;AAAA,IAAzB;AAAA,IAAZ,UAAA,CACEI,gBAAAA,EAACC,GAAD;AAAA,MAAA,UAAOV;AAAAA,IAAAA,CAAP,GACCS,gBAAAA,EAAAE,GAFH,CAAA,CAAA,qBAGGC,GAAD;AAAA,MAAK,gBAAgB;AAAA,MAAY,YAAY;AAAA,MAA7C,UAAA,CACEH,gBAAAA,EAACI,GAAD;AAAA,QAAY,OAAOX;AAAAA,QAAS,SAASC;AAAAA,MAAAA,CAArC,GACCM,gBAAAA,EAAAE,GAFH,CAAA,CAAA,qBAGGG,GAAD;AAAA,QAAe,OAAOb;AAAAA,QAAU,SAASG;AAAAA,MAAAA,CAH3C,CAAA;AAAA,IAAA,CAHF,CAAA;AAAA,EAAA,CAAA,GASCC,KACCI,gBAAAA,EAACG,GAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IAPZ,4BASGG,GAAD;AAAA,MAAS,MAAM;AAAA,IAAA,CAAf;AAAA,EAAA,CApBN,CAAA;AAAA,CADF;;;AClBK,MAAMC,IAAiB,CAACC,IAA6B,OAAO;AACjE,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAYrC,SAAA;AAAA,IACL,SAAS,CAXQC;AAAA,MACjB,OAAO;AAAA,QACL,IAAI,OAAO;AAAA,UACT,QAAQ,MAAMF,EAAW,EAAI;AAAA,UAC7B,UAAU,MAAMA,EAAW,EAAK;AAAA,QAAA;AAAA,MAClC;AAAA,MAEF,CAACA,CAAU;AAAA,IAAA,GAIW,GAAGF,CAAO;AAAA,IAChC,SAAAC;AAAA,EAAA;AAEJ,GCKaI,IAAc;AAAA,EACzBC,WAAWC,EAAOD;AADO,GAIrBE,IAAiD;AAAA,EACrDC,UAAU;AAAA,EACVC,MAAM;AAAA,EACNC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,UAAU;AAL2C,GAQ1CC,IAAkC,CAAC;AAAA,EAC9CC,SAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAU;AAAA,EACVC,gBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXvB,SAASwB;AAAAA,EACTC,MAAAA;AAAAA,EACAC,OAAAA,IAAQ;AAAA,KACLC;AAb2C,MAc1C;AACE,QAAA;AAAA,IAAE3B,SAAAA;AAAAA,IAASC,SAAAA;AAAAA,EAAAA,IAAYF,EAAeyB,CAAD;AAE3C,2BACGI,GAAD;AAAA,IACE,aADF;AAAA,IAEE,WAAWvB,EAAYC;AAAAA,IACvB,SAASS,MAAYc,SAAYA,SAAYb;AAAAA,IAC7C,SAAAD;AAAA,IACA,OAAO,WAAWP,EAAeY;AAAAA,IACjC,OAAAD;AAAA,IACA,UAAAI;AAAA,IACA,OAAAG;AAAA,IACA,UACG,CAACD,KAAQxB,wBACP6B,GAAD;AAAA,MAAK,SAAS,CAACT,KAAkB;AAAA,MAAG,QAAQ,CAACA,KAAkB;AAAA,MAA/D,UACGC;AAAAA,IAAAA,CAZT;AAAA,IAgBE,SAAAtB;AAAA,IAhBF,GAiBM2B;AAAAA,IAjBN,4BAmBE,OAAA;AAAA,MAAK,KAAKT;AAAAA,MAAV,UAAAD;AAAA,IAAA,CAAA;AAAA,EAAA,CApBJ;AAuBD,GClEYc,IAAsD,CAAC;AAAA,EAClEd,UAAAA;AAAAA,EACAe,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,KACGC;AAJ+D,wBAO/DpB,GAAD;AAAA,EACE,SAASG;AAAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAAe;AAAA,EACA,QAAAC;AAAA,EALF,4BAOGrC,GAAesC;AAAAA,IAAAA,GAAAA;AAAAA,EAAAA,CAAhB;AAAA,CARJ,GCRWC,IAAkC,CAAC;AAAA,EAAEC,OAAAA;AAAAA,KAAUC;AAAZ,wBAE3CvB,GAAD;AAAA,EAAA,GAAauB;AAAAA,EAAc,2BAAU5C,GAAD;AAAA,IAAM,MAAM;AAAA,IAAZ,UAAsB2C;AAAAA,EAAAA,CAAtB;AAAA,CADtC,GCGWE,IAAmB,MAG3B;AACH,QAAMpB,IAAWqB;AAEV,SAAA;AAAA,IACL,CAACC,MAA2C;;AACjC,MAAAtB,EAAA,WAAUuB,IAAAD,KAAA,gBAAAA,EAAS,WAAT,OAAAC,IAAmB;AAAA,IACxC;AAAA,IACAvB;AAAA,EAAA;AAEJ;"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
(function(){ try
|
|
1
|
+
(function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode('._noPadding_183x1_1 .tippy-content{padding:0}.tippy-box[data-theme~=light]{box-shadow:var(--swui-shadow-popover)}.tippy-box[data-theme~=outlined]{border:1px solid var(--lhds-color-blue-500)}.tippy-box[data-theme~=info]{background-color:var(--lhds-color-blue-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=info] .tippy-arrow{color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning]{background-color:var(--lhds-color-orange-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=warning] .tippy-arrow{color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error]{background-color:var(--lhds-color-red-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=error] .tippy-arrow{color:var(--lhds-color-red-50)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-red-50)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:visibility,opacity,-webkit-transform;transition-property:transform,visibility,opacity;transition-property:transform,visibility,opacity,-webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}')),document.head.appendChild(o)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@stenajs-webui/core"),c=require("@stenajs-webui/elements"),e=require("react/jsx-runtime"),v=require("@tippyjs/react"),l=require("react"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},_=T(v),S=({text:t="Are you sure?",yesLabel:n="Yes",noLabel:o="No",onNo:i,onYes:u,loading:r})=>e.jsxs(s.Column,{position:"relative",children:[e.jsxs("div",{style:{opacity:r?0:1},children:[e.jsx(s.Text,{children:t}),e.jsx(s.Space,{}),e.jsxs(s.Row,{justifyContent:"flex-end",alignItems:"center",children:[e.jsx(c.FlatButton,{label:o,onClick:i}),e.jsx(s.Space,{}),e.jsx(c.PrimaryButton,{label:n,onClick:u})]})]}),r&&e.jsx(s.Row,{justifyContent:"center",alignItems:"center",left:0,top:0,width:"100%",height:"100%",position:"absolute",children:e.jsx(c.Spinner,{size:"small"})})]}),w="_noPadding_183x1_1",C={noPadding:w};const b=(t=[])=>{const[n,o]=l.useState(!1);return{plugins:[l.useMemo(()=>({fn:()=>({onShow:()=>o(!0),onHidden:()=>o(!1)})}),[o]),...t],mounted:n}},d={noPadding:C.noPadding},z={standard:"light",info:"info",warning:"warning",error:"error",outlined:"outlined"},a=({visible:t,trigger:n="mouseenter",children:o,tippyRef:i,delay:u=0,variant:r="standard",disablePadding:p,content:j,maxWidth:x="500px",plugins:y,lazy:g,arrow:f=!0,...h})=>{const{plugins:m,mounted:P}=b(y);return e.jsx(_.default,{interactive:!0,className:d.noPadding,trigger:t!==void 0?void 0:n,visible:t,theme:"light "+z[r],delay:u,maxWidth:x,arrow:f,content:(!g||P)&&e.jsx(s.Box,{spacing:!p&&1,indent:!p&&1,children:j}),plugins:m,...h,children:e.jsx("div",{ref:i,children:o})})},B=({children:t,onShow:n,onHide:o,...i})=>e.jsx(a,{content:t,trigger:"click",zIndex:1e3,onShow:n,onHide:o,children:e.jsx(c.FlatButton,{...i})}),q=({label:t,...n})=>e.jsx(a,{...n,content:e.jsx(s.Text,{size:"small",children:t})}),I=()=>{const t=l.useRef();return[n=>{var o;t.current=(o=n==null?void 0:n._tippy)!=null?o:void 0},t]};exports.ActionPrompt=S;exports.ButtonWithPopover=B;exports.Popover=a;exports.Tooltip=q;exports.tippyStyles=d;exports.useTippyInstance=I;
|
|
2
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 \"./Tippy.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 interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\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 ...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={\"light \" + 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 <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 } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\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","Column","_jsxs","opacity","_jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","
|
|
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 \"./Tippy.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 interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\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 ...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={\"light \" + 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 <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 } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\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","Column","_jsxs","opacity","_jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useLazyPopover","plugins","mounted","setMounted","useState","useMemo","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","propsPlugins","lazy","arrow","tippyProps","TippyComponent","undefined","Box","ButtonWithPopover","onShow","onHide","buttonProps","Tooltip","label","popoverProps","useTippyInstance","useRef","element","_a"],"mappings":"qUAaaA,EAA4C,CAAC,CACxDC,KAAAA,EAAO,gBACPC,SAAAA,EAAW,MACXC,QAAAA,EAAU,KACVC,KAAAA,EACAC,MAAAA,EACAC,QAAAA,CANwD,WASrDC,EAAAA,OAAD,CAAQ,SAAU,WAAlB,SACE,CAAAC,EAAA,KAAA,MAAA,CAAK,MAAO,CAAEC,QAASH,EAAU,EAAI,CAAzB,EAAZ,SAAA,CACEI,EAAA,IAACC,OAAD,CAAA,SAAOV,CAAAA,CAAP,EACCS,EAAA,IAAAE,EAAA,MAFH,CAAA,CAAA,SAGGC,EAAAA,IAAD,CAAK,eAAgB,WAAY,WAAY,SAA7C,SAAA,CACEH,EAAA,IAACI,aAAD,CAAY,MAAOX,EAAS,QAASC,CAAAA,CAArC,EACCM,EAAA,IAAAE,EAAA,MAFH,CAAA,CAAA,QAGGG,EAAAA,cAAD,CAAe,MAAOb,EAAU,QAASG,CAAAA,CAH3C,CAAA,CAAA,CAHF,CAAA,CAAA,CAAA,EASCC,GACCI,EAAA,IAACG,MAAD,CACE,eAAgB,SAChB,WAAY,SACZ,KAAM,EACN,IAAK,EACL,MAAO,OACP,OAAQ,OACR,SAAU,WAPZ,eASGG,UAAD,CAAS,KAAM,OAAA,CAAf,CAAA,CApBN,CAAA,CAAA,CADF,yCClBK,MAAMC,EAAiB,CAACC,EAA6B,KAAO,CACjE,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAS,EAAK,EAYrC,MAAA,CACL,QAAS,CAXQC,EAAA,QACjB,KAAO,CACL,GAAI,KAAO,CACT,OAAQ,IAAMF,EAAW,EAAI,EAC7B,SAAU,IAAMA,EAAW,EAAK,CAAA,EAClC,GAEF,CAACA,CAAU,CAAA,EAIW,GAAGF,CAAO,EAChC,QAAAC,CAAA,CAEJ,ECKaI,EAAc,CACzBC,UAAWC,EAAOD,SADO,EAIrBE,EAAiD,CACrDC,SAAU,QACVC,KAAM,OACNC,QAAS,UACTC,MAAO,QACPC,SAAU,UAL2C,EAQ1CC,EAAkC,CAAC,CAC9CC,QAAAA,EACAC,QAAAA,EAAU,aACVC,SAAAA,EACAC,SAAAA,EACAC,MAAAA,EAAQ,EACRC,QAAAA,EAAU,WACVC,eAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,QACXvB,QAASwB,EACTC,KAAAA,EACAC,MAAAA,EAAQ,MACLC,CAb2C,IAc1C,CACE,KAAA,CAAE3B,QAAAA,EAASC,QAAAA,CAAAA,EAAYF,EAAeyB,CAAD,EAE3C,aACGI,EAAAA,QAAD,CACE,YADF,GAEE,UAAWvB,EAAYC,UACvB,QAASS,IAAYc,OAAYA,OAAYb,EAC7C,QAAAD,EACA,MAAO,SAAWP,EAAeY,GACjC,MAAAD,EACA,SAAAI,EACA,MAAAG,EACA,SACG,CAACD,GAAQxB,UACP6B,EAAAA,IAAD,CAAK,QAAS,CAACT,GAAkB,EAAG,OAAQ,CAACA,GAAkB,EAA/D,SACGC,CAAAA,CAZT,EAgBE,QAAAtB,EAhBF,GAiBM2B,EAjBN,eAmBE,MAAA,CAAK,IAAKT,EAAV,SAAAD,CAAA,CAAA,CAAA,CApBJ,CAuBD,EClEYc,EAAsD,CAAC,CAClEd,SAAAA,EACAe,OAAAA,EACAC,OAAAA,KACGC,CAJ+D,UAO/DpB,EAAD,CACE,QAASG,EACT,QAAS,QACT,OAAQ,IACR,OAAAe,EACA,OAAAC,EALF,eAOGrC,aAAesC,CAAAA,GAAAA,CAAAA,CAAhB,CAAA,CARJ,ECRWC,EAAkC,CAAC,CAAEC,MAAAA,KAAUC,CAAZ,UAE3CvB,EAAD,CAAA,GAAauB,EAAc,cAAU5C,OAAD,CAAM,KAAM,QAAZ,SAAsB2C,CAAAA,CAAtB,CAAA,CADtC,ECGWE,EAAmB,IAG3B,CACH,MAAMpB,EAAWqB,EAAAA,SAEV,MAAA,CACJC,GAA2C,OACjCtB,EAAA,SAAUuB,EAAAD,GAAA,YAAAA,EAAS,SAAT,KAAAC,EAAmB,MACxC,EACAvB,CAAA,CAEJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/tooltip",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.14.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "mattias800",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"deploy": "gh-pages -d example/build"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@stenajs-webui/core": "17.
|
|
30
|
-
"@stenajs-webui/elements": "17.
|
|
29
|
+
"@stenajs-webui/core": "17.14.0",
|
|
30
|
+
"@stenajs-webui/elements": "17.14.0",
|
|
31
31
|
"@tippyjs/react": "^4.1.0",
|
|
32
32
|
"tippy.js": "^6.2.6"
|
|
33
33
|
},
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"files": [
|
|
54
54
|
"dist"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "bf8a859341dc1d6dd35e28e58c35ef6d5d979307"
|
|
57
57
|
}
|