@stenajs-webui/tooltip 20.6.11 → 20.7.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/components/popover/Popover.d.ts +2 -2
- package/dist/components/tooltip/Tooltip.d.ts +1 -1
- package/dist/hooks/UseTippyInstance.d.ts +7 -4
- package/dist/index.es.js +19 -20
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +5 -5
|
@@ -2,8 +2,8 @@ import { TippyProps as TippyComponentProps } from "@tippyjs/react";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import "./Tippy.module.css";
|
|
4
4
|
import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
|
|
5
|
-
export
|
|
6
|
-
export
|
|
5
|
+
export type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
|
|
6
|
+
export type PopoverTheme = "light" | "dark";
|
|
7
7
|
export interface PopoverProps extends Partial<Omit<TippyComponentProps, "theme" | "render">> {
|
|
8
8
|
tippyRef?: TippyCallbackRef<HTMLDivElement>;
|
|
9
9
|
disablePadding?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { PopoverProps } from "../popover/Popover";
|
|
3
|
-
|
|
3
|
+
type TooltipVariant = "info" | "warning" | "error";
|
|
4
4
|
export interface TooltipProps extends Omit<PopoverProps, "theme" | "render"> {
|
|
5
5
|
label: string;
|
|
6
6
|
variant?: TooltipVariant;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { Instance } from "tippy.js";
|
|
2
2
|
import { MutableRefObject } from "react";
|
|
3
|
-
export
|
|
4
|
-
export
|
|
3
|
+
export type TippyInstance = Instance;
|
|
4
|
+
export type TippyElement<TElement extends HTMLElement> = TElement & {
|
|
5
5
|
_tippy: TippyInstance;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
8
|
-
export declare const useTippyInstance: <TElement extends HTMLElement>() => [
|
|
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/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.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)}._tooltip_1i1mn_1{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;align-items:center;border-radius:var(--swui-border-radius);padding:var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2)}._tooltip_1i1mn_1._withIcon_1i1mn_8{padding:calc(var(--swui-metrics-spacing) * .5);padding-right:calc(var(--swui-metrics-indent) * 2)}._iconWrapper_1i1mn_14{--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_1i1mn_14 svg{color:var(--current-icon-color)}._iconWrapper_1i1mn_14._info_1i1mn_34{--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_1i1mn_14._warning_1i1mn_40{--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_1i1mn_14._error_1i1mn_46{--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
2
|
import { jsxs as c, jsx as n, Fragment as S } from "react/jsx-runtime";
|
|
3
3
|
import { Column as W, Text as h, Space as a, Row as p, Box as j } from "@stenajs-webui/core";
|
|
4
4
|
import { FlatButton as f, PrimaryButton as k, Spinner as B, Icon as N, stenaInfoCircle as R, stenaExclamationCircle as $, stenaExclamationTriangle as b } from "@stenajs-webui/elements";
|
|
@@ -10,20 +10,20 @@ const sn = ({
|
|
|
10
10
|
text: o = "Are you sure?",
|
|
11
11
|
yesLabel: t = "Yes",
|
|
12
12
|
noLabel: i = "No",
|
|
13
|
-
onNo:
|
|
13
|
+
onNo: r,
|
|
14
14
|
onYes: l,
|
|
15
|
-
loading:
|
|
15
|
+
loading: e
|
|
16
16
|
}) => /* @__PURE__ */ c(W, { position: "relative", children: [
|
|
17
|
-
/* @__PURE__ */ c("div", { style: { opacity:
|
|
17
|
+
/* @__PURE__ */ c("div", { style: { opacity: e ? 0 : 1 }, children: [
|
|
18
18
|
/* @__PURE__ */ n(h, { children: o }),
|
|
19
19
|
/* @__PURE__ */ n(a, {}),
|
|
20
20
|
/* @__PURE__ */ c(p, { justifyContent: "flex-end", alignItems: "center", children: [
|
|
21
|
-
/* @__PURE__ */ n(f, { label: i, onClick:
|
|
21
|
+
/* @__PURE__ */ n(f, { label: i, onClick: r }),
|
|
22
22
|
/* @__PURE__ */ n(a, {}),
|
|
23
23
|
/* @__PURE__ */ n(k, { label: t, onClick: l })
|
|
24
24
|
] })
|
|
25
25
|
] }),
|
|
26
|
-
|
|
26
|
+
e && /* @__PURE__ */ n(
|
|
27
27
|
p,
|
|
28
28
|
{
|
|
29
29
|
justifyContent: "center",
|
|
@@ -38,8 +38,7 @@ const sn = ({
|
|
|
38
38
|
)
|
|
39
39
|
] }), L = "_noPadding_183x1_1", Y = {
|
|
40
40
|
noPadding: L
|
|
41
|
-
}
|
|
42
|
-
const q = (o = []) => {
|
|
41
|
+
}, q = (o = []) => {
|
|
43
42
|
const [t, i] = E(!1);
|
|
44
43
|
return {
|
|
45
44
|
plugins: [F(
|
|
@@ -65,9 +64,9 @@ const q = (o = []) => {
|
|
|
65
64
|
visible: o,
|
|
66
65
|
trigger: t = "mouseenter",
|
|
67
66
|
children: i,
|
|
68
|
-
tippyRef:
|
|
67
|
+
tippyRef: r,
|
|
69
68
|
delay: l = 0,
|
|
70
|
-
variant:
|
|
69
|
+
variant: e = "standard",
|
|
71
70
|
disablePadding: d,
|
|
72
71
|
content: y,
|
|
73
72
|
maxWidth: w = "500px",
|
|
@@ -75,9 +74,9 @@ const q = (o = []) => {
|
|
|
75
74
|
lazy: P,
|
|
76
75
|
arrow: v = !0,
|
|
77
76
|
theme: I = "light",
|
|
78
|
-
...
|
|
77
|
+
...C
|
|
79
78
|
}) => {
|
|
80
|
-
const { plugins:
|
|
79
|
+
const { plugins: T, mounted: z } = q(x);
|
|
81
80
|
return /* @__PURE__ */ n(
|
|
82
81
|
A,
|
|
83
82
|
{
|
|
@@ -85,21 +84,21 @@ const q = (o = []) => {
|
|
|
85
84
|
className: D.noPadding,
|
|
86
85
|
trigger: o !== void 0 ? void 0 : t,
|
|
87
86
|
visible: o,
|
|
88
|
-
theme: `${I} ${u[
|
|
87
|
+
theme: `${I} ${u[e] ?? u.standard}`,
|
|
89
88
|
delay: l,
|
|
90
89
|
maxWidth: w,
|
|
91
90
|
arrow: v,
|
|
92
91
|
content: (!P || z) && /* @__PURE__ */ n(j, { spacing: !d && 1, indent: !d && 1, children: y }),
|
|
93
|
-
plugins:
|
|
94
|
-
...
|
|
95
|
-
children: i && /* @__PURE__ */ n("div", { ref:
|
|
92
|
+
plugins: T,
|
|
93
|
+
...C,
|
|
94
|
+
children: i && /* @__PURE__ */ n("div", { ref: r, children: i })
|
|
96
95
|
}
|
|
97
96
|
);
|
|
98
97
|
}, cn = ({
|
|
99
98
|
children: o,
|
|
100
99
|
onShow: t,
|
|
101
100
|
onHide: i,
|
|
102
|
-
...
|
|
101
|
+
...r
|
|
103
102
|
}) => /* @__PURE__ */ n(
|
|
104
103
|
_,
|
|
105
104
|
{
|
|
@@ -108,7 +107,7 @@ const q = (o = []) => {
|
|
|
108
107
|
zIndex: 1e3,
|
|
109
108
|
onShow: t,
|
|
110
109
|
onHide: i,
|
|
111
|
-
children: /* @__PURE__ */ n(f, { ...
|
|
110
|
+
children: /* @__PURE__ */ n(f, { ...r })
|
|
112
111
|
}
|
|
113
112
|
), G = "_tooltip_1i1mn_1", J = "_withIcon_1i1mn_8", K = "_iconWrapper_1i1mn_14", O = "_info_1i1mn_34", Q = "_warning_1i1mn_40", U = "_error_1i1mn_46", s = {
|
|
114
113
|
tooltip: G,
|
|
@@ -125,12 +124,12 @@ const q = (o = []) => {
|
|
|
125
124
|
label: o,
|
|
126
125
|
variant: t,
|
|
127
126
|
children: i,
|
|
128
|
-
...
|
|
127
|
+
...r
|
|
129
128
|
}) => /* @__PURE__ */ n(
|
|
130
129
|
_,
|
|
131
130
|
{
|
|
132
131
|
theme: "dark",
|
|
133
|
-
...
|
|
132
|
+
...r,
|
|
134
133
|
disablePadding: !0,
|
|
135
134
|
content: /* @__PURE__ */ n("div", { className: m(s.tooltip, t ? s.withIcon : null), children: t ? /* @__PURE__ */ c(S, { children: [
|
|
136
135
|
/* @__PURE__ */ n("div", { className: m(s.iconWrapper, s[t]), children: /* @__PURE__ */ n(N, { icon: V[t], size: 16 }) }),
|
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 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/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 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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"}
|
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"),i=require("@stenajs-webui/core"),r=require("@stenajs-webui/elements"),S=require("@tippyjs/react"),
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.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)}._tooltip_1i1mn_1{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;align-items:center;border-radius:var(--swui-border-radius);padding:var(--swui-metrics-spacing) calc(var(--swui-metrics-indent) * 2)}._tooltip_1i1mn_1._withIcon_1i1mn_8{padding:calc(var(--swui-metrics-spacing) * .5);padding-right:calc(var(--swui-metrics-indent) * 2)}._iconWrapper_1i1mn_14{--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_1i1mn_14 svg{color:var(--current-icon-color)}._iconWrapper_1i1mn_14._info_1i1mn_34{--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_1i1mn_14._warning_1i1mn_40{--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_1i1mn_14._error_1i1mn_46{--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"),i=require("@stenajs-webui/core"),r=require("@stenajs-webui/elements"),S=require("@tippyjs/react"),d=require("react"),x=require("classnames"),C=require("@stenajs-webui/theme"),q=({text:t="Are you sure?",yesLabel:o="Yes",noLabel:e="No",onNo:s,onYes:a,loading:c})=>n.jsxs(i.Column,{position:"relative",children:[n.jsxs("div",{style:{opacity:c?0:1},children:[n.jsx(i.Text,{children:t}),n.jsx(i.Space,{}),n.jsxs(i.Row,{justifyContent:"flex-end",alignItems:"center",children:[n.jsx(r.FlatButton,{label:e,onClick:s}),n.jsx(i.Space,{}),n.jsx(r.PrimaryButton,{label:o,onClick:a})]})]}),c&&n.jsx(i.Row,{justifyContent:"center",alignItems:"center",left:0,top:0,width:"100%",height:"100%",position:"absolute",children:n.jsx(r.Spinner,{size:"small"})})]}),z="_noPadding_183x1_1",B={noPadding:z},W=(t=[])=>{const[o,e]=d.useState(!1);return{plugins:[d.useMemo(()=>({fn:()=>({onShow:()=>e(!0),onHidden:()=>e(!1)})}),[e]),...t],mounted:o}},j={noPadding:B.noPadding},g={standard:"light",info:"info",warning:"warning",error:"error",outlined:"outlined"},p=({visible:t,trigger:o="mouseenter",children:e,tippyRef:s,delay:a=0,variant:c="standard",disablePadding:u,content:m,maxWidth:y="500px",plugins:_,lazy:f,arrow:P=!0,theme:v="light",...w})=>{const{plugins:T,mounted:I}=W(_);return n.jsx(S,{interactive:!0,className:j.noPadding,trigger:t!==void 0?void 0:o,visible:t,theme:`${v} ${g[c]??g.standard}`,delay:a,maxWidth:y,arrow:P,content:(!f||I)&&n.jsx(i.Box,{spacing:!u&&1,indent:!u&&1,children:m}),plugins:T,...w,children:e&&n.jsx("div",{ref:s,children:e})})},R=({children:t,onShow:o,onHide:e,...s})=>n.jsx(p,{content:t,trigger:"click",zIndex:1e3,onShow:o,onHide:e,children:n.jsx(r.FlatButton,{...s})}),b="_tooltip_1i1mn_1",k="_withIcon_1i1mn_8",N="_iconWrapper_1i1mn_14",A="_info_1i1mn_34",F="_warning_1i1mn_40",M="_error_1i1mn_46",l={tooltip:b,withIcon:k,iconWrapper:N,info:A,warning:F,error:M},$={info:r.stenaInfoCircle,warning:r.stenaExclamationCircle,error:r.stenaExclamationTriangle},h=({label:t})=>n.jsx(i.Text,{color:C.cssColor("--lhds-color-ui-50"),size:"small",variant:"bold",children:t}),E=({label:t,variant:o,children:e,...s})=>n.jsx(p,{theme:"dark",...s,disablePadding:!0,content:n.jsx("div",{className:x(l.tooltip,o?l.withIcon:null),children:o?n.jsxs(n.Fragment,{children:[n.jsx("div",{className:x(l.iconWrapper,l[o]),children:n.jsx(r.Icon,{icon:$[o],size:16})}),n.jsx(i.Space,{}),n.jsx(h,{label:t})]}):n.jsx(h,{label:t})}),children:e}),H=()=>{const t=d.useRef();return[o=>{t.current=(o==null?void 0:o._tippy)??void 0},t]};exports.ActionPrompt=q;exports.ButtonWithPopover=R;exports.Popover=p;exports.Tooltip=E;exports.tippyStyles=j;exports.useTippyInstance=H;
|
|
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 \"./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 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/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 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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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { Placement } from "tippy.js";
|
|
2
|
-
export
|
|
2
|
+
export type PopoverPlacement = Placement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/tooltip",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"author": "mattias800",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"deploy": "gh-pages -d example/build"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@stenajs-webui/core": "20.
|
|
37
|
-
"@stenajs-webui/elements": "20.
|
|
38
|
-
"@stenajs-webui/theme": "20.
|
|
36
|
+
"@stenajs-webui/core": "20.7.0",
|
|
37
|
+
"@stenajs-webui/elements": "20.7.0",
|
|
38
|
+
"@stenajs-webui/theme": "20.7.0",
|
|
39
39
|
"@tippyjs/react": "^4.1.0",
|
|
40
40
|
"classnames": "^2.3.1",
|
|
41
41
|
"tippy.js": "^6.2.6"
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"files": [
|
|
63
63
|
"dist"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "8dc9fe226a0ae212caa675f867b9d9bce3bbb7e6"
|
|
66
66
|
}
|