@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/feedback/feedback-attachment.js

@@ -1,9 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Camera, FileText, Paperclip, X } from "lucide-react";
-import { Button } from "../components/ui.js";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
+import { Button, IconButton, Spinner } from "../components/ui.js";
+import { DEFAULT_FILE_PICKER_LABELS, formatAccept } from "../components/file-button.js";
+import { useCommitReason } from "../components/write-lock.js";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels.js";
 const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
@@ -16,9 +23,12 @@ const DEFAULT_FEEDBACK_ATTACHMENT_LABELS = {
   attachmentList: "Attachments",
   attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
-  attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`
+  attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`,
+  attachmentUploading: "Uploading\u2026",
+  attachmentUploadFailed: (name) => `\u201C${name}\u201D could not be uploaded`
 };
 function FeedbackAttachmentField(props) {
+  if (props.refs) return /* @__PURE__ */ jsx(RefsField, { ...props });
   return props.multiple ? /* @__PURE__ */ jsx(MultipleField, { ...props }) : /* @__PURE__ */ jsx(SingleField, { ...props });
 }
 function SingleField({
@@ -31,6 +41,7 @@ function SingleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
   className
 }) {
   const [previewFor, setPreviewFor] = useState(null);
@@ -38,6 +49,7 @@ function SingleField({
   const fileInputRef = useRef(null);
   const fileText = useKitFileLabels();
   const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
+  const errorInfo = useErrorInfo(accept, maxBytes, void 0, text);
   useEffect(() => {
     if (!value) return;
     const url = URL.createObjectURL(value);
@@ -48,7 +60,7 @@ function SingleField({
     if (!file) return;
     const problem = rejection(file, accept, maxBytes);
     if (problem) {
-      onError?.(problem);
+      onError?.(problem, errorInfo(problem, [file]));
       return;
     }
     onChange(file);
@@ -59,7 +71,8 @@ function SingleField({
       pick(new File([file], pastedName(file.type), { type: file.type }));
     },
     documentPaste,
-    pasteFrom
+    pasteFrom,
+    disabled
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -85,24 +98,32 @@ function SingleField({
             /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: value.name }),
             /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: fileText.size(value.size) })
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onChange(null),
-              "aria-label": text.attachmentRemove,
-              className: "rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-            }
-          )
+          /* @__PURE__ */ jsx(RemoveButton, { label: text.attachmentRemove, onClick: () => onChange(null), disabled })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", onClick: () => fileInputRef.current?.click(), children: [
-              /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
-              " ",
-              text.attachmentAdd
-            ] }),
-            onCaptureScreenshot && /* @__PURE__ */ jsx(CaptureButton, { capture: onCaptureScreenshot, onFile: pick, label: text.attachmentCapture })
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "secondary",
+                disabled,
+                onClick: () => fileInputRef.current?.click(),
+                children: [
+                  /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+                  " ",
+                  text.attachmentAdd
+                ]
+              }
+            ),
+            onCaptureScreenshot && /* @__PURE__ */ jsx(
+              CaptureButton,
+              {
+                capture: onCaptureScreenshot,
+                onFile: pick,
+                label: text.attachmentCapture,
+                disabled
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: text.attachmentPaste })
         ] }),
