@caseparts-org/caseblocks 0.0.51 → 0.0.52
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/assets/Tooltip.css +1 -1
- package/dist/molecules/Cart/Cart.js +5 -5
- package/dist/molecules/CategoryNav/CategoryNav.js +1 -1
- package/dist/molecules/Tooltip/Tooltip.d.ts +8 -12
- package/dist/molecules/Tooltip/Tooltip.js +497 -324
- package/dist/molecules/Tooltip/Tooltip.stories.d.ts +54 -3
- package/dist/molecules/Tooltip/Tooltip.stories.js +93 -44
- package/package.json +3 -2
|
@@ -5,20 +5,62 @@ declare const meta: {
|
|
|
5
5
|
component: import('react').FC<import('./Tooltip').TooltipProps>;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
|
+
controls: {
|
|
9
|
+
sort: string;
|
|
10
|
+
};
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
8
16
|
};
|
|
9
17
|
tags: string[];
|
|
18
|
+
args: {
|
|
19
|
+
on: "hover";
|
|
20
|
+
position: "top center";
|
|
21
|
+
mouseEnterDelay: number;
|
|
22
|
+
mouseLeaveDelay: number;
|
|
23
|
+
arrow: true;
|
|
24
|
+
};
|
|
10
25
|
argTypes: {
|
|
26
|
+
on: {
|
|
27
|
+
control: "select";
|
|
28
|
+
options: string[];
|
|
29
|
+
description: string;
|
|
30
|
+
};
|
|
11
31
|
position: {
|
|
12
32
|
control: "select";
|
|
13
33
|
options: string[];
|
|
34
|
+
description: string;
|
|
35
|
+
};
|
|
36
|
+
mouseEnterDelay: {
|
|
37
|
+
control: "number";
|
|
38
|
+
description: string;
|
|
14
39
|
};
|
|
15
|
-
|
|
40
|
+
mouseLeaveDelay: {
|
|
16
41
|
control: "number";
|
|
42
|
+
description: string;
|
|
43
|
+
};
|
|
44
|
+
arrow: {
|
|
45
|
+
control: "boolean";
|
|
46
|
+
description: string;
|
|
17
47
|
};
|
|
18
|
-
|
|
48
|
+
open: {
|
|
19
49
|
control: "boolean";
|
|
50
|
+
description: string;
|
|
51
|
+
table: {
|
|
52
|
+
category: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
closeOnDocumentClick: {
|
|
56
|
+
control: "boolean";
|
|
57
|
+
description: string;
|
|
58
|
+
};
|
|
59
|
+
closeOnEscape: {
|
|
60
|
+
control: "boolean";
|
|
61
|
+
description: string;
|
|
20
62
|
};
|
|
21
|
-
|
|
63
|
+
contentClassName: {
|
|
22
64
|
table: {
|
|
23
65
|
disable: true;
|
|
24
66
|
};
|
|
@@ -28,6 +70,15 @@ declare const meta: {
|
|
|
28
70
|
disable: true;
|
|
29
71
|
};
|
|
30
72
|
};
|
|
73
|
+
trigger: {
|
|
74
|
+
table: {
|
|
75
|
+
disable: true;
|
|
76
|
+
};
|
|
77
|
+
description: string;
|
|
78
|
+
};
|
|
79
|
+
children: {
|
|
80
|
+
description: string;
|
|
81
|
+
};
|
|
31
82
|
};
|
|
32
83
|
};
|
|
33
84
|
export default meta;
|
|
@@ -1,14 +1,32 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Tooltip as
|
|
3
|
-
import { Button as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip as t } from "./Tooltip.js";
|
|
3
|
+
import { Button as o } from "../../atoms/Button/Button.js";
|
|
4
|
+
const l = {
|
|
5
5
|
title: "Case Parts/Molecules/Tooltip",
|
|
6
|
-
component:
|
|
6
|
+
component: t,
|
|
7
7
|
parameters: {
|
|
8
|
-
layout: "centered"
|
|
8
|
+
layout: "centered",
|
|
9
|
+
controls: { sort: "requiredFirst" },
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component: "Wrapper around reactjs-popup providing consistent styling. Use `interactive` for focusable content. `on` can be a string or an array of trigger events."
|
|
13
|
+
}
|
|
14
|
+
}
|
|
9
15
|
},
|
|
10
16
|
tags: ["autodocs"],
|
|
17
|
+
args: {
|
|
18
|
+
on: "hover",
|
|
19
|
+
position: "top center",
|
|
20
|
+
mouseEnterDelay: 100,
|
|
21
|
+
mouseLeaveDelay: 80,
|
|
22
|
+
arrow: !0
|
|
23
|
+
},
|
|
11
24
|
argTypes: {
|
|
25
|
+
on: {
|
|
26
|
+
control: "select",
|
|
27
|
+
options: ["hover", "click", "focus", "right-click"],
|
|
28
|
+
description: "Event(s) that trigger the tooltip. Accepts a single string or an array."
|
|
29
|
+
},
|
|
12
30
|
position: {
|
|
13
31
|
control: "select",
|
|
14
32
|
options: [
|
|
@@ -25,20 +43,51 @@ const s = {
|
|
|
25
43
|
"left center",
|
|
26
44
|
"left bottom",
|
|
27
45
|
"center center"
|
|
28
|
-
]
|
|
46
|
+
],
|
|
47
|
+
description: "Popup position passed to reactjs-popup."
|
|
48
|
+
},
|
|
49
|
+
mouseEnterDelay: {
|
|
50
|
+
control: "number",
|
|
51
|
+
description: "Delay (ms) before opening on hover."
|
|
52
|
+
},
|
|
53
|
+
mouseLeaveDelay: {
|
|
54
|
+
control: "number",
|
|
55
|
+
description: "Delay (ms) before closing after mouse leaves."
|
|
56
|
+
},
|
|
57
|
+
arrow: {
|
|
58
|
+
control: "boolean",
|
|
59
|
+
description: "Show popup arrow."
|
|
60
|
+
},
|
|
61
|
+
open: {
|
|
62
|
+
control: "boolean",
|
|
63
|
+
description: "Controlled open state (overrides triggers). Leave undefined for uncontrolled.",
|
|
64
|
+
table: { category: "Advanced" }
|
|
29
65
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
66
|
+
closeOnDocumentClick: {
|
|
67
|
+
control: "boolean",
|
|
68
|
+
description: "Close when clicking outside (uncontrolled modes)."
|
|
69
|
+
},
|
|
70
|
+
closeOnEscape: {
|
|
71
|
+
control: "boolean",
|
|
72
|
+
description: "Close on Escape key."
|
|
73
|
+
},
|
|
74
|
+
contentClassName: { table: { disable: !0 } },
|
|
75
|
+
tooltipClassName: { table: { disable: !0 } },
|
|
76
|
+
trigger: {
|
|
77
|
+
table: { disable: !0 },
|
|
78
|
+
description: "React element that triggers the tooltip."
|
|
79
|
+
},
|
|
80
|
+
children: {
|
|
81
|
+
description: "Tooltip content."
|
|
82
|
+
}
|
|
34
83
|
}
|
|
35
84
|
}, c = {
|
|
36
85
|
args: {
|
|
37
|
-
position: "top",
|
|
38
|
-
|
|
39
|
-
|
|
86
|
+
position: "top center",
|
|
87
|
+
mouseEnterDelay: 0,
|
|
88
|
+
mouseLeaveDelay: 0
|
|
40
89
|
},
|
|
41
|
-
render: (
|
|
90
|
+
render: (r) => /* @__PURE__ */ e(
|
|
42
91
|
"div",
|
|
43
92
|
{
|
|
44
93
|
style: {
|
|
@@ -49,11 +98,11 @@ const s = {
|
|
|
49
98
|
alignItems: "center",
|
|
50
99
|
justifyContent: "center"
|
|
51
100
|
},
|
|
52
|
-
children: /* @__PURE__ */
|
|
53
|
-
|
|
101
|
+
children: /* @__PURE__ */ e(
|
|
102
|
+
t,
|
|
54
103
|
{
|
|
55
|
-
...
|
|
56
|
-
trigger: /* @__PURE__ */
|
|
104
|
+
...r,
|
|
105
|
+
trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Hover me" }) }),
|
|
57
106
|
on: "hover",
|
|
58
107
|
children: "This tooltip appears on hover (top center)."
|
|
59
108
|
}
|
|
@@ -61,7 +110,7 @@ const s = {
|
|
|
61
110
|
}
|
|
62
111
|
)
|
|
63
112
|
}, a = {
|
|
64
|
-
render: () => /* @__PURE__ */
|
|
113
|
+
render: () => /* @__PURE__ */ e(
|
|
65
114
|
"div",
|
|
66
115
|
{
|
|
67
116
|
style: {
|
|
@@ -72,19 +121,19 @@ const s = {
|
|
|
72
121
|
alignItems: "center",
|
|
73
122
|
justifyContent: "center"
|
|
74
123
|
},
|
|
75
|
-
children: /* @__PURE__ */
|
|
76
|
-
|
|
124
|
+
children: /* @__PURE__ */ e(
|
|
125
|
+
t,
|
|
77
126
|
{
|
|
78
|
-
trigger: /* @__PURE__ */
|
|
127
|
+
trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Click me" }) }),
|
|
79
128
|
on: "click",
|
|
80
|
-
position: "bottom",
|
|
129
|
+
position: "bottom center",
|
|
81
130
|
children: "This tooltip appears on click (bottom center)."
|
|
82
131
|
}
|
|
83
132
|
)
|
|
84
133
|
}
|
|
85
134
|
)
|
|
86
|
-
},
|
|
87
|
-
render: () => /* @__PURE__ */
|
|
135
|
+
}, p = {
|
|
136
|
+
render: () => /* @__PURE__ */ e(
|
|
88
137
|
"div",
|
|
89
138
|
{
|
|
90
139
|
style: {
|
|
@@ -95,19 +144,19 @@ const s = {
|
|
|
95
144
|
alignItems: "center",
|
|
96
145
|
justifyContent: "center"
|
|
97
146
|
},
|
|
98
|
-
children: /* @__PURE__ */
|
|
99
|
-
|
|
147
|
+
children: /* @__PURE__ */ e(
|
|
148
|
+
t,
|
|
100
149
|
{
|
|
101
|
-
trigger: /* @__PURE__ */
|
|
150
|
+
trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
|
|
102
151
|
on: "hover",
|
|
103
|
-
position: "right",
|
|
152
|
+
position: "right center",
|
|
104
153
|
children: "Tooltip on the right."
|
|
105
154
|
}
|
|
106
155
|
)
|
|
107
156
|
}
|
|
108
157
|
)
|
|
109
158
|
}, d = {
|
|
110
|
-
render: () => /* @__PURE__ */
|
|
159
|
+
render: () => /* @__PURE__ */ e(
|
|
111
160
|
"div",
|
|
112
161
|
{
|
|
113
162
|
style: {
|
|
@@ -118,19 +167,19 @@ const s = {
|
|
|
118
167
|
alignItems: "center",
|
|
119
168
|
justifyContent: "center"
|
|
120
169
|
},
|
|
121
|
-
children: /* @__PURE__ */
|
|
122
|
-
|
|
170
|
+
children: /* @__PURE__ */ e(
|
|
171
|
+
t,
|
|
123
172
|
{
|
|
124
|
-
trigger: /* @__PURE__ */
|
|
173
|
+
trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Hover left" }) }),
|
|
125
174
|
on: "hover",
|
|
126
|
-
position: "left",
|
|
175
|
+
position: "left center",
|
|
127
176
|
children: "Tooltip on the left."
|
|
128
177
|
}
|
|
129
178
|
)
|
|
130
179
|
}
|
|
131
180
|
)
|
|
132
|
-
},
|
|
133
|
-
render: () => /* @__PURE__ */
|
|
181
|
+
}, h = {
|
|
182
|
+
render: () => /* @__PURE__ */ e(
|
|
134
183
|
"div",
|
|
135
184
|
{
|
|
136
185
|
style: {
|
|
@@ -142,12 +191,12 @@ const s = {
|
|
|
142
191
|
position: "absolute",
|
|
143
192
|
right: "300px"
|
|
144
193
|
},
|
|
145
|
-
children: /* @__PURE__ */
|
|
146
|
-
|
|
194
|
+
children: /* @__PURE__ */ e(
|
|
195
|
+
t,
|
|
147
196
|
{
|
|
148
|
-
trigger: /* @__PURE__ */
|
|
197
|
+
trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
|
|
149
198
|
on: "hover",
|
|
150
|
-
position: "right",
|
|
199
|
+
position: "right center",
|
|
151
200
|
children: "Tooltip on the right."
|
|
152
201
|
}
|
|
153
202
|
)
|
|
@@ -155,10 +204,10 @@ const s = {
|
|
|
155
204
|
)
|
|
156
205
|
};
|
|
157
206
|
export {
|
|
158
|
-
|
|
207
|
+
h as AbsolutelyPositioned,
|
|
159
208
|
a as OnClick,
|
|
160
209
|
c as OnHover,
|
|
161
210
|
d as PositionLeft,
|
|
162
|
-
|
|
163
|
-
|
|
211
|
+
p as PositionRight,
|
|
212
|
+
l as default
|
|
164
213
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@caseparts-org/caseblocks",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.52",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "dist/main.js",
|
|
7
7
|
"types": "dist/main.d.ts",
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
"@fontsource-variable/roboto-condensed": "^5.1.1",
|
|
36
36
|
"@fontsource/roboto": "^5.1.0",
|
|
37
37
|
"clsx": "^2.1.1",
|
|
38
|
-
"csstype": "^3.1.3"
|
|
38
|
+
"csstype": "^3.1.3",
|
|
39
|
+
"reactjs-popup": "^2.0.6"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": ">=18.3.1 <20.0.0",
|