@jalvin/ui 2.0.41 → 2.0.43
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/__tests__/annotated-string.test.d.ts +1 -1
- package/dist/__tests__/annotated-string.test.d.ts.map +1 -1
- package/dist/__tests__/annotated-string.test.js +39 -26
- package/dist/__tests__/annotated-string.test.js.map +1 -1
- package/dist/__tests__/interaction.test.js +35 -52
- package/dist/__tests__/interaction.test.js.map +1 -1
- package/dist/__tests__/text.test.d.ts +1 -1
- package/dist/__tests__/text.test.d.ts.map +1 -1
- package/dist/__tests__/text.test.js +16 -22
- package/dist/__tests__/text.test.js.map +1 -1
- package/dist/__tests__/windowsizeclass.test.js +66 -57
- package/dist/__tests__/windowsizeclass.test.js.map +1 -1
- package/dist/annotated-string.d.ts +4 -2
- package/dist/annotated-string.d.ts.map +1 -1
- package/dist/annotated-string.js +17 -19
- package/dist/annotated-string.js.map +1 -1
- package/dist/button.d.ts +3 -2
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +12 -8
- package/dist/button.js.map +1 -1
- package/dist/canvas.d.ts +3 -3
- package/dist/canvas.d.ts.map +1 -1
- package/dist/canvas.js +40 -31
- package/dist/canvas.js.map +1 -1
- package/dist/checkbox.d.ts +2 -1
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.js +11 -18
- package/dist/checkbox.js.map +1 -1
- package/dist/image.d.ts +6 -4
- package/dist/image.d.ts.map +1 -1
- package/dist/image.js +21 -32
- package/dist/image.js.map +1 -1
- package/dist/index.d.ts +14 -15
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -17
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +3 -1
- package/dist/input.d.ts.map +1 -1
- package/dist/input.js +13 -20
- package/dist/input.js.map +1 -1
- package/dist/interaction.d.ts.map +1 -1
- package/dist/interaction.js +27 -9
- package/dist/interaction.js.map +1 -1
- package/dist/layout.d.ts +7 -3
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +10 -10
- package/dist/layout.js.map +1 -1
- package/dist/spacer.d.ts +3 -2
- package/dist/spacer.d.ts.map +1 -1
- package/dist/spacer.js +5 -5
- package/dist/spacer.js.map +1 -1
- package/dist/surface.d.ts +10 -9
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js +13 -30
- package/dist/surface.js.map +1 -1
- package/dist/text.d.ts +5 -3
- package/dist/text.d.ts.map +1 -1
- package/dist/text.js +12 -23
- package/dist/text.js.map +1 -1
- package/dist/textarea.d.ts +3 -1
- package/dist/textarea.d.ts.map +1 -1
- package/dist/textarea.js +13 -20
- package/dist/textarea.js.map +1 -1
- package/dist/typography.d.ts +129 -101
- package/dist/typography.d.ts.map +1 -1
- package/dist/typography.js +25 -29
- package/dist/typography.js.map +1 -1
- package/package.json +2 -2
- package/dist/__tests__/children-signature.test.d.ts +0 -2
- package/dist/__tests__/children-signature.test.d.ts.map +0 -1
- package/dist/__tests__/children-signature.test.js +0 -106
- package/dist/__tests__/children-signature.test.js.map +0 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
|
2
|
-
import {
|
|
2
|
+
import { renderHook, act } from "@testing-library/react";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { calculateWindowSizeClass, WindowSizeClassProvider } from "@jalvin/runtime";
|
|
3
5
|
function setWindowSize(width, height) {
|
|
4
6
|
Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: width });
|
|
5
7
|
Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: height });
|
|
@@ -7,27 +9,11 @@ function setWindowSize(width, height) {
|
|
|
7
9
|
function fireResize() {
|
|
8
10
|
window.dispatchEvent(new Event("resize"));
|
|
9
11
|
}
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
let lastValue;
|
|
13
|
-
const container = document.createElement("div");
|
|
14
|
-
const update = () => {
|
|
15
|
-
render(() => {
|
|
16
|
-
lastValue = hook();
|
|
17
|
-
return document.createElement("div");
|
|
18
|
-
}, container);
|
|
19
|
-
};
|
|
20
|
-
update();
|
|
21
|
-
return {
|
|
22
|
-
get current() { return lastValue; }
|
|
23
|
-
};
|
|
24
|
-
}
|
|
12
|
+
/** Wraps the hook under test with WindowSizeClassProvider. */
|
|
13
|
+
const wrapper = ({ children }) => React.createElement(WindowSizeClassProvider, null, children);
|
|
25
14
|
describe("calculateWindowSizeClass", () => {
|
|
26
15
|
beforeEach(() => {
|
|
27
16
|
setWindowSize(1280, 800);
|
|
28
|
-
// Force reset the global state for testing if needed,
|
|
29
|
-
// but since it's global in ui.ts we just fire a resize.
|
|
30
|
-
fireResize();
|
|
31
17
|
});
|
|
32
18
|
afterEach(() => {
|
|
33
19
|
vi.restoreAllMocks();
|
|
@@ -35,98 +21,121 @@ describe("calculateWindowSizeClass", () => {
|
|
|
35
21
|
// ── initial class from window size ─────────────────────────────────────────
|
|
36
22
|
it("returns Compact/Medium for a phone-sized window (360×640)", () => {
|
|
37
23
|
setWindowSize(360, 640);
|
|
38
|
-
|
|
39
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
24
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
40
25
|
expect(result.current.widthSizeClass).toBe("Compact");
|
|
41
26
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
42
27
|
});
|
|
43
28
|
it("returns Medium/Compact for a landscape phone (667×375)", () => {
|
|
44
29
|
setWindowSize(667, 375);
|
|
45
|
-
|
|
46
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
30
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
47
31
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
48
32
|
expect(result.current.heightSizeClass).toBe("Compact");
|
|
49
33
|
});
|
|
50
34
|
it("returns Medium/Expanded for a tablet-sized window (768×1024)", () => {
|
|
51
35
|
setWindowSize(768, 1024);
|
|
52
|
-
|
|
53
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
36
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
54
37
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
55
38
|
expect(result.current.heightSizeClass).toBe("Expanded");
|
|
56
39
|
});
|
|
57
40
|
it("returns Expanded/Medium for a desktop window (1280×800)", () => {
|
|
58
41
|
setWindowSize(1280, 800);
|
|
59
|
-
|
|
60
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
42
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
61
43
|
expect(result.current.widthSizeClass).toBe("Expanded");
|
|
62
44
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
63
45
|
});
|
|
64
46
|
// ── class boundaries ───────────────────────────────────────────────────────
|
|
65
47
|
it("width at exactly 600 is Medium", () => {
|
|
66
48
|
setWindowSize(600, 800);
|
|
67
|
-
|
|
68
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
49
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
69
50
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
70
51
|
});
|
|
71
52
|
it("width at exactly 840 is Expanded", () => {
|
|
72
53
|
setWindowSize(840, 800);
|
|
73
|
-
|
|
74
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
54
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
75
55
|
expect(result.current.widthSizeClass).toBe("Expanded");
|
|
76
56
|
});
|
|
77
57
|
it("height at exactly 480 is Medium", () => {
|
|
78
58
|
setWindowSize(400, 480);
|
|
79
|
-
|
|
80
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
59
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
81
60
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
82
61
|
});
|
|
83
62
|
it("height at exactly 900 is Expanded", () => {
|
|
84
63
|
setWindowSize(400, 900);
|
|
85
|
-
|
|
86
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
64
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
87
65
|
expect(result.current.heightSizeClass).toBe("Expanded");
|
|
88
66
|
});
|
|
89
67
|
// ── reactivity on resize ───────────────────────────────────────────────────
|
|
90
68
|
it("updates widthSizeClass when window crosses a breakpoint", () => {
|
|
91
69
|
setWindowSize(400, 800); // Compact
|
|
92
|
-
|
|
93
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
70
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
94
71
|
expect(result.current.widthSizeClass).toBe("Compact");
|
|
95
|
-
|
|
96
|
-
|
|
72
|
+
act(() => {
|
|
73
|
+
setWindowSize(700, 800); // Medium
|
|
74
|
+
fireResize();
|
|
75
|
+
});
|
|
97
76
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
98
|
-
|
|
99
|
-
|
|
77
|
+
act(() => {
|
|
78
|
+
setWindowSize(1280, 800); // Expanded
|
|
79
|
+
fireResize();
|
|
80
|
+
});
|
|
100
81
|
expect(result.current.widthSizeClass).toBe("Expanded");
|
|
101
82
|
});
|
|
102
83
|
it("updates heightSizeClass when window crosses a breakpoint", () => {
|
|
103
84
|
setWindowSize(800, 400); // Compact height
|
|
104
|
-
|
|
105
|
-
const result = renderJalvinHook(() => calculateWindowSizeClass());
|
|
85
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
106
86
|
expect(result.current.heightSizeClass).toBe("Compact");
|
|
107
|
-
|
|
108
|
-
|
|
87
|
+
act(() => {
|
|
88
|
+
setWindowSize(800, 700); // Medium height
|
|
89
|
+
fireResize();
|
|
90
|
+
});
|
|
109
91
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
110
92
|
});
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
93
|
+
it("does not re-render consumers when resize stays within the same class", () => {
|
|
94
|
+
setWindowSize(400, 800);
|
|
95
|
+
let renderCount = 0;
|
|
96
|
+
const { result } = renderHook(() => {
|
|
97
|
+
renderCount++;
|
|
98
|
+
return calculateWindowSizeClass();
|
|
99
|
+
}, { wrapper });
|
|
100
|
+
const baseRenders = renderCount;
|
|
101
|
+
act(() => {
|
|
102
|
+
setWindowSize(450, 800); // still Compact — no class change
|
|
103
|
+
fireResize();
|
|
104
|
+
});
|
|
105
|
+
expect(result.current.widthSizeClass).toBe("Compact");
|
|
106
|
+
expect(renderCount).toBe(baseRenders);
|
|
107
|
+
});
|
|
108
|
+
// ── single listener (regression for multi-consumer crash) ─────────────────
|
|
109
|
+
it("registers only ONE resize listener even when multiple consumers call the hook", () => {
|
|
110
|
+
const addSpy = vi.spyOn(window, "addEventListener");
|
|
111
|
+
setWindowSize(1280, 800);
|
|
112
|
+
// Two independent hooks, both under the same provider.
|
|
113
|
+
renderHook(() => {
|
|
114
|
+
calculateWindowSizeClass(); // consumer 1
|
|
115
|
+
calculateWindowSizeClass(); // consumer 2
|
|
116
|
+
}, { wrapper });
|
|
117
|
+
const resizeListenerCount = addSpy.mock.calls.filter(([event]) => event === "resize").length;
|
|
118
|
+
expect(resizeListenerCount).toBe(1);
|
|
118
119
|
});
|
|
119
120
|
it("both consumers see the same updated class after a single resize event", () => {
|
|
120
121
|
setWindowSize(400, 800); // Compact
|
|
121
|
-
|
|
122
|
-
const result = renderJalvinHook(() => ({
|
|
122
|
+
const { result } = renderHook(() => ({
|
|
123
123
|
a: calculateWindowSizeClass(),
|
|
124
124
|
b: calculateWindowSizeClass(),
|
|
125
|
-
}));
|
|
126
|
-
|
|
127
|
-
|
|
125
|
+
}), { wrapper });
|
|
126
|
+
act(() => {
|
|
127
|
+
setWindowSize(1280, 800); // Expanded
|
|
128
|
+
fireResize();
|
|
129
|
+
});
|
|
128
130
|
expect(result.current.a.widthSizeClass).toBe("Expanded");
|
|
129
131
|
expect(result.current.b.widthSizeClass).toBe("Expanded");
|
|
130
132
|
});
|
|
133
|
+
// ── cleanup ────────────────────────────────────────────────────────────────
|
|
134
|
+
it("removes the resize listener when the provider unmounts", () => {
|
|
135
|
+
const removeSpy = vi.spyOn(window, "removeEventListener");
|
|
136
|
+
const { unmount } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
137
|
+
unmount();
|
|
138
|
+
expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
|
|
139
|
+
});
|
|
131
140
|
});
|
|
132
141
|
//# sourceMappingURL=windowsizeclass.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"windowsizeclass.test.js","sourceRoot":"","sources":["../../src/__tests__/windowsizeclass.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"windowsizeclass.test.js","sourceRoot":"","sources":["../../src/__tests__/windowsizeclass.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { CSSProperties } from "react";
|
|
1
3
|
export declare class TextDecoration {
|
|
2
4
|
readonly mask: number;
|
|
3
5
|
static readonly None: TextDecoration;
|
|
@@ -18,7 +20,7 @@ export interface SpanStyle {
|
|
|
18
20
|
background?: string;
|
|
19
21
|
textDecoration?: TextDecoration;
|
|
20
22
|
}
|
|
21
|
-
export declare function spanStyleToCSS(styles: SpanStyle[]):
|
|
23
|
+
export declare function spanStyleToCSS(styles: SpanStyle[]): CSSProperties;
|
|
22
24
|
export interface TextLinkStyles {
|
|
23
25
|
style?: SpanStyle;
|
|
24
26
|
focusedStyle?: SpanStyle;
|
|
@@ -70,6 +72,6 @@ declare class AnnotatedStringBuilder {
|
|
|
70
72
|
}
|
|
71
73
|
/** Build an AnnotatedString using a fluent builder block. */
|
|
72
74
|
export declare function buildAnnotatedString(block: (builder: AnnotatedStringBuilder) => void): AnnotatedString;
|
|
73
|
-
export declare function renderAnnotatedString(ann: AnnotatedString):
|
|
75
|
+
export declare function renderAnnotatedString(ann: AnnotatedString): React.ReactNode[];
|
|
74
76
|
export {};
|
|
75
77
|
//# sourceMappingURL=annotated-string.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotated-string.d.ts","sourceRoot":"","sources":["../src/annotated-string.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"annotated-string.d.ts","sourceRoot":"","sources":["../src/annotated-string.ts"],"names":[],"mappings":"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"}
|
package/dist/annotated-string.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
// ---------------------------------------------------------------------------
|
|
3
3
|
// TextDecoration
|
|
4
4
|
// ---------------------------------------------------------------------------
|
|
@@ -152,7 +152,7 @@ export function buildAnnotatedString(block) {
|
|
|
152
152
|
return builder.build();
|
|
153
153
|
}
|
|
154
154
|
// ---------------------------------------------------------------------------
|
|
155
|
-
// Rendering helper — converts AnnotatedString to
|
|
155
|
+
// Rendering helper — converts AnnotatedString to React nodes
|
|
156
156
|
// ---------------------------------------------------------------------------
|
|
157
157
|
/** Default link style applied when the link has no explicit SpanStyle. */
|
|
158
158
|
const defaultLinkStyle = {
|
|
@@ -173,13 +173,11 @@ export function renderAnnotatedString(ann) {
|
|
|
173
173
|
positions.add(l.end);
|
|
174
174
|
}
|
|
175
175
|
const sorted = Array.from(positions).sort((a, b) => a - b);
|
|
176
|
-
|
|
177
|
-
for (let i = 0; i < sorted.length - 1; i++) {
|
|
178
|
-
const start = sorted[i];
|
|
176
|
+
return sorted.slice(0, -1).map((start, i) => {
|
|
179
177
|
const end = sorted[i + 1];
|
|
180
178
|
const segment = text.slice(start, end);
|
|
181
179
|
if (!segment)
|
|
182
|
-
|
|
180
|
+
return null;
|
|
183
181
|
// All spans whose range fully covers this segment
|
|
184
182
|
const activeSpans = spanStyles.filter(s => s.start <= start && s.end >= end).map(s => s.item);
|
|
185
183
|
const activeLinks = linkAnnotations.filter(l => l.start <= start && l.end >= end);
|
|
@@ -191,36 +189,36 @@ export function renderAnnotatedString(ann) {
|
|
|
191
189
|
const appliedStyle = linkStyle
|
|
192
190
|
? { ...defaultLinkStyle, ...spanStyleToCSS([linkStyle]), ...css }
|
|
193
191
|
: { ...defaultLinkStyle, ...css };
|
|
194
|
-
|
|
192
|
+
return React.createElement("a", {
|
|
193
|
+
key: start,
|
|
195
194
|
href: link.url,
|
|
196
195
|
target: "_blank",
|
|
197
196
|
rel: "noopener noreferrer",
|
|
198
197
|
style: appliedStyle,
|
|
199
|
-
},
|
|
200
|
-
continue;
|
|
198
|
+
}, segment);
|
|
201
199
|
}
|
|
202
200
|
if (link.type === "clickable") {
|
|
203
201
|
const linkStyle = link.styles?.style;
|
|
204
202
|
const appliedStyle = linkStyle
|
|
205
203
|
? { ...defaultLinkStyle, ...spanStyleToCSS([linkStyle]), ...css }
|
|
206
204
|
: { ...defaultLinkStyle, ...css };
|
|
207
|
-
|
|
205
|
+
return React.createElement("span", {
|
|
206
|
+
key: start,
|
|
208
207
|
role: "link",
|
|
209
208
|
tabIndex: 0,
|
|
210
209
|
style: appliedStyle,
|
|
211
210
|
onClick: () => link.onClick(link.tag),
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
211
|
+
onKeyDown: (e) => {
|
|
212
|
+
if (e.key === "Enter" || e.key === " ")
|
|
213
|
+
link.onClick(link.tag);
|
|
214
|
+
},
|
|
215
|
+
}, segment);
|
|
215
216
|
}
|
|
216
217
|
}
|
|
217
218
|
if (Object.keys(css).length > 0) {
|
|
218
|
-
|
|
219
|
+
return React.createElement("span", { key: start, style: css }, segment);
|
|
219
220
|
}
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
return nodes;
|
|
221
|
+
return segment;
|
|
222
|
+
}).filter(Boolean);
|
|
225
223
|
}
|
|
226
224
|
//# sourceMappingURL=annotated-string.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotated-string.js","sourceRoot":"","sources":["../src/annotated-string.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"annotated-string.js","sourceRoot":"","sources":["../src/annotated-string.ts"],"names":[],"mappings":"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"}
|
package/dist/button.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
3
|
export type ButtonVariant = "filled" | "outlined" | "text" | "tonal";
|
|
3
4
|
export interface ButtonProps {
|
|
@@ -10,7 +11,7 @@ export interface ButtonProps {
|
|
|
10
11
|
type?: "button" | "submit" | "reset";
|
|
11
12
|
}
|
|
12
13
|
/** Button element. */
|
|
13
|
-
export declare function Button({ text, innerHTML: html, onClick, modifier, enabled, type }: ButtonProps, children?:
|
|
14
|
+
export declare function Button({ text, innerHTML: html, onClick, modifier, enabled, type }: ButtonProps, children?: React.ReactNode[]): React.ReactElement;
|
|
14
15
|
export interface IconButtonProps {
|
|
15
16
|
innerHTML?: string;
|
|
16
17
|
onClick?: () => void;
|
|
@@ -20,5 +21,5 @@ export interface IconButtonProps {
|
|
|
20
21
|
"aria-label"?: string;
|
|
21
22
|
}
|
|
22
23
|
/** Icon-only circular button. */
|
|
23
|
-
export declare function IconButton({ innerHTML, onClick, modifier, enabled, type, "aria-label": ariaLabel }: IconButtonProps, children?:
|
|
24
|
+
export declare function IconButton({ innerHTML, onClick, modifier, enabled, type, "aria-label": ariaLabel }: IconButtonProps, children?: React.ReactNode[]): React.ReactElement;
|
|
24
25
|
//# sourceMappingURL=button.d.ts.map
|
package/dist/button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,sBAAsB;AACtB,wBAAgB,MAAM,CACpB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,EAAE,WAAW,EAC1F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,KAAK,CAAC,YAAY,CA0BpB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,EAC3G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,KAAK,CAAC,YAAY,CA0BpB"}
|
package/dist/button.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
/** Button element. */
|
|
3
3
|
export function Button({ text, innerHTML: html, onClick, modifier, enabled = true, type = "button" }, children) {
|
|
4
4
|
const modProps = modifier?.toProps() ?? {};
|
|
@@ -19,11 +19,13 @@ export function Button({ text, innerHTML: html, onClick, modifier, enabled = tru
|
|
|
19
19
|
style: modProps.style,
|
|
20
20
|
};
|
|
21
21
|
if (html !== undefined) {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
return React.createElement("button", {
|
|
23
|
+
...baseProps,
|
|
24
|
+
dangerouslySetInnerHTML: { __html: html },
|
|
25
|
+
});
|
|
24
26
|
}
|
|
25
|
-
const childNodes = text !== undefined ? [
|
|
26
|
-
return
|
|
27
|
+
const childNodes = text !== undefined ? [text] : (children ?? []);
|
|
28
|
+
return React.createElement("button", baseProps, ...childNodes);
|
|
27
29
|
}
|
|
28
30
|
/** Icon-only circular button. */
|
|
29
31
|
export function IconButton({ innerHTML, onClick, modifier, enabled = true, type = "button", "aria-label": ariaLabel }, children) {
|
|
@@ -46,9 +48,11 @@ export function IconButton({ innerHTML, onClick, modifier, enabled = true, type
|
|
|
46
48
|
"aria-label": ariaLabel,
|
|
47
49
|
};
|
|
48
50
|
if (innerHTML !== undefined) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
+
return React.createElement("button", {
|
|
52
|
+
...baseProps,
|
|
53
|
+
dangerouslySetInnerHTML: { __html: innerHTML },
|
|
54
|
+
});
|
|
51
55
|
}
|
|
52
|
-
return
|
|
56
|
+
return React.createElement("button", baseProps, ...(children ?? []));
|
|
53
57
|
}
|
|
54
58
|
//# sourceMappingURL=button.js.map
|
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"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"}
|
package/dist/canvas.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
|
-
export interface CanvasProps {
|
|
3
|
+
export interface CanvasProps extends Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, "children" | "style" | "width" | "height"> {
|
|
3
4
|
modifier?: Modifier;
|
|
4
5
|
/** CSS pixel width of the canvas drawing surface. */
|
|
5
6
|
width?: number;
|
|
@@ -11,8 +12,7 @@ export interface CanvasProps {
|
|
|
11
12
|
clearBeforeDraw?: boolean;
|
|
12
13
|
/** Override devicePixelRatio used for backing-store scaling. */
|
|
13
14
|
pixelRatio?: number;
|
|
14
|
-
className?: string;
|
|
15
15
|
}
|
|
16
16
|
/** Canvas drawing surface. */
|
|
17
|
-
export declare function Canvas({ modifier, width, height, draw, clearBeforeDraw, pixelRatio, className, }: CanvasProps):
|
|
17
|
+
export declare function Canvas({ modifier, width, height, draw, clearBeforeDraw, pixelRatio, className, ...domProps }: CanvasProps): React.ReactElement;
|
|
18
18
|
//# sourceMappingURL=canvas.d.ts.map
|
package/dist/canvas.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.
|
|
1
|
+
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACjI,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1E,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,8BAA8B;AAC9B,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAsB,EACtB,UAAU,EACV,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA6DlC"}
|
package/dist/canvas.js
CHANGED
|
@@ -1,29 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
function joinClassNames(...classNames) {
|
|
3
3
|
const value = classNames.filter(Boolean).join(" ").trim();
|
|
4
4
|
return value.length > 0 ? value : undefined;
|
|
5
5
|
}
|
|
6
6
|
/** Canvas drawing surface. */
|
|
7
|
-
export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true, pixelRatio, className, }) {
|
|
7
|
+
export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true, pixelRatio, className, ...domProps }) {
|
|
8
|
+
const ref = React.useRef(null);
|
|
8
9
|
const modProps = modifier?.toProps() ?? {};
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
onFocus: modProps.onFocus,
|
|
14
|
-
onBlur: modProps.onBlur,
|
|
15
|
-
onMouseDown: modProps.onMouseDown,
|
|
16
|
-
onMouseUp: modProps.onMouseUp,
|
|
17
|
-
onTouchStart: modProps.onTouchStart,
|
|
18
|
-
onTouchEnd: modProps.onTouchEnd,
|
|
19
|
-
onTouchCancel: modProps.onTouchCancel,
|
|
20
|
-
style: {
|
|
21
|
-
width: width !== undefined ? `${width}px` : undefined,
|
|
22
|
-
height: height !== undefined ? `${height}px` : undefined,
|
|
23
|
-
...modProps.style,
|
|
24
|
-
},
|
|
25
|
-
}, []);
|
|
26
|
-
const drawFrame = () => {
|
|
10
|
+
const drawFrame = React.useCallback(() => {
|
|
11
|
+
const canvas = ref.current;
|
|
12
|
+
if (!canvas)
|
|
13
|
+
return;
|
|
27
14
|
const cssWidth = Math.max(1, Math.floor(width ?? (canvas.clientWidth || 300)));
|
|
28
15
|
const cssHeight = Math.max(1, Math.floor(height ?? (canvas.clientHeight || 150)));
|
|
29
16
|
const dpr = Math.max(1, pixelRatio ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1));
|
|
@@ -40,17 +27,39 @@ export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true,
|
|
|
40
27
|
if (clearBeforeDraw)
|
|
41
28
|
ctx.clearRect(0, 0, cssWidth, cssHeight);
|
|
42
29
|
draw?.(ctx, canvas);
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
// Note: No cleanup mechanism here for vanilla version yet
|
|
30
|
+
}, [clearBeforeDraw, draw, height, pixelRatio, width]);
|
|
31
|
+
React.useLayoutEffect(() => {
|
|
32
|
+
drawFrame();
|
|
33
|
+
}, [drawFrame]);
|
|
34
|
+
React.useEffect(() => {
|
|
35
|
+
const canvas = ref.current;
|
|
36
|
+
if (!canvas || width !== undefined || height !== undefined || typeof ResizeObserver === "undefined") {
|
|
37
|
+
return;
|
|
52
38
|
}
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
const observer = new ResizeObserver(() => {
|
|
40
|
+
drawFrame();
|
|
41
|
+
});
|
|
42
|
+
observer.observe(canvas);
|
|
43
|
+
return () => observer.disconnect();
|
|
44
|
+
}, [drawFrame, height, width]);
|
|
45
|
+
return React.createElement("canvas", {
|
|
46
|
+
ref,
|
|
47
|
+
...domProps,
|
|
48
|
+
className: joinClassNames(modProps.className, className),
|
|
49
|
+
onMouseEnter: modProps.onMouseEnter,
|
|
50
|
+
onMouseLeave: modProps.onMouseLeave,
|
|
51
|
+
onFocus: modProps.onFocus,
|
|
52
|
+
onBlur: modProps.onBlur,
|
|
53
|
+
onMouseDown: modProps.onMouseDown,
|
|
54
|
+
onMouseUp: modProps.onMouseUp,
|
|
55
|
+
onTouchStart: modProps.onTouchStart,
|
|
56
|
+
onTouchEnd: modProps.onTouchEnd,
|
|
57
|
+
onTouchCancel: modProps.onTouchCancel,
|
|
58
|
+
style: {
|
|
59
|
+
width: width !== undefined ? `${width}px` : undefined,
|
|
60
|
+
height: height !== undefined ? `${height}px` : undefined,
|
|
61
|
+
...modProps.style,
|
|
62
|
+
},
|
|
63
|
+
});
|
|
55
64
|
}
|
|
56
65
|
//# sourceMappingURL=canvas.js.map
|
package/dist/canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.
|
|
1
|
+
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.tsx"],"names":[],"mappings":"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"}
|