@eifi1/ui-kit 0.22.0 → 0.23.0

package/dist/feedback/feedback-attachment.d.ts

@@ -1,2 +1,2 @@
 import 'react';
-export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentField, f as FeedbackAttachmentFieldLabels, g as FeedbackAttachmentFieldMultipleProps, h as FeedbackAttachmentFieldProps, i as FeedbackAttachmentFieldRefsProps, j as FeedbackAttachmentFieldSingleProps, l as FeedbackAttachmentRef, m as FeedbackAttachmentRefsError, w as pastedName } from '../feedback-attachment-NhUm7Zga.js';
+export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentErrorInfo, f as FeedbackAttachmentField, g as FeedbackAttachmentFieldLabels, h as FeedbackAttachmentFieldMultipleProps, i as FeedbackAttachmentFieldProps, j as FeedbackAttachmentFieldRefsProps, k as FeedbackAttachmentFieldSingleProps, m as FeedbackAttachmentRef, n as FeedbackAttachmentRefsError, x as pastedName } from '../feedback-attachment-fGAzZPf0.js';

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 {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
-import { Button, Spinner } from "../components/ui.js";
+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;
@@ -17,7 +24,8 @@ const DEFAULT_FEEDBACK_ATTACHMENT_LABELS = {
   attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
   attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`,
-  attachmentUploading: "Uploading\u2026"
+  attachmentUploading: "Uploading\u2026",
+  attachmentUploadFailed: (name) => `\u201C${name}\u201D could not be uploaded`
 };
 function FeedbackAttachmentField(props) {
   if (props.refs) return /* @__PURE__ */ jsx(RefsField, { ...props });
@@ -33,6 +41,7 @@ function SingleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
   className
 }) {
   const [previewFor, setPreviewFor] = useState(null);
@@ -40,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);
@@ -50,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);
@@ -61,7 +71,8 @@ function SingleField({
       pick(new File([file], pastedName(file.type), { type: file.type }));
     },
     documentPaste,
-    pasteFrom
+    pasteFrom,
+    disabled
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -87,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 })
         ] }),
@@ -115,6 +134,7 @@ function SingleField({
             type: "file",
             accept: accept.join(","),
             className: "sr-only",
+            disabled,
             onChange: (e) => {
               pick(e.target.files?.[0]);
               e.target.value = "";
@@ -138,6 +158,7 @@ function MultipleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
   className
 }) {
   const rootRef = useRef(null);
@@ -147,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;
@@ -163,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);
@@ -224,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" })
+              }
             }
           )
         ]
@@ -248,6 +267,7 @@ function MultipleField({
           type: "button",
           variant: "secondary",
           "data-attachment-action": "",
+          disabled,
           onClick: () => fileInputRef.current?.click(),
           children: [
             /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
@@ -262,6 +282,7 @@ function MultipleField({
           capture: onCaptureScreenshot,
           onFile: capture,
           label: text.attachmentCapture,
+          disabled,
           "data-attachment-action": ""
         }
       )
@@ -277,6 +298,7 @@ function MultipleField({
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true,
+        disabled,
         onChange: (e) => {
           add(Array.from(e.target.files ?? []));
           e.target.value = "";
@@ -300,6 +322,9 @@ function RefsField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
+  commit: commits,
+  disabledReason: ownDisabledReason,
   className
 }) {
   const rootRef = useRef(null);
@@ -309,6 +334,11 @@ function RefsField({
   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;
@@ -355,32 +385,32 @@ function RefsField({
       },
       (error) => {
         settle();
-        if (mounted.current) onError?.("upload", error);
+        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)]);
-    let dropped = false;
+    const dropped = [];
     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, void 0, errorInfo(problem, [file]));
         continue;
       }
+      taken.add(file.name);
       if (space === 0) {
-        dropped = true;
+        dropped.push(file);
         continue;
       }
-      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
-      taken.add(file.name);
       space -= 1;
       start(file);
     }
-    if (dropped) onError?.("count");
+    if (dropped.length > 0) onError?.("count", void 0, errorInfo("count", dropped));
   };
-  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom, inert);
   const pendingFocus = useRef(null);
   useEffect(() => {
     const index = pendingFocus.current;
@@ -393,6 +423,7 @@ function RefsField({
     target?.focus();
   }, [value]);
   const remove = (key, index) => {
+    if (inert) return;
     pendingFocus.current = index;
     commit(latest.current.filter((r) => r.key !== key));
     onRemove?.(key);
@@ -412,14 +443,12 @@ function RefsField({
               ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: fileText.size(ref.size) })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              RemoveButton,
               {
-                type: "button",
-                "data-attachment-remove": "",
+                label: removeLabel(ref.name),
                 onClick: () => remove(ref.key, index),
-                "aria-label": removeLabel(ref.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" })
+                disabled,
+                reason
               }
             )
           ]
@@ -450,6 +479,8 @@ function RefsField({
           type: "button",
           variant: "secondary",
           "data-attachment-action": "",
+          disabled,
+          disabledReason: reason,
           onClick: () => fileInputRef.current?.click(),
           children: [
             /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
@@ -464,11 +495,17 @@ function RefsField({
           capture: onCaptureScreenshot,
           onFile: (file) => add([file]),
           label: text.attachmentCapture,
+          disabled,
+          disabledReason: reason,
           "data-attachment-action": ""
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+    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",
       {
@@ -479,6 +516,7 @@ function RefsField({
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true,
+        disabled: inert,
         onChange: (e) => {
           add(Array.from(e.target.files ?? []));
           e.target.value = "";
@@ -498,6 +536,8 @@ function CaptureButton({
   capture,
   onFile,
   label,
+  disabled = false,
+  disabledReason,
   ...rest
 }) {
   const [capturing, setCapturing] = useState(false);
@@ -506,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);
@@ -523,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);
@@ -565,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);
     };
@@ -581,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);