@blakesteve/roster 5.4.0 → 5.5.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/README.md +93 -0
- package/dist/components/atoms/Button/Button.cjs +1 -1
- package/dist/components/atoms/Button/Button.d.ts +11 -0
- package/dist/components/atoms/Button/Button.js +42 -32
- package/dist/components/atoms/Button/button-variants.cjs +1 -1
- package/dist/components/atoms/Button/button-variants.js +3 -1
- package/dist/components/molecules/FileUpload/FileUpload.cjs +1 -0
- package/dist/components/molecules/FileUpload/FileUpload.d.ts +111 -0
- package/dist/components/molecules/FileUpload/FileUpload.js +403 -0
- package/dist/components/molecules/FileUpload/file-rules.cjs +1 -0
- package/dist/components/molecules/FileUpload/file-rules.d.ts +22 -0
- package/dist/components/molecules/FileUpload/file-rules.js +43 -0
- package/dist/components/organisms/ModerationQueue/ModerationQueue.cjs +1 -1
- package/dist/components/organisms/ModerationQueue/ModerationQueue.js +190 -192
- package/dist/components/organisms/Navbar/Navbar.cjs +1 -1
- package/dist/components/organisms/Navbar/Navbar.d.ts +2 -0
- package/dist/components/organisms/Navbar/Navbar.js +49 -49
- package/dist/index.d.ts +1 -0
- package/dist/meta.json +3 -3
- package/dist/roster.cjs +1 -1
- package/dist/roster.css +1 -1
- package/dist/roster.js +86 -84
- package/package.json +4 -3
|
@@ -0,0 +1,403 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as g, jsx as n } from "react/jsx-runtime";
|
|
3
|
+
import { useId as vr, useState as L, useRef as p, useCallback as U, useLayoutEffect as Y, useEffect as xr } from "react";
|
|
4
|
+
import { cn as f } from "../../../lib/utils.js";
|
|
5
|
+
import { Button as G } from "../../atoms/Button/Button.js";
|
|
6
|
+
import { formatBytes as Z, acceptList as yr, sameFile as br, matchesType as kr } from "./file-rules.js";
|
|
7
|
+
const Nr = {
|
|
8
|
+
choose: "Choose photos",
|
|
9
|
+
dropHint: "or drag them here",
|
|
10
|
+
dropHere: "Drop to add them",
|
|
11
|
+
queued: "Waiting",
|
|
12
|
+
uploading: (s) => s === null ? "Uploading" : `Uploading, ${s}%`,
|
|
13
|
+
processing: "Finishing up",
|
|
14
|
+
done: "Uploaded",
|
|
15
|
+
failed: "Didn't upload.",
|
|
16
|
+
rejected: "Not added.",
|
|
17
|
+
remove: (s) => `Remove ${s}`,
|
|
18
|
+
retry: (s) => `Try ${s} again`,
|
|
19
|
+
wrongType: () => "That type of file isn't accepted.",
|
|
20
|
+
tooLarge: (s, d) => `It's over ${Z(d)}.`,
|
|
21
|
+
tooMany: (s) => `Only ${s} can be added.`,
|
|
22
|
+
duplicate: () => "It's already added.",
|
|
23
|
+
uploadError: (s) => s instanceof Error && s.message ? s.message : "Something went wrong.",
|
|
24
|
+
size: Z,
|
|
25
|
+
added: (s) => `${s} ${s === 1 ? "photo" : "photos"} added.`,
|
|
26
|
+
progress: (s, d) => `${s} of ${d} uploaded.`,
|
|
27
|
+
failedNotice: (s, d) => `${s} didn't upload. ${d}`,
|
|
28
|
+
rejectedNotice: (s, d) => `${s} wasn't added. ${d}`,
|
|
29
|
+
removed: (s) => `${s} removed.`
|
|
30
|
+
};
|
|
31
|
+
function wr({ file: s, status: d }) {
|
|
32
|
+
const [T, D] = L(!1), B = !T && (s.type.startsWith("image/") || /\.(jpe?g|png|gif|webp|avif|heic|heif)$/i.test(s.name)), $ = U(
|
|
33
|
+
(q) => {
|
|
34
|
+
if (!q) return;
|
|
35
|
+
const j = URL.createObjectURL(s);
|
|
36
|
+
return q.src = j, () => URL.revokeObjectURL(j);
|
|
37
|
+
},
|
|
38
|
+
[s]
|
|
39
|
+
), v = "rst:h-14 rst:w-14 rst:shrink-0 rst:rounded-md rst:border rst:border-[var(--roster-card-border)]";
|
|
40
|
+
return B ? /* @__PURE__ */ n(
|
|
41
|
+
"img",
|
|
42
|
+
{
|
|
43
|
+
ref: $,
|
|
44
|
+
alt: "",
|
|
45
|
+
onError: () => D(!0),
|
|
46
|
+
className: f(v, "rst:object-cover", d === "rejected" && "rst:opacity-50"),
|
|
47
|
+
"data-file-thumb": "image"
|
|
48
|
+
}
|
|
49
|
+
) : /* @__PURE__ */ n(
|
|
50
|
+
"span",
|
|
51
|
+
{
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
className: f(v, "rst:flex rst:items-center rst:justify-center rst:text-gray-500 rst:dark:text-gray-400"),
|
|
54
|
+
"data-file-thumb": "placeholder",
|
|
55
|
+
children: /* @__PURE__ */ g("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
56
|
+
/* @__PURE__ */ n("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
|
|
57
|
+
/* @__PURE__ */ n("circle", { cx: "9", cy: "10", r: "1.6" }),
|
|
58
|
+
/* @__PURE__ */ n("path", { d: "m21 15-4.2-4.2a1.6 1.6 0 0 0-2.3 0L7 18" })
|
|
59
|
+
] })
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
const V = "rst:cursor-not-allowed rst:opacity-50", I = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
|
|
64
|
+
function Dr({
|
|
65
|
+
label: s,
|
|
66
|
+
upload: d,
|
|
67
|
+
onChange: T,
|
|
68
|
+
accept: D = "image/*",
|
|
69
|
+
types: B,
|
|
70
|
+
maxSize: $,
|
|
71
|
+
maxFiles: v,
|
|
72
|
+
validate: q,
|
|
73
|
+
concurrency: j = 3,
|
|
74
|
+
helperText: S,
|
|
75
|
+
errorMessage: R,
|
|
76
|
+
disabled: c = !1,
|
|
77
|
+
strings: rr,
|
|
78
|
+
className: tr
|
|
79
|
+
}) {
|
|
80
|
+
const o = { ...Nr, ...rr }, C = vr(), F = `${C}-label`, X = `${C}-help`, _ = `${C}-error`, [z, er] = L([]), l = p(z), sr = p(0), x = p(/* @__PURE__ */ new Map()), O = p(null), J = p(null), h = p({ upload: d, onChange: T, concurrency: j, t: o, pump: () => {
|
|
81
|
+
} }), [A, nr] = L({ text: "", n: 0 }), y = p([]), b = p(null), M = U((r, e = !1) => {
|
|
82
|
+
e && (y.current = y.current.filter((t) => !t.count)), y.current.push({ text: r, count: e }), !b.current && (b.current = setTimeout(() => {
|
|
83
|
+
b.current = null;
|
|
84
|
+
const t = y.current.map((i) => i.text).join(" ");
|
|
85
|
+
y.current = [], nr((i) => ({ text: t, n: i.n + 1 }));
|
|
86
|
+
}, 0));
|
|
87
|
+
}, []), H = p(null), [ar, or] = L(0), K = (r) => {
|
|
88
|
+
H.current = r, or((e) => e + 1);
|
|
89
|
+
};
|
|
90
|
+
Y(() => {
|
|
91
|
+
const r = H.current;
|
|
92
|
+
if (!r) return;
|
|
93
|
+
H.current = null, (O.current?.querySelector(r) ?? O.current?.querySelector("[data-file-choose]"))?.focus();
|
|
94
|
+
}, [ar]);
|
|
95
|
+
const k = U((r) => {
|
|
96
|
+
l.current = r, er(r), h.current.onChange?.(r);
|
|
97
|
+
}, []), N = U(
|
|
98
|
+
(r, e) => {
|
|
99
|
+
l.current.some((t) => t.id === r) && k(l.current.map((t) => t.id === r ? { ...t, ...e } : t));
|
|
100
|
+
},
|
|
101
|
+
[k]
|
|
102
|
+
);
|
|
103
|
+
function w() {
|
|
104
|
+
const { concurrency: r } = h.current, e = l.current.filter((i) => i.status === "uploading" || i.status === "processing").length, t = l.current.filter((i) => i.status === "queued").slice(0, Math.max(0, Math.max(1, r) - e));
|
|
105
|
+
for (const i of t) ir(i);
|
|
106
|
+
}
|
|
107
|
+
function ir(r) {
|
|
108
|
+
const e = new AbortController();
|
|
109
|
+
x.current.set(r.id, e), N(r.id, { status: "uploading", progress: null, reason: void 0 });
|
|
110
|
+
const t = () => !e.signal.aborted && x.current.get(r.id) === e, i = {
|
|
111
|
+
onProgress: (a) => {
|
|
112
|
+
if (!t()) return;
|
|
113
|
+
const u = Math.round(Math.min(1, Math.max(0, Number.isFinite(a) ? a : 0)) * 100) / 100, m = l.current.find((mr) => mr.id === r.id);
|
|
114
|
+
m?.status === "uploading" && m.progress !== u && N(r.id, { progress: u });
|
|
115
|
+
},
|
|
116
|
+
onProcessing: () => {
|
|
117
|
+
t() && N(r.id, { status: "processing" });
|
|
118
|
+
},
|
|
119
|
+
signal: e.signal
|
|
120
|
+
};
|
|
121
|
+
new Promise((a) => a(h.current.upload(r.file, i))).then(
|
|
122
|
+
(a) => {
|
|
123
|
+
if (!t()) return;
|
|
124
|
+
x.current.delete(r.id), N(r.id, { status: "done", progress: 1, result: a });
|
|
125
|
+
const u = l.current.filter((m) => m.status !== "rejected");
|
|
126
|
+
M(h.current.t.progress(u.filter((m) => m.status === "done").length, u.length), !0), w();
|
|
127
|
+
},
|
|
128
|
+
(a) => {
|
|
129
|
+
if (!t()) return;
|
|
130
|
+
x.current.delete(r.id);
|
|
131
|
+
const u = h.current.t.uploadError(a);
|
|
132
|
+
N(r.id, { status: "failed", reason: u }), M(h.current.t.failedNotice(r.file.name, u)), w();
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
Y(() => {
|
|
137
|
+
h.current = { upload: d, onChange: T, concurrency: j, t: o, pump: w };
|
|
138
|
+
}), xr(() => {
|
|
139
|
+
const r = x.current;
|
|
140
|
+
return l.current.some((t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id)) && (k(
|
|
141
|
+
l.current.map(
|
|
142
|
+
(t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id) ? { ...t, status: "queued", progress: null } : t
|
|
143
|
+
)
|
|
144
|
+
), h.current.pump()), () => {
|
|
145
|
+
for (const t of r.values()) t.abort();
|
|
146
|
+
r.clear(), b.current && clearTimeout(b.current), b.current = null, y.current = [];
|
|
147
|
+
};
|
|
148
|
+
}, [k]);
|
|
149
|
+
const cr = B ?? yr(D), dr = (r, e) => {
|
|
150
|
+
if (e.some((i) => br(i.file, r))) return o.duplicate(r);
|
|
151
|
+
const t = q?.(r);
|
|
152
|
+
if (t) return t;
|
|
153
|
+
if (!kr(r, cr)) return o.wrongType(r);
|
|
154
|
+
if ($ !== void 0 && r.size > $) return o.tooLarge(r, $);
|
|
155
|
+
if (v !== void 0 && e.length >= v) return o.tooMany(v);
|
|
156
|
+
}, Q = (r) => {
|
|
157
|
+
if (c || r.length === 0) return;
|
|
158
|
+
const e = l.current.filter((a) => a.status !== "rejected"), t = [];
|
|
159
|
+
for (const a of r) {
|
|
160
|
+
const u = dr(a, [...e, ...t.filter((m) => m.status !== "rejected")]);
|
|
161
|
+
t.push({ id: `${C}-file-${sr.current++}`, file: a, status: u ? "rejected" : "queued", progress: null, reason: u });
|
|
162
|
+
}
|
|
163
|
+
k([...l.current, ...t]);
|
|
164
|
+
const i = t.filter((a) => a.status === "queued").length;
|
|
165
|
+
i && M(o.added(i));
|
|
166
|
+
for (const a of t) a.reason && M(o.rejectedNotice(a.file.name, a.reason));
|
|
167
|
+
w();
|
|
168
|
+
}, lr = (r) => {
|
|
169
|
+
if (c) return;
|
|
170
|
+
const e = l.current, t = e.findIndex((a) => a.id === r);
|
|
171
|
+
if (t < 0) return;
|
|
172
|
+
x.current.get(r)?.abort(), x.current.delete(r);
|
|
173
|
+
const i = e[t + 1] ?? e[t - 1];
|
|
174
|
+
k(e.filter((a) => a.id !== r)), M(o.removed(e[t].file.name)), K(i ? `[data-file-remove="${i.id}"]` : "[data-file-choose]"), w();
|
|
175
|
+
}, ur = (r) => {
|
|
176
|
+
c || (N(r, { status: "queued", progress: null, reason: void 0 }), K(`[data-file-remove="${r}"]`), w());
|
|
177
|
+
}, [fr, W] = L(0), E = (r) => Array.from(r.dataTransfer?.types ?? []).includes("Files"), pr = {
|
|
178
|
+
onDragEnter: (r) => {
|
|
179
|
+
E(r) && (r.preventDefault(), W((e) => e + 1));
|
|
180
|
+
},
|
|
181
|
+
onDragOver: (r) => {
|
|
182
|
+
E(r) && (r.preventDefault(), r.dataTransfer.dropEffect = c ? "none" : "copy");
|
|
183
|
+
},
|
|
184
|
+
onDragLeave: (r) => {
|
|
185
|
+
E(r) && W((e) => Math.max(0, e - 1));
|
|
186
|
+
},
|
|
187
|
+
onDrop: (r) => {
|
|
188
|
+
E(r) && (r.preventDefault(), W(0), Q(Array.from(r.dataTransfer.files)));
|
|
189
|
+
}
|
|
190
|
+
}, P = fr > 0 && !c, gr = (r) => {
|
|
191
|
+
switch (r.status) {
|
|
192
|
+
case "queued":
|
|
193
|
+
return o.queued;
|
|
194
|
+
case "uploading":
|
|
195
|
+
return o.uploading(r.progress === null ? null : Math.round(r.progress * 100));
|
|
196
|
+
case "processing":
|
|
197
|
+
return o.processing;
|
|
198
|
+
case "done":
|
|
199
|
+
return o.done;
|
|
200
|
+
case "failed":
|
|
201
|
+
return `${o.failed} ${r.reason ?? ""}`.trim();
|
|
202
|
+
case "rejected":
|
|
203
|
+
return `${o.rejected} ${r.reason ?? ""}`.trim();
|
|
204
|
+
}
|
|
205
|
+
}, hr = [S ? X : null, R ? _ : null].filter(Boolean).join(" ") || void 0;
|
|
206
|
+
return /* @__PURE__ */ g(
|
|
207
|
+
"div",
|
|
208
|
+
{
|
|
209
|
+
ref: O,
|
|
210
|
+
role: "group",
|
|
211
|
+
"aria-labelledby": F,
|
|
212
|
+
className: f("rst:font-ui rst:w-full", tr),
|
|
213
|
+
"data-file-upload": "",
|
|
214
|
+
children: [
|
|
215
|
+
/* @__PURE__ */ n(
|
|
216
|
+
"p",
|
|
217
|
+
{
|
|
218
|
+
id: F,
|
|
219
|
+
className: f(
|
|
220
|
+
"rst:mb-1.5 rst:text-left rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)]",
|
|
221
|
+
c && "rst:opacity-70"
|
|
222
|
+
),
|
|
223
|
+
children: s
|
|
224
|
+
}
|
|
225
|
+
),
|
|
226
|
+
/* @__PURE__ */ g(
|
|
227
|
+
"div",
|
|
228
|
+
{
|
|
229
|
+
...pr,
|
|
230
|
+
"data-file-drop": "",
|
|
231
|
+
"data-dragging": P ? "" : void 0,
|
|
232
|
+
className: f(
|
|
233
|
+
"rst:flex rst:flex-col rst:items-center rst:justify-center rst:gap-2 rst:rounded-lg rst:border-2 rst:border-dashed rst:px-4 rst:py-6 rst:text-center rst:transition-colors rst:motion-reduce:transition-none",
|
|
234
|
+
P ? "rst:border-primary-500 rst:bg-primary-500/10" : R ? "rst:border-error-500 rst:dark:border-error-400" : "rst:border-gray-300 rst:dark:border-gray-600"
|
|
235
|
+
),
|
|
236
|
+
children: [
|
|
237
|
+
/* @__PURE__ */ n(
|
|
238
|
+
G,
|
|
239
|
+
{
|
|
240
|
+
type: "button",
|
|
241
|
+
variant: "outline",
|
|
242
|
+
colorScheme: "neutral",
|
|
243
|
+
size: "lg",
|
|
244
|
+
className: f("rst:px-5", c && V),
|
|
245
|
+
"aria-disabled": c || void 0,
|
|
246
|
+
"aria-describedby": hr,
|
|
247
|
+
onClick: () => J.current?.click(),
|
|
248
|
+
"data-file-choose": "",
|
|
249
|
+
startIcon: /* @__PURE__ */ n("svg", { ...I, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M12 16V4M7 9l5-5 5 5M5 20h14" }) }),
|
|
250
|
+
children: o.choose
|
|
251
|
+
}
|
|
252
|
+
),
|
|
253
|
+
/* @__PURE__ */ n(
|
|
254
|
+
"p",
|
|
255
|
+
{
|
|
256
|
+
className: "rst:hidden rst:text-xs rst:text-gray-600 rst:pointer-fine:block rst:dark:text-gray-400",
|
|
257
|
+
"data-file-drop-hint": "",
|
|
258
|
+
children: P ? o.dropHere : o.dropHint
|
|
259
|
+
}
|
|
260
|
+
),
|
|
261
|
+
/* @__PURE__ */ n(
|
|
262
|
+
"input",
|
|
263
|
+
{
|
|
264
|
+
ref: J,
|
|
265
|
+
type: "file",
|
|
266
|
+
hidden: !0,
|
|
267
|
+
tabIndex: -1,
|
|
268
|
+
accept: D,
|
|
269
|
+
multiple: v !== 1,
|
|
270
|
+
disabled: c,
|
|
271
|
+
onChange: (r) => {
|
|
272
|
+
Q(Array.from(r.currentTarget.files ?? [])), r.currentTarget.value = "";
|
|
273
|
+
},
|
|
274
|
+
"data-file-input": ""
|
|
275
|
+
}
|
|
276
|
+
)
|
|
277
|
+
]
|
|
278
|
+
}
|
|
279
|
+
),
|
|
280
|
+
S && /* @__PURE__ */ n("p", { id: X, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", children: S }),
|
|
281
|
+
R && /* @__PURE__ */ n("p", { id: _, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:font-medium rst:text-error-600 rst:dark:text-error-400", children: R }),
|
|
282
|
+
z.length > 0 && /* @__PURE__ */ n("ul", { className: "rst:mt-3 rst:flex rst:flex-col rst:gap-2", "aria-labelledby": F, children: z.map((r) => {
|
|
283
|
+
const e = r.status === "failed" || r.status === "rejected", t = r.status === "uploading" || r.status === "processing" || r.status === "queued";
|
|
284
|
+
return /* @__PURE__ */ g(
|
|
285
|
+
"li",
|
|
286
|
+
{
|
|
287
|
+
"data-file-item": r.id,
|
|
288
|
+
"data-status": r.status,
|
|
289
|
+
className: "rst:flex rst:items-center rst:gap-3 rst:rounded-md rst:border rst:border-[var(--roster-card-border)] rst:p-2",
|
|
290
|
+
children: [
|
|
291
|
+
/* @__PURE__ */ n(wr, { file: r.file, status: r.status }),
|
|
292
|
+
/* @__PURE__ */ g("div", { className: "rst:min-w-0 rst:flex-1 rst:text-left", children: [
|
|
293
|
+
/* @__PURE__ */ n("p", { className: "rst:truncate rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", title: r.file.name, children: r.file.name }),
|
|
294
|
+
/* @__PURE__ */ g(
|
|
295
|
+
"p",
|
|
296
|
+
{
|
|
297
|
+
className: f(
|
|
298
|
+
"rst:mt-0.5 rst:flex rst:items-start rst:gap-1 rst:text-xs",
|
|
299
|
+
e ? "rst:text-error-600 rst:dark:text-error-400" : "rst:text-gray-600 rst:dark:text-gray-400"
|
|
300
|
+
),
|
|
301
|
+
"data-file-status": "",
|
|
302
|
+
children: [
|
|
303
|
+
r.status === "done" && /* @__PURE__ */ n("svg", { ...I, width: 14, height: 14, "aria-hidden": "true", className: "rst:mt-px rst:shrink-0 rst:text-success-600 rst:dark:text-success-400", children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) }),
|
|
304
|
+
/* @__PURE__ */ g("span", { children: [
|
|
305
|
+
/* @__PURE__ */ n("span", { className: "rst:tabular-nums", children: o.size(r.file.size) }),
|
|
306
|
+
/* @__PURE__ */ n("span", { "aria-hidden": "true", children: " · " }),
|
|
307
|
+
gr(r)
|
|
308
|
+
] })
|
|
309
|
+
]
|
|
310
|
+
}
|
|
311
|
+
),
|
|
312
|
+
t && /* @__PURE__ */ n(
|
|
313
|
+
"div",
|
|
314
|
+
{
|
|
315
|
+
role: "progressbar",
|
|
316
|
+
"aria-label": r.file.name,
|
|
317
|
+
"aria-valuemin": 0,
|
|
318
|
+
"aria-valuemax": 100,
|
|
319
|
+
"aria-valuenow": r.status === "uploading" && r.progress !== null ? Math.round(r.progress * 100) : void 0,
|
|
320
|
+
className: f(
|
|
321
|
+
"rst:mt-1.5 rst:h-1.5 rst:overflow-hidden rst:rounded-full rst:bg-gray-200 rst:dark:bg-gray-700",
|
|
322
|
+
/* Under way with no figure yet: the track pulses and the
|
|
323
|
+
fill waits at zero, so the first figure grows it
|
|
324
|
+
rather than shrinking a full bar. */
|
|
325
|
+
r.status === "uploading" && r.progress === null && "rst:animate-pulse rst:motion-reduce:animate-none"
|
|
326
|
+
),
|
|
327
|
+
"data-file-progress": "",
|
|
328
|
+
children: /* @__PURE__ */ n(
|
|
329
|
+
"div",
|
|
330
|
+
{
|
|
331
|
+
className: f(
|
|
332
|
+
"rst:h-full rst:origin-left rst:rounded-full rst:bg-primary-600 rst:transition-transform rst:motion-reduce:transition-none rst:dark:bg-primary-400",
|
|
333
|
+
/* On the server: full, and pulsing, since there's no figure to give. */
|
|
334
|
+
r.status === "processing" && "rst:animate-pulse rst:motion-reduce:animate-none"
|
|
335
|
+
),
|
|
336
|
+
style: {
|
|
337
|
+
transform: `scaleX(${r.status === "processing" ? 1 : r.status === "uploading" ? r.progress ?? 0 : 0})`
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
)
|
|
341
|
+
}
|
|
342
|
+
)
|
|
343
|
+
] }),
|
|
344
|
+
r.status === "failed" && /* @__PURE__ */ n(
|
|
345
|
+
G,
|
|
346
|
+
{
|
|
347
|
+
type: "button",
|
|
348
|
+
variant: "ghost",
|
|
349
|
+
colorScheme: "neutral",
|
|
350
|
+
size: "icon",
|
|
351
|
+
className: f("rst:h-11 rst:w-11", c && V),
|
|
352
|
+
"aria-disabled": c || void 0,
|
|
353
|
+
"aria-label": o.retry(r.file.name),
|
|
354
|
+
onClick: () => ur(r.id),
|
|
355
|
+
"data-file-retry": r.id,
|
|
356
|
+
children: /* @__PURE__ */ g("svg", { ...I, "aria-hidden": "true", children: [
|
|
357
|
+
/* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
|
|
358
|
+
/* @__PURE__ */ n("path", { d: "M3 3v5h5" })
|
|
359
|
+
] })
|
|
360
|
+
}
|
|
361
|
+
),
|
|
362
|
+
/* @__PURE__ */ n(
|
|
363
|
+
G,
|
|
364
|
+
{
|
|
365
|
+
type: "button",
|
|
366
|
+
variant: "ghost",
|
|
367
|
+
colorScheme: "neutral",
|
|
368
|
+
size: "icon",
|
|
369
|
+
className: f("rst:h-11 rst:w-11", c && V),
|
|
370
|
+
"aria-disabled": c || void 0,
|
|
371
|
+
"aria-label": o.remove(r.file.name),
|
|
372
|
+
onClick: () => lr(r.id),
|
|
373
|
+
"data-file-remove": r.id,
|
|
374
|
+
children: /* @__PURE__ */ n("svg", { ...I, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M18 6 6 18M6 6l12 12" }) })
|
|
375
|
+
}
|
|
376
|
+
)
|
|
377
|
+
]
|
|
378
|
+
},
|
|
379
|
+
r.id
|
|
380
|
+
);
|
|
381
|
+
}) }),
|
|
382
|
+
/* @__PURE__ */ g(
|
|
383
|
+
"div",
|
|
384
|
+
{
|
|
385
|
+
role: "status",
|
|
386
|
+
"aria-live": "polite",
|
|
387
|
+
"aria-atomic": "true",
|
|
388
|
+
className: "rst:sr-only",
|
|
389
|
+
"data-file-live": "",
|
|
390
|
+
"data-file-live-n": A.n,
|
|
391
|
+
children: [
|
|
392
|
+
A.text,
|
|
393
|
+
A.n % 2 ? " " : ""
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
)
|
|
397
|
+
]
|
|
398
|
+
}
|
|
399
|
+
);
|
|
400
|
+
}
|
|
401
|
+
export {
|
|
402
|
+
Dr as FileUpload
|
|
403
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s={jpg:"image/jpeg",jpeg:"image/jpeg",jfif:"image/jpeg",png:"image/png",gif:"image/gif",webp:"image/webp",avif:"image/avif",heic:"image/heic",heif:"image/heif",bmp:"image/bmp",tif:"image/tiff",tiff:"image/tiff",pdf:"application/pdf"},r=e=>{const t=e.lastIndexOf(".");return t>0?e.slice(t+1).toLowerCase():""};function a(e){return(e.type||s[r(e.name)]||"").toLowerCase()}function m(e,t){if(t.length===0)return!0;const n=a(e),f=r(e.name);return t.some(o=>{const i=o.trim().toLowerCase();return i?i.startsWith(".")?f===i.slice(1):i.endsWith("/*")?n.startsWith(i.slice(0,-1)):n===i:!1})}const p=e=>e.split(",").map(t=>t.trim()).filter(Boolean),c=(e,t)=>e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified;function g(e){if(e<1024)return`${e} B`;if(e<1024*1024)return`${Math.round(e/1024)} KB`;const t=e/(1024*1024);return`${t<9.95?t.toFixed(1).replace(/\.0$/,""):Math.round(t)} MB`}exports.acceptList=p;exports.formatBytes=g;exports.matchesType=m;exports.sameFile=c;exports.typeOf=a;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The rules FileUpload checks a picked or dropped file against, kept apart
|
|
3
|
+
* from the component so they can be tested on their own.
|
|
4
|
+
*/
|
|
5
|
+
/** The file's type as reported, or as its extension implies when none is. */
|
|
6
|
+
export declare function typeOf(file: Pick<File, "name" | "type">): string;
|
|
7
|
+
/**
|
|
8
|
+
* Whether `file` matches one of `accepted`, written the way an `accept`
|
|
9
|
+
* attribute is: a type (`image/png`), a family (`image/*`) or an extension
|
|
10
|
+
* (`.png`). An empty list accepts anything.
|
|
11
|
+
*/
|
|
12
|
+
export declare function matchesType(file: Pick<File, "name" | "type">, accepted: readonly string[]): boolean;
|
|
13
|
+
/** An `accept` attribute's value, as a list. */
|
|
14
|
+
export declare const acceptList: (accept: string) => string[];
|
|
15
|
+
/** The same file picked twice: same name, size and modified time. */
|
|
16
|
+
export declare const sameFile: (a: File, b: File) => boolean;
|
|
17
|
+
/**
|
|
18
|
+
* A byte count as a short size: "820 KB", "2.4 MB". In units of 1,024, the way
|
|
19
|
+
* a limit is usually written (`15 * 1024 * 1024`), so that limit reads back as
|
|
20
|
+
* "15 MB" rather than "15.7 MB".
|
|
21
|
+
*/
|
|
22
|
+
export declare function formatBytes(bytes: number): string;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const o = {
|
|
2
|
+
jpg: "image/jpeg",
|
|
3
|
+
jpeg: "image/jpeg",
|
|
4
|
+
jfif: "image/jpeg",
|
|
5
|
+
png: "image/png",
|
|
6
|
+
gif: "image/gif",
|
|
7
|
+
webp: "image/webp",
|
|
8
|
+
avif: "image/avif",
|
|
9
|
+
heic: "image/heic",
|
|
10
|
+
heif: "image/heif",
|
|
11
|
+
bmp: "image/bmp",
|
|
12
|
+
tif: "image/tiff",
|
|
13
|
+
tiff: "image/tiff",
|
|
14
|
+
pdf: "application/pdf"
|
|
15
|
+
}, r = (e) => {
|
|
16
|
+
const t = e.lastIndexOf(".");
|
|
17
|
+
return t > 0 ? e.slice(t + 1).toLowerCase() : "";
|
|
18
|
+
};
|
|
19
|
+
function s(e) {
|
|
20
|
+
return (e.type || o[r(e.name)] || "").toLowerCase();
|
|
21
|
+
}
|
|
22
|
+
function m(e, t) {
|
|
23
|
+
if (t.length === 0) return !0;
|
|
24
|
+
const n = s(e), a = r(e.name);
|
|
25
|
+
return t.some((f) => {
|
|
26
|
+
const i = f.trim().toLowerCase();
|
|
27
|
+
return i ? i.startsWith(".") ? a === i.slice(1) : i.endsWith("/*") ? n.startsWith(i.slice(0, -1)) : n === i : !1;
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
const p = (e) => e.split(",").map((t) => t.trim()).filter(Boolean), g = (e, t) => e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
|
|
31
|
+
function c(e) {
|
|
32
|
+
if (e < 1024) return `${e} B`;
|
|
33
|
+
if (e < 1024 * 1024) return `${Math.round(e / 1024)} KB`;
|
|
34
|
+
const t = e / (1024 * 1024);
|
|
35
|
+
return `${t < 9.95 ? t.toFixed(1).replace(/\.0$/, "") : Math.round(t)} MB`;
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
p as acceptList,
|
|
39
|
+
c as formatBytes,
|
|
40
|
+
m as matchesType,
|
|
41
|
+
g as sameFile,
|
|
42
|
+
s as typeOf
|
|
43
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),z=require("../../../lib/utils.cjs"),xe=require("../../atoms/Button/Button.cjs"),Oe=require("../../atoms/Card/Card.cjs"),he=require("../../atoms/Spinner/Spinner.cjs"),Pe=require("../../atoms/Textarea/Textarea.cjs"),Z=require("../../molecules/Alert/Alert.cjs"),ze=require("../../molecules/EmptyState/EmptyState.cjs"),De=require("../../molecules/RadioGroup/RadioGroup.cjs"),He=require("./queue-actions.cjs"),pe={primary:{colorScheme:"primary",variant:"solid"},success:{colorScheme:"success",variant:"solid"},danger:{colorScheme:"error",variant:"soft"},neutral:{colorScheme:"neutral",variant:"outline"}},Ke={edit:He.editAction},R=o=>o.edit?o:null,Qe=o=>o===0?"None left.":`${o} left.`,Ge=o=>Math.min(6,Math.max(1,o)),We=o=>o instanceof Error&&o.message?o.message:"Something went wrong.";function B(o,f){const p={...o};return delete p[f],p}function _({busy:o=!1,blocked:f=!1,onClick:p,children:j,className:v,...y}){const g=o||f;return n.jsx(xe.Button,{size:"lg",...y,"aria-disabled":g||void 0,"aria-busy":o||void 0,startIcon:o?n.jsx(he.Spinner,{size:"sm",variant:"current"}):void 0,className:z.cn(f&&!o&&"rst:cursor-not-allowed rst:opacity-50",v),onClick:T=>{if(g){T.preventDefault();return}p?.(T)},children:j})}function Je({label:o,hideLabel:f=!1,headingLevel:p=2,itemHeadingLevel:j,items:v,getKey:y,itemLabel:g,renderMeta:T,renderContent:ve,actions:D,status:ee="ready",error:be,onRetry:te,empty:re={title:"Nothing waiting"},density:ne="comfortable",footer:ye,className:Se}){const je=typeof D=="function"?D(Ke):D,N=a.useId(),q=a.useRef(null),k=v.map(y),E=a.useRef(new Map);E.current=new Map(v.map((e,t)=>[k[t],e]));const[H,qe]=a.useState({}),$=a.useRef({}),se=e=>{$.current=e($.current),qe($.current)},[oe,F]=a.useState({}),[ce,ke]=a.useState({}),x=a.useRef({}),h=(e,t)=>{x.current=t?{...x.current,[e]:t}:B(x.current,e),ke(x.current)},[K,$e]=a.useState({text:"",n:0}),Q=a.useRef([]),w=a.useRef(null),ie=a.useCallback(e=>{Q.current.push(e),!w.current&&(w.current=setTimeout(()=>{w.current=null;const t=Q.current.join(" ");Q.current=[],$e(r=>({text:t,n:r.n+1}))},0))},[]);a.useLayoutEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]);const[Re,Ne]=a.useState(0),G=a.useRef(null),S=a.useCallback(e=>{G.current=e,Ne(t=>t+1)},[]),ae=a.useCallback(e=>{const t=q.current;if(!t)return null;const r="key"in e?CSS.escape(e.key):"";switch(e.kind){case"item":return t.querySelector(`[data-queue-item="${r}"]`);case"empty":return t.querySelector("[data-queue-empty]");case"trigger":return t.querySelector(`[data-queue-item="${r}"] [data-queue-action="${CSS.escape(e.actionId)}"]`);case"step":return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`)}},[]);a.useLayoutEffect(()=>{const e=G.current;if(!e)return;G.current=null,(ae(e)??q.current?.querySelector("[data-queue-item]")??q.current?.querySelector("[data-queue-empty]"))?.focus()},[Re,ae]);const W=a.useRef(null),we=e=>()=>{W.current=e},Ce=e=>{e.relatedTarget&&!q.current?.contains(e.relatedTarget)&&(W.current=null)},A=e=>{if(W.current!==e)return!1;const t=document.activeElement;return!t||t===document.body?!0:q.current?.contains(t)?!!t.closest(`[data-queue-item="${CSS.escape(e)}"]`):!1},C=a.useRef(null),M=(e,t)=>{C.current=t,h(e.key,{...e,open:!1})},le=a.useRef(k),J=a.useRef(new Map),[,Ie]=a.useState(0),U=a.useRef(new Set),ue=(e,t,r)=>{const c=t.indexOf(e),d=t.slice(c+1).find(i=>r.has(i));if(d)return{kind:"item",key:d};const s=t.slice(0,c).reverse().find(i=>r.has(i));return s?{kind:"item",key:s}:{kind:"empty"}};a.useLayoutEffect(()=>{const e=le.current;le.current=k;const t=new Set(k),r=J.current;J.current=new Map;const c=[];let d=!1;for(const[s,i]of r){const l=t.has(s);c.push(i.announce??i.sentence),l||(d=!0),U.current.delete(s);const u=l?{kind:"trigger",key:s,actionId:i.actionId}:e.includes(s)?ue(s,e,t):null,m=x.current[s];if(m?.surface)M(m,u??{kind:"empty"});else{const I=A(s);m&&h(s,null),u&&I&&S(u)}}for(const s of e.filter(i=>!t.has(i))){if(r.has(s))continue;F(m=>s in m?B(m,s):m);const i=ue(s,e,t),l=C.current;if(l&&"key"in l&&l.key===s&&(C.current=i),$.current[s]){U.current.add(s),A(s)&&S(i);continue}const u=x.current[s];if(u&&!(u.surface&&!u.open))if(c.push(`${u.label} was decided elsewhere.`),d=!0,u.surface)M(u,i);else{const m=A(s);h(s,null),m&&S(i)}else!u&&A(s)&&S(i)}c.length&&ie(`${c.join(" ")}${d?` ${Qe(k.length)}`:""}`)});const L=async(e,t,r,c)=>{const d=E.current.get(e)??t,s=g(d),i=r.edit?R(r).run:r.run;se(l=>({...l,[e]:r.id})),F(l=>B(l,e));try{const l=await i(d,c);J.current.set(e,{actionId:r.id,sentence:`${r.done??r.label}: ${s}.`,announce:l?l.announce:void 0}),Ie(u=>u+1)}catch(l){const u=We(l);ie(`${r.label} didn't go through for ${s}. ${u}`);const m=x.current[e];U.current.delete(e)?m?.surface?M(m,{kind:"empty"}):m&&h(e,null):m?h(e,{...m,error:u}):F(I=>({...I,[e]:u}))}finally{se(l=>B(l,e))}},Be=(e,t)=>{const r=y(e),c=R(t);if(!t.confirm&&!t.reason&&!c){L(r,e,t,{});return}F(d=>B(d,r)),h(r,{key:r,label:g(e),item:e,action:t,draft:c?c.edit.initial(e):void 0,reason:{},surface:!!c?.edit.surface,open:!0}),c?.edit.surface||S({kind:"step",key:r})},V=e=>{const t=x.current[e];if(!t||$.current[e])return;const r={kind:"trigger",key:e,actionId:t.action.id};t.surface?M(t,r):(h(e,null),S(r))},Te=e=>{const t=x.current[e];!t||$.current[e]||ge(t,E.current.get(e)??t.item)||(t.action.edit?L(e,t.item,t.action,{draft:t.draft}):t.action.reason?L(e,t.item,t.action,{reason:Ue(t.reason)}):L(e,t.item,t.action,{}))},Ee=e=>{const t=C.current;C.current=null,h(e,null),t&&S(t)},Fe=`h${p}`,de=j??Ge(p+1),Ae=`h${de}`,X=`${N}-label`,fe=(e,t)=>{const{action:r}=e,c=R(r),d=E.current.get(e.key)??e.item,s=!!H[e.key],i=ge(e,d),l=`${N}-step-${t}-message`,u=n.jsx(_,{...pe[r.tone??"neutral"],busy:s,blocked:!!i,"aria-describedby":i?l:void 0,onClick:()=>Te(e.key),"data-queue-submit":"",children:c?c.edit.submitLabel:r.label}),m=n.jsx(_,{variant:"ghost",colorScheme:"neutral",blocked:s,onClick:()=>V(e.key),children:"Cancel"}),I=n.jsxs(n.Fragment,{children:[r.reason&&n.jsx(Ve,{id:`${N}-step-${t}`,step:r.reason,value:e.reason,disabled:s,onChange:Y=>h(e.key,{...x.current[e.key],reason:Y})}),c&&n.jsx(c.edit.Form,{item:d,value:e.draft,onChange:Y=>h(e.key,{...x.current[e.key],draft:Y})}),i&&n.jsx("p",{id:l,className:"rst:text-sm rst:text-error-600 rst:dark:text-error-400","data-queue-validation":"",children:i}),e.error&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:e.error})]});return{submitButton:u,cancelButton:m,fields:I}},Me=(e,t)=>{const{submitButton:r,cancelButton:c,fields:d}=fe(e,t),s=`${N}-step-${t}-prompt`,i=R(e.action),l=e.action.confirm?.prompt??e.action.reason?.prompt??i?.edit.title;return n.jsxs("div",{role:"group","aria-labelledby":s,tabIndex:-1,"data-queue-step":"",onKeyDown:u=>{u.key==="Escape"&&(u.stopPropagation(),V(e.key))},className:"rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:[n.jsx("p",{id:s,className:"rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:l}),i?.edit.description&&n.jsx("p",{className:"rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:i.edit.description}),d,n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:gap-2",children:[r,c]})]})},Le=(e,t)=>{const r=H[t];return n.jsx("div",{role:"group","aria-label":`Decide: ${g(e)}`,className:"rst:flex rst:flex-wrap rst:gap-2",children:je.filter(c=>!c.hidden?.(e)).map(c=>n.jsx(_,{...pe[c.tone??"neutral"],"data-queue-action":c.id,busy:r===c.id,blocked:!!r&&r!==c.id,onClick:()=>Be(e,c),children:c.label},c.id))})},b=Object.values(ce).find(e=>e.surface)??null,O=b?R(b.action):null,me=O?.edit.surface,P=b?fe(b,-1):null;return n.jsxs("section",{ref:q,"aria-labelledby":X,onBlur:Ce,className:z.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",Se),children:[n.jsx(Fe,{id:X,className:z.cn("rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",f&&"rst:sr-only"),children:o}),n.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-queue-live":"","data-queue-live-n":K.n,children:[K.text,K.n%2?" ":""]}),ee==="loading"?n.jsx("div",{className:"rst:flex rst:justify-center rst:py-12","aria-busy":"true",children:n.jsx(he.Spinner,{size:"lg",label:`Loading ${o}`})}):ee==="error"?n.jsx(Z.Alert,{colorScheme:"error",children:n.jsxs("div",{className:"rst:flex rst:flex-col rst:items-start rst:gap-3",children:[n.jsx("div",{children:be??"The queue couldn't load."}),te&&n.jsx(xe.Button,{size:"lg",variant:"outline",colorScheme:"neutral",onClick:te,children:"Retry"})]})}):v.length===0?n.jsx(ze.EmptyState,{title:re.title,description:re.description,headingLevel:de,tabIndex:-1,"data-queue-empty":"",className:"rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"}):n.jsx("ul",{role:"list","aria-labelledby":X,className:"rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",children:v.map((e,t)=>{const r=k[t],c=`${N}-item-${t}`,d=T?.(e),s=ce[r];return n.jsx("li",{children:n.jsx("article",{"data-queue-item":r,tabIndex:-1,"aria-labelledby":c,onFocus:we(r),className:"rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:n.jsx(Oe.Card,{padding:ne==="compact"?"sm":"md",children:n.jsxs("div",{className:z.cn("rst:flex rst:flex-col",ne==="compact"?"rst:gap-3":"rst:gap-4"),children:[n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1",children:[n.jsx(Ae,{id:c,className:"rst:text-base rst:font-semibold",children:g(e)}),d&&n.jsx("div",{className:"rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:d})]}),n.jsx("div",{className:"rst:min-w-0",children:ve(e)}),oe[r]&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:oe[r]}),s&&!s.surface?Me(s,t):Le(e,r)]})})})},r)})}),ye,me&&b&&O&&P&&n.jsx(me,{open:b.open,title:O.edit.title,description:O.edit.description,busy:!!H[b.key],onCancel:()=>V(b.key),onAfterClose:()=>Ee(b.key),submitButton:P.submitButton,cancelButton:P.cancelButton,children:n.jsx("div",{className:"rst:flex rst:flex-col rst:gap-4",children:P.fields})})]})}function ge(o,f){const p=R(o.action);if(p)return p.edit.validate?.(o.draft,f);if(o.action.reason){if(o.action.reason.required&&!o.reason.value)return"Pick a reason.";if(o.action.reason.note==="required"&&!o.reason.note?.trim())return"Add a note."}}function Ue(o){const f=o.note?.trim();return{...o.value?{value:o.value}:{},...f?{note:f}:{}}}function Ve({id:o,step:f,value:p,disabled:j,onChange:v}){const y=f.note??"optional";return n.jsxs(n.Fragment,{children:[f.options&&f.options.length>0&&n.jsx(De.RadioGroup,{label:f.required?"Reason":"Reason (optional)",options:f.options,value:p.value??"",onChange:g=>v({...p,value:g}),disabled:j}),y!=="none"&&n.jsx(Pe.Textarea,{id:`${o}-note`,label:f.noteLabel??(y==="required"?"Note":"Note (optional)"),rows:3,value:p.note??"",onChange:g=>v({...p,note:g.target.value}),disabled:j})]})}exports.ModerationQueue=Je;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),P=require("../../../lib/utils.cjs"),ge=require("../../atoms/Button/Button.cjs"),Le=require("../../atoms/Card/Card.cjs"),Oe=require("../../atoms/Spinner/Spinner.cjs"),Pe=require("../../atoms/Textarea/Textarea.cjs"),Y=require("../../molecules/Alert/Alert.cjs"),ze=require("../../molecules/EmptyState/EmptyState.cjs"),De=require("../../molecules/RadioGroup/RadioGroup.cjs"),He=require("./queue-actions.cjs"),me={primary:{colorScheme:"primary",variant:"solid"},success:{colorScheme:"success",variant:"solid"},danger:{colorScheme:"error",variant:"soft"},neutral:{colorScheme:"neutral",variant:"outline"}},Ke={edit:He.editAction},R=c=>c.edit?c:null,Qe=c=>c===0?"None left.":`${c} left.`,Ge=c=>Math.min(6,Math.max(1,c)),We=c=>c instanceof Error&&c.message?c.message:"Something went wrong.";function B(c,d){const p={...c};return delete p[d],p}function Z({busy:c=!1,blocked:d=!1,onClick:p,children:j,className:v,...y}){return n.jsx(ge.Button,{size:"lg",...y,isLoading:c,"aria-disabled":d||void 0,className:P.cn(d&&!c&&"rst:cursor-not-allowed rst:opacity-50",v),onClick:g=>{if(d){g.preventDefault();return}p?.(g)},children:j})}function Je({label:c,hideLabel:d=!1,headingLevel:p=2,itemHeadingLevel:j,items:v,getKey:y,itemLabel:g,renderMeta:xe,renderContent:he,actions:z,status:_="ready",error:ve,onRetry:ee,empty:te={title:"Nothing waiting"},density:re="comfortable",footer:be,className:ye}){const Se=typeof z=="function"?z(Ke):z,N=a.useId(),q=a.useRef(null),k=v.map(y),T=a.useRef(new Map);T.current=new Map(v.map((e,t)=>[k[t],e]));const[D,je]=a.useState({}),$=a.useRef({}),ne=e=>{$.current=e($.current),je($.current)},[se,E]=a.useState({}),[oe,qe]=a.useState({}),x=a.useRef({}),h=(e,t)=>{x.current=t?{...x.current,[e]:t}:B(x.current,e),qe(x.current)},[H,ke]=a.useState({text:"",n:0}),K=a.useRef([]),w=a.useRef(null),ce=a.useCallback(e=>{K.current.push(e),!w.current&&(w.current=setTimeout(()=>{w.current=null;const t=K.current.join(" ");K.current=[],ke(r=>({text:t,n:r.n+1}))},0))},[]);a.useLayoutEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]);const[$e,Re]=a.useState(0),Q=a.useRef(null),S=a.useCallback(e=>{Q.current=e,Re(t=>t+1)},[]),ie=a.useCallback(e=>{const t=q.current;if(!t)return null;const r="key"in e?CSS.escape(e.key):"";switch(e.kind){case"item":return t.querySelector(`[data-queue-item="${r}"]`);case"empty":return t.querySelector("[data-queue-empty]");case"trigger":return t.querySelector(`[data-queue-item="${r}"] [data-queue-action="${CSS.escape(e.actionId)}"]`);case"step":return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`)}},[]);a.useLayoutEffect(()=>{const e=Q.current;if(!e)return;Q.current=null,(ie(e)??q.current?.querySelector("[data-queue-item]")??q.current?.querySelector("[data-queue-empty]"))?.focus()},[$e,ie]);const G=a.useRef(null),Ne=e=>()=>{G.current=e},we=e=>{e.relatedTarget&&!q.current?.contains(e.relatedTarget)&&(G.current=null)},F=e=>{if(G.current!==e)return!1;const t=document.activeElement;return!t||t===document.body?!0:q.current?.contains(t)?!!t.closest(`[data-queue-item="${CSS.escape(e)}"]`):!1},C=a.useRef(null),A=(e,t)=>{C.current=t,h(e.key,{...e,open:!1})},ae=a.useRef(k),W=a.useRef(new Map),[,Ce]=a.useState(0),J=a.useRef(new Set),ue=(e,t,r)=>{const o=t.indexOf(e),f=t.slice(o+1).find(i=>r.has(i));if(f)return{kind:"item",key:f};const s=t.slice(0,o).reverse().find(i=>r.has(i));return s?{kind:"item",key:s}:{kind:"empty"}};a.useLayoutEffect(()=>{const e=ae.current;ae.current=k;const t=new Set(k),r=W.current;W.current=new Map;const o=[];let f=!1;for(const[s,i]of r){const u=t.has(s);o.push(i.announce??i.sentence),u||(f=!0),J.current.delete(s);const l=u?{kind:"trigger",key:s,actionId:i.actionId}:e.includes(s)?ue(s,e,t):null,m=x.current[s];if(m?.surface)A(m,l??{kind:"empty"});else{const I=F(s);m&&h(s,null),l&&I&&S(l)}}for(const s of e.filter(i=>!t.has(i))){if(r.has(s))continue;E(m=>s in m?B(m,s):m);const i=ue(s,e,t),u=C.current;if(u&&"key"in u&&u.key===s&&(C.current=i),$.current[s]){J.current.add(s),F(s)&&S(i);continue}const l=x.current[s];if(l&&!(l.surface&&!l.open))if(o.push(`${l.label} was decided elsewhere.`),f=!0,l.surface)A(l,i);else{const m=F(s);h(s,null),m&&S(i)}else!l&&F(s)&&S(i)}o.length&&ce(`${o.join(" ")}${f?` ${Qe(k.length)}`:""}`)});const M=async(e,t,r,o)=>{const f=T.current.get(e)??t,s=g(f),i=r.edit?R(r).run:r.run;ne(u=>({...u,[e]:r.id})),E(u=>B(u,e));try{const u=await i(f,o);W.current.set(e,{actionId:r.id,sentence:`${r.done??r.label}: ${s}.`,announce:u?u.announce:void 0}),Ce(l=>l+1)}catch(u){const l=We(u);ce(`${r.label} didn't go through for ${s}. ${l}`);const m=x.current[e];J.current.delete(e)?m?.surface?A(m,{kind:"empty"}):m&&h(e,null):m?h(e,{...m,error:l}):E(I=>({...I,[e]:l}))}finally{ne(u=>B(u,e))}},Ie=(e,t)=>{const r=y(e),o=R(t);if(!t.confirm&&!t.reason&&!o){M(r,e,t,{});return}E(f=>B(f,r)),h(r,{key:r,label:g(e),item:e,action:t,draft:o?o.edit.initial(e):void 0,reason:{},surface:!!o?.edit.surface,open:!0}),o?.edit.surface||S({kind:"step",key:r})},U=e=>{const t=x.current[e];if(!t||$.current[e])return;const r={kind:"trigger",key:e,actionId:t.action.id};t.surface?A(t,r):(h(e,null),S(r))},Be=e=>{const t=x.current[e];!t||$.current[e]||pe(t,T.current.get(e)??t.item)||(t.action.edit?M(e,t.item,t.action,{draft:t.draft}):t.action.reason?M(e,t.item,t.action,{reason:Ue(t.reason)}):M(e,t.item,t.action,{}))},Te=e=>{const t=C.current;C.current=null,h(e,null),t&&S(t)},Ee=`h${p}`,le=j??Ge(p+1),Fe=`h${le}`,V=`${N}-label`,de=(e,t)=>{const{action:r}=e,o=R(r),f=T.current.get(e.key)??e.item,s=!!D[e.key],i=pe(e,f),u=`${N}-step-${t}-message`,l=n.jsx(Z,{...me[r.tone??"neutral"],busy:s,blocked:!!i,"aria-describedby":i?u:void 0,onClick:()=>Be(e.key),"data-queue-submit":"",children:o?o.edit.submitLabel:r.label}),m=n.jsx(Z,{variant:"ghost",colorScheme:"neutral",blocked:s,onClick:()=>U(e.key),children:"Cancel"}),I=n.jsxs(n.Fragment,{children:[r.reason&&n.jsx(Ve,{id:`${N}-step-${t}`,step:r.reason,value:e.reason,disabled:s,onChange:X=>h(e.key,{...x.current[e.key],reason:X})}),o&&n.jsx(o.edit.Form,{item:f,value:e.draft,onChange:X=>h(e.key,{...x.current[e.key],draft:X})}),i&&n.jsx("p",{id:u,className:"rst:text-sm rst:text-error-600 rst:dark:text-error-400","data-queue-validation":"",children:i}),e.error&&n.jsx(Y.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:e.error})]});return{submitButton:l,cancelButton:m,fields:I}},Ae=(e,t)=>{const{submitButton:r,cancelButton:o,fields:f}=de(e,t),s=`${N}-step-${t}-prompt`,i=R(e.action),u=e.action.confirm?.prompt??e.action.reason?.prompt??i?.edit.title;return n.jsxs("div",{role:"group","aria-labelledby":s,tabIndex:-1,"data-queue-step":"",onKeyDown:l=>{l.key==="Escape"&&(l.stopPropagation(),U(e.key))},className:"rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:[n.jsx("p",{id:s,className:"rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:u}),i?.edit.description&&n.jsx("p",{className:"rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:i.edit.description}),f,n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:gap-2",children:[r,o]})]})},Me=(e,t)=>{const r=D[t];return n.jsx("div",{role:"group","aria-label":`Decide: ${g(e)}`,className:"rst:flex rst:flex-wrap rst:gap-2",children:Se.filter(o=>!o.hidden?.(e)).map(o=>n.jsx(Z,{...me[o.tone??"neutral"],"data-queue-action":o.id,busy:r===o.id,blocked:!!r&&r!==o.id,onClick:()=>Ie(e,o),children:o.label},o.id))})},b=Object.values(oe).find(e=>e.surface)??null,L=b?R(b.action):null,fe=L?.edit.surface,O=b?de(b,-1):null;return n.jsxs("section",{ref:q,"aria-labelledby":V,onBlur:we,className:P.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",ye),children:[n.jsx(Ee,{id:V,className:P.cn("rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",d&&"rst:sr-only"),children:c}),n.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-queue-live":"","data-queue-live-n":H.n,children:[H.text,H.n%2?" ":""]}),_==="loading"?n.jsx("div",{className:"rst:flex rst:justify-center rst:py-12","aria-busy":"true",children:n.jsx(Oe.Spinner,{size:"lg",label:`Loading ${c}`})}):_==="error"?n.jsx(Y.Alert,{colorScheme:"error",children:n.jsxs("div",{className:"rst:flex rst:flex-col rst:items-start rst:gap-3",children:[n.jsx("div",{children:ve??"The queue couldn't load."}),ee&&n.jsx(ge.Button,{size:"lg",variant:"outline",colorScheme:"neutral",onClick:ee,children:"Retry"})]})}):v.length===0?n.jsx(ze.EmptyState,{title:te.title,description:te.description,headingLevel:le,tabIndex:-1,"data-queue-empty":"",className:"rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"}):n.jsx("ul",{role:"list","aria-labelledby":V,className:"rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",children:v.map((e,t)=>{const r=k[t],o=`${N}-item-${t}`,f=xe?.(e),s=oe[r];return n.jsx("li",{children:n.jsx("article",{"data-queue-item":r,tabIndex:-1,"aria-labelledby":o,onFocus:Ne(r),className:"rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:n.jsx(Le.Card,{padding:re==="compact"?"sm":"md",children:n.jsxs("div",{className:P.cn("rst:flex rst:flex-col",re==="compact"?"rst:gap-3":"rst:gap-4"),children:[n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1",children:[n.jsx(Fe,{id:o,className:"rst:text-base rst:font-semibold",children:g(e)}),f&&n.jsx("div",{className:"rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:f})]}),n.jsx("div",{className:"rst:min-w-0",children:he(e)}),se[r]&&n.jsx(Y.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:se[r]}),s&&!s.surface?Ae(s,t):Me(e,r)]})})})},r)})}),be,fe&&b&&L&&O&&n.jsx(fe,{open:b.open,title:L.edit.title,description:L.edit.description,busy:!!D[b.key],onCancel:()=>U(b.key),onAfterClose:()=>Te(b.key),submitButton:O.submitButton,cancelButton:O.cancelButton,children:n.jsx("div",{className:"rst:flex rst:flex-col rst:gap-4",children:O.fields})})]})}function pe(c,d){const p=R(c.action);if(p)return p.edit.validate?.(c.draft,d);if(c.action.reason){if(c.action.reason.required&&!c.reason.value)return"Pick a reason.";if(c.action.reason.note==="required"&&!c.reason.note?.trim())return"Add a note."}}function Ue(c){const d=c.note?.trim();return{...c.value?{value:c.value}:{},...d?{note:d}:{}}}function Ve({id:c,step:d,value:p,disabled:j,onChange:v}){const y=d.note??"optional";return n.jsxs(n.Fragment,{children:[d.options&&d.options.length>0&&n.jsx(De.RadioGroup,{label:d.required?"Reason":"Reason (optional)",options:d.options,value:p.value??"",onChange:g=>v({...p,value:g}),disabled:j}),y!=="none"&&n.jsx(Pe.Textarea,{id:`${c}-note`,label:d.noteLabel??(y==="required"?"Note":"Note (optional)"),rows:3,value:p.note??"",onChange:g=>v({...p,note:g.target.value}),disabled:j})]})}exports.ModerationQueue=Je;
|