@@ -113,6 +134,7 @@ function SingleField({
             type: "file",
             accept: accept.join(","),
             className: "sr-only",
+            disabled,
             onChange: (e) => {
               pick(e.target.files?.[0]);
               e.target.value = "";
@@ -136,6 +158,7 @@ function MultipleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
   className
 }) {
   const rootRef = useRef(null);
@@ -145,6 +168,7 @@ function MultipleField({
   const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile;
   const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit;
   const screenshotLabel = text.attachmentScreenshot ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentScreenshot;
+  const errorInfo = useErrorInfo(accept, maxBytes, max, text);
   const latest = useRef(value);
   useLayoutEffect(() => {
     latest.current = value;
@@ -161,29 +185,29 @@ function MultipleField({
     const accepted = [];
     const taken = new Set([...current, ...screenshot ? [screenshot] : []].map((f) => f.name));
     for (const raw of incoming) {
-      const problem = rejection(raw, accept, maxBytes);
+      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
+      const problem = rejection(file, accept, maxBytes);
       if (problem) {
-        onError?.(problem);
+        onError?.(problem, errorInfo(problem, [file]));
         continue;
       }
-      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
       taken.add(file.name);
       if (!current.includes(file)) accepted.push(file);
     }
     if (accepted.length === 0) return;
     const space = Math.max(0, max - current.length);
-    if (accepted.length > space) onError?.("count");
+    if (accepted.length > space) onError?.("count", errorInfo("count", accepted.slice(space)));
     const kept = accepted.slice(0, space);
     if (kept.length > 0) commit([...current, ...kept]);
   };
-  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom, disabled);
   const capture = (file) => {
     if (!hasSlot) {
       add([file]);
       return;
     }
     const problem = rejection(file, accept, maxBytes);
-    if (problem) onError?.(problem);
+    if (problem) onError?.(problem, errorInfo(problem, [file]));
     else onScreenshotChange(file);
   };
   const pendingFocus = useRef(null);
@@ -222,17 +246,14 @@ function MultipleField({
             /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: chip.screenshot ? `${chip.file.name} \xB7 ${fileText.size(chip.file.size)}` : fileText.size(chip.file.size) })
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            RemoveButton,
             {
-              type: "button",
-              "data-attachment-remove": "",
+              label: removeLabel(chip.name),
+              disabled,
               onClick: () => {
                 pendingFocus.current = index;
                 chip.remove();
-              },
-              "aria-label": removeLabel(chip.name),
-              className: "shrink-0 rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
             }
           )
         ]
@@ -246,6 +267,7 @@ function MultipleField({
           type: "button",
           variant: "secondary",
           "data-attachment-action": "",
+          disabled,
           onClick: () => fileInputRef.current?.click(),
           children: [
             /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
@@ -260,6 +282,7 @@ function MultipleField({
           capture: onCaptureScreenshot,
           onFile: capture,
           label: text.attachmentCapture,
+          disabled,
           "data-attachment-action": ""
         }
       )
@@ -275,6 +298,225 @@ function MultipleField({
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true,
+        disabled,
+        onChange: (e) => {
+          add(Array.from(e.target.files ?? []));
+          e.target.value = "";
+        }
+      }
+    )
+  ] });
+}
+let nextUploadId = 0;
+function RefsField({
+  value,
+  onChange,
+  onUpload,
+  onRemove,
+  onUploadingChange,
+  max = DEFAULT_MAX_ATTACHMENTS,
+  labels: labelsProp,
+  accept = DEFAULT_ATTACHMENT_ACCEPT,
+  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+  onError,
+  onCaptureScreenshot,
+  documentPaste = false,
+  pasteFrom,
+  disabled = false,
+  commit: commits,
+  disabledReason: ownDisabledReason,
+  className
+}) {
+  const rootRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const fileText = useKitFileLabels();
+  const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
+  const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile;
+  const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit;
+  const uploadingLabel = text.attachmentUploading ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploading;
+  const errorInfo = useErrorInfo(accept, maxBytes, max, text);
+  const disabledReason = useCommitReason(commits, ownDisabledReason);
+  const locked = hasReason(disabledReason);
+  const reason = locked ? disabledReason : void 0;
+  const inert = disabled || locked;
+  const latest = useRef(value);
+  useLayoutEffect(() => {
+    latest.current = value;
+  });
+  const commit = (next) => {
+    latest.current = next;
+    onChange(next);
+  };
+  const [uploads, setUploads] = useState([]);
+  const inFlight = useRef([]);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const uploadingChange = useRef(onUploadingChange);
+  useEffect(() => {
+    uploadingChange.current = onUploadingChange;
+  });
+  const room = Math.max(0, max - value.length - uploads.length);
+  const start = (file) => {
+    const upload = { id: nextUploadId++, file };
+    inFlight.current = [...inFlight.current, upload];
+    if (inFlight.current.length === 1) uploadingChange.current?.(true);
+    setUploads(inFlight.current);
+    const settle = () => {
+      inFlight.current = inFlight.current.filter((u) => u.id !== upload.id);
+      if (!mounted.current) return;
+      setUploads(inFlight.current);
+      if (inFlight.current.length === 0) uploadingChange.current?.(false);
+    };
+    let answer;
+    try {
+      answer = Promise.resolve(onUpload(file));
+    } catch (error) {
+      answer = Promise.reject(error);
+    }
+    answer.then(
+      (ref) => {
+        settle();
+        if (mounted.current) commit([...latest.current, ref]);
+      },
+      (error) => {
+        settle();
+        if (mounted.current) onError?.("upload", error, errorInfo("upload", [file], error));
+      }
+    );
+  };
+  const add = (incoming, pasted = false) => {
+    let space = Math.max(0, max - latest.current.length - inFlight.current.length);
+    const taken = /* @__PURE__ */ new Set([...latest.current.map((r) => r.name), ...inFlight.current.map((u) => u.file.name)]);
+    const dropped = [];
+    for (const raw of incoming) {
+      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
+      const problem = rejection(file, accept, maxBytes);
+      if (problem) {
+        onError?.(problem, void 0, errorInfo(problem, [file]));
+        continue;
+      }
+      taken.add(file.name);
+      if (space === 0) {
+        dropped.push(file);
+        continue;
+      }
+      space -= 1;
+      start(file);
+    }
+    if (dropped.length > 0) onError?.("count", void 0, errorInfo("count", dropped));
+  };
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom, inert);
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const root = rootRef.current;
+    if (!root) return;
+    const removes = root.querySelectorAll("[data-attachment-remove]");
+    const target = removes[index] ?? root.querySelector("[data-attachment-action]") ?? removes[index - 1];
+    target?.focus();
+  }, [value]);
+  const remove = (key, index) => {
+    if (inert) return;
+    pendingFocus.current = index;
+    commit(latest.current.filter((r) => r.key !== key));
+    onRemove?.(key);
+  };
+  const hasChips = value.length > 0 || uploads.length > 0;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative space-y-2", className), onPaste, children: [
+    /* @__PURE__ */ jsx(Heading, { text: labelsProp?.attachment, className: "mb-0" }),
+    hasChips && /* @__PURE__ */ jsxs("ul", { "aria-label": text.attachmentList, className: "flex flex-col gap-2", children: [
+      value.map((ref, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          children: [
+            /* @__PURE__ */ jsx(RefGlyph, { type: ref.type }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: ref.name }),
+              ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: fileText.size(ref.size) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              RemoveButton,
+              {
+                label: removeLabel(ref.name),
+                onClick: () => remove(ref.key, index),
+                disabled,
+                reason
+              }
+            )
+          ]
+        },
+        `ref:${ref.key}`
+      )),
+      uploads.map((upload) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "aria-busy": "true",
+          "data-attachment-uploading": "",
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-dashed border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: upload.file.name }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: uploadingLabel })
+            ] })
+          ]
+        },
+        `upload:${upload.id}`
+      ))
+    ] }),
+    room > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          "data-attachment-action": "",
+          disabled,
+          disabledReason: reason,
+          onClick: () => fileInputRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+            " ",
+            text.attachmentAdd
+          ]
+        }
+      ),
+      onCaptureScreenshot && /* @__PURE__ */ jsx(
+        CaptureButton,
+        {
+          capture: onCaptureScreenshot,
+          onFile: (file) => add([file]),
+          label: text.attachmentCapture,
+          disabled,
+          disabledReason: reason,
+          "data-attachment-action": ""
+        }
+      )
+    ] }),
+    locked ? (
+      // Where the paste hint was: a phone never hovers, so the Tooltip alone would
+      // leave a touch user with buttons that do nothing and no word why.
+      /* @__PURE__ */ jsx("div", { "data-attachment-reason": "", className: "text-xs text-[var(--text-muted)]", children: disabledReason })
+    ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: room > 1,
+        accept: accept.join(","),
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": true,
+        disabled: inert,
         onChange: (e) => {
           add(Array.from(e.target.files ?? []));
           e.target.value = "";
@@ -283,6 +525,9 @@ function MultipleField({
     )
   ] });
 }
+function RefGlyph({ type }) {
+  return /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: type?.startsWith("image/") ? /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": true, className: "size-6" }) : /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6" }) });
+}
 function Heading({ text, className }) {
   if (!text) return null;
   return /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", className), children: text });
@@ -291,6 +536,8 @@ function CaptureButton({
   capture,
   onFile,
   label,
+  disabled = false,
+  disabledReason,
   ...rest
 }) {
   const [capturing, setCapturing] = useState(false);
@@ -299,10 +546,11 @@ function CaptureButton({
     {
       type: "button",
       variant: "secondary",
-      disabled: capturing,
+      disabled: capturing || disabled,
+      disabledReason,
       ...rest,
       onClick: () => {
-        if (capturing) return;
+        if (capturing || disabled) return;
         setCapturing(true);
         void capture().then((file) => {
           if (file) onFile(file);
@@ -316,6 +564,60 @@ function CaptureButton({
     }
   );
 }
+function RemoveButton({
+  label,
+  onClick,
+  disabled,
+  reason
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      size: "xs",
+      tone: "muted",
+      "data-attachment-remove": "",
+      "aria-label": label,
+      disabled,
+      disabledReason: reason,
+      onClick,
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+    }
+  );
+}
+function hasReason(reason) {
+  return reason !== void 0 && reason !== null && reason !== false && reason !== "";
+}
+function useErrorInfo(accept, maxBytes, max, text) {
+  const picker = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS);
+  const fileText = useKitFileLabels();
+  const uploadFailed = text.attachmentUploadFailed ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploadFailed;
+  return (kind, files, error) => {
+    const file = files[0];
+    let message;
+    if (kind === "type") {
+      const acceptText = formatAccept(accept.join(","));
+      const useOnly = acceptText !== "" && (picker.rejectedTypeOnly !== DEFAULT_FILE_PICKER_LABELS.rejectedTypeOnly || picker.rejectedType === DEFAULT_FILE_PICKER_LABELS.rejectedType);
+      message = useOnly ? picker.rejectedTypeOnly(acceptText, file.name) : picker.rejectedType(file.name);
+    } else if (kind === "size") {
+      message = picker.rejectedSize(file.name, fileText.size(maxBytes));
+    } else if (kind === "count") {
+      message = files.length === 1 ? picker.rejectedCount(file.name, max ?? 1) : picker.rejectedMany(files.length);
+    } else {
+      message = uploadFailed(file.name);
+    }
+    return {
+      file,
+      files,
+      message,
+      maxBytes,
+      accept,
+      ...max !== void 0 ? { max } : null,
+      ...kind === "upload" ? { error } : null
+    };
+  };
+}
 function ChipPreview({ file, screenshot }) {
   const isImage = file.type.startsWith("image/");
   const [previewFor, setPreviewFor] = useState(null);
@@ -358,15 +660,17 @@ function uniqueName(name, taken) {
   while (taken.has(`${stem}-${n}${ext}`)) n++;
   return `${stem}-${n}${ext}`;
 }
-function usePaste(onImages, documentPaste, pasteFrom) {
-  const latest = useRef(onImages);
+function usePaste(onImages, documentPaste, pasteFrom, off) {
+  const handler = off ? null : onImages;
+  const latest = useRef(handler);
   useEffect(() => {
-    latest.current = onImages;
+    latest.current = handler;
   });
   useEffect(() => {
     const target = documentPaste ? document : pasteFrom?.current ?? null;
     if (!target) return;
     const onPaste = (event) => {
+      if (!latest.current) return;
       const clipboard = event.clipboardData;
       takeImages(clipboard, () => event.preventDefault(), latest.current);
     };
@@ -374,7 +678,10 @@ function usePaste(onImages, documentPaste, pasteFrom) {
     return () => target.removeEventListener("paste", onPaste);
   }, [documentPaste, pasteFrom]);
   const listensElsewhere = documentPaste || pasteFrom !== void 0;
-  return listensElsewhere ? void 0 : (event) => takeImages(event.clipboardData, () => event.preventDefault(), latest.current);
+  return listensElsewhere ? void 0 : (event) => {
+    if (!latest.current) return;
+    takeImages(event.clipboardData, () => event.preventDefault(), latest.current);
+  };
 }
 function takeImages(clipboard, stop, onImages) {
   const images = Array.from(clipboard?.items ?? []).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => file !== null);