@spark-ui/components 11.5.1 → 11.6.1

package/dist/file-upload/index.mjs

@@ -1,17 +1,17 @@
 import {
   Progress
-} from "../chunk-TKAU6SMC.mjs";
+} from "../chunk-7EWSMIZU.mjs";
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button,
   buttonStyles
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
   Slot
@@ -19,8 +19,39 @@ import {
 
 // src/file-upload/FileUpload.tsx
 import { useFormFieldControl } from "@spark-ui/components/form-field";
+import { createContext, useContext, useId, useRef } from "react";
+
+// src/file-upload/useFileUploadState.tsx
 import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { createContext, useContext, useId, useRef, useState } from "react";
+import { useState } from "react";
+
+// src/file-upload/constants.ts
+var FILE_UPLOAD_ERRORS = {
+  /**
+   * Exceeds the maxFiles limit
+   */
+  TOO_MANY_FILES: "TOO_MANY_FILES",
+  /**
+   * File type not in the accept list
+   */
+  FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
+  /**
+   * File size exceeds maxFileSize
+   */
+  FILE_TOO_LARGE: "FILE_TOO_LARGE",
+  /**
+   * File size below minFileSize
+   */
+  FILE_TOO_SMALL: "FILE_TOO_SMALL",
+  /**
+   * Generic validation failure
+   */
+  FILE_INVALID: "FILE_INVALID",
+  /**
+   * Duplicate file detected
+   */
+  FILE_EXISTS: "FILE_EXISTS"
+};
 
 // src/file-upload/utils.ts
 import { CvOutline } from "@spark-ui/icons/CvOutline";
@@ -120,14 +151,32 @@ function getFileIcon(file) {
   }
   return createElement(CvOutline);
 }
+function isFocusable(element) {
+  if (!element) {
+    return false;
+  }
+  const tabIndex = element.tabIndex;
+  if (tabIndex >= 0) {
+    return true;
+  }
+  const isContentEditable = String(element.contentEditable) === "true";
+  const naturallyFocusable = element instanceof HTMLInputElement || element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && Boolean(element.href) || isContentEditable;
+  return naturallyFocusable;
+}
+function findFocusableElement(candidates, inputRef) {
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      return candidate;
+    }
+  }
+  if (inputRef.current) {
+    return inputRef.current;
+  }
+  return null;
+}
 
-// src/file-upload/FileUpload.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var FileUploadContext = createContext(null);
-var ID_PREFIX = ":file-upload";
-var FileUpload = ({
-  asChild: _asChild = false,
-  children,
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
   defaultValue = [],
   value: controlledValue,
   onFileAccept,
@@ -138,32 +187,12 @@ var FileUpload = ({
   maxFiles,
   maxFileSize,
   minFileSize,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
+  disabled = false,
+  readOnly = false,
   locale
-}) => {
-  const field = useFormFieldControl();
-  const {
-    id: fieldId,
-    name: fieldName,
-    isInvalid,
-    isRequired,
-    description,
-    disabled: fieldDisabled,
-    readOnly: fieldReadOnly,
-    labelId
-  } = field;
+}) {
   const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
-  const internalId = useId();
-  const inputId = fieldId || `${ID_PREFIX}-${internalId}`;
-  const inputName = fieldName;
-  const inputRef = useRef(null);
-  const triggerRef = useRef(null);
-  const dropzoneRef = useRef(null);
-  const deleteButtonRefs = useRef([]);
-  const disabled = fieldDisabled ?? disabledProp;
-  const readOnly = fieldReadOnly ?? readOnlyProp;
-  const [filesState, setFilesState, ,] = useCombinedState(controlledValue, defaultValue);
+  const [filesState, setFilesState] = useCombinedState(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = useState([]);
@@ -195,20 +224,17 @@ var FileUpload = ({
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
-        if (remainingSlots <= 0) {
-          newFiles.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
-        }
+      const remainingSlots = maxFiles !== void 0 ? maxFiles - currentFiles.length : void 0;
+      if (remainingSlots !== void 0 && remainingSlots <= 0) {
+        newFiles.forEach((file) => {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+        });
       }
       let filteredFiles = newFiles;
       if (accept) {
         const rejectedByAccept = newFiles.filter((file) => !validateFileAccept(file, accept));
         rejectedByAccept.forEach((file) => {
-          addRejectedFile(file, "FILE_INVALID_TYPE");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID_TYPE);
         });
         filteredFiles = newFiles.filter((file) => validateFileAccept(file, accept));
       }
@@ -218,11 +244,11 @@ var FileUpload = ({
           const validation = validateFileSize(file, minFileSize, maxFileSize, defaultLocale);
           if (!validation.valid) {
             if (maxFileSize !== void 0 && file.size > maxFileSize) {
-              addRejectedFile(file, "FILE_TOO_LARGE");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_LARGE);
             } else if (minFileSize !== void 0 && file.size < minFileSize) {
-              addRejectedFile(file, "FILE_TOO_SMALL");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_SMALL);
             } else {
-              addRejectedFile(file, "FILE_INVALID");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID);
             }
             return false;
           }
@@ -230,35 +256,27 @@ var FileUpload = ({
         });
       }
       const seenFiles = /* @__PURE__ */ new Map();
-      const duplicateFiles = [];
       const uniqueFiles = validSizeFiles.filter((file) => {
         const fileKey = `${file.name}-${file.size}`;
         const existsInPrev = fileExists(file, currentFiles);
         if (existsInPrev) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         if (seenFiles.has(fileKey)) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         seenFiles.set(fileKey, file);
         return true;
       });
       let filesToAdd = multiple ? uniqueFiles : uniqueFiles.slice(0, 1);
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
+      if (remainingSlots !== void 0) {
         if (remainingSlots <= 0) {
-          filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
           filesToAdd = [];
         } else if (filesToAdd.length > remainingSlots) {
           filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
+            addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
           });
           filesToAdd = [];
         }
@@ -291,7 +309,7 @@ var FileUpload = ({
       let updatedRejectedFiles = rejectedFiles;
       if (maxFiles !== void 0 && updated.length < maxFiles) {
         updatedRejectedFiles = rejectedFiles.filter(
-          (rejected) => !rejected.errors.includes("TOO_MANY_FILES")
+          (rejected) => !rejected.errors.includes(FILE_UPLOAD_ERRORS.TOO_MANY_FILES)
         );
         setRejectedFiles(updatedRejectedFiles);
       }
@@ -310,7 +328,6 @@ var FileUpload = ({
     }
     setFiles([]);
     setRejectedFiles([]);
-    deleteButtonRefs.current = [];
     if (onFileChange) {
       onFileChange({
         acceptedFiles: [],
@@ -328,6 +345,82 @@ var FileUpload = ({
     setRejectedFiles([]);
   };
   const maxFilesReached = maxFiles !== void 0 && files.length >= maxFiles;
+  return {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles,
+    clearRejectedFiles,
+    maxFilesReached
+  };
+}
+
+// src/file-upload/FileUpload.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileUploadContext = createContext(null);
+var ID_PREFIX = ":file-upload";
+var FileUpload = ({
+  asChild: _asChild = false,
+  children,
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
+  locale
+}) => {
+  const field = useFormFieldControl();
+  const internalId = useId();
+  const inputId = field.id || `${ID_PREFIX}-${internalId}`;
+  const inputName = field.name;
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropzoneRef = useRef(null);
+  const deleteButtonRefs = useRef([]);
+  const rejectedFileDeleteButtonRefs = useRef([]);
+  const disabled = field.disabled ?? disabledProp;
+  const readOnly = field.readOnly ?? readOnlyProp;
+  const {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles: clearFilesFromHook,
+    clearRejectedFiles,
+    maxFilesReached
+  } = useFileUploadState({
+    defaultValue,
+    value: controlledValue,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    multiple,
+    accept,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    disabled,
+    readOnly,
+    locale
+  });
+  const clearFiles = () => {
+    clearFilesFromHook();
+    deleteButtonRefs.current = [];
+  };
+  const clearRejectedFilesWithRefs = () => {
+    clearRejectedFiles();
+    rejectedFileDeleteButtonRefs.current = [];
+  };
   return /* @__PURE__ */ jsx(
     FileUploadContext.Provider,
     {
@@ -339,19 +432,20 @@ var FileUpload = ({
         removeFile,
         removeRejectedFile,
         clearFiles,
-        clearRejectedFiles,
+        clearRejectedFiles: clearRejectedFilesWithRefs,
         triggerRef,
         dropzoneRef,
         deleteButtonRefs,
+        rejectedFileDeleteButtonRefs,
         multiple,
         maxFiles,
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale,
-        description,
-        isInvalid,
-        isRequired
+        locale: locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en"),
+        description: field.description,
+        isInvalid: field.isInvalid,
+        isRequired: field.isRequired
       },
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         children,
@@ -367,10 +461,10 @@ var FileUpload = ({
             accept,
             disabled,
             readOnly: readOnly && !disabled,
-            required: isRequired,
-            "aria-invalid": isInvalid,
-            "aria-describedby": description,
-            "aria-label": !labelId ? "Upload files test" : void 0,
+            required: field.isRequired,
+            "aria-invalid": field.isInvalid,
+            "aria-describedby": field.description,
+            "aria-label": !field.labelId ? "Upload files" : void 0,
             className: "sr-only",
             onChange: (e) => {
               if (e.target.files && !disabled && !readOnly) {
@@ -398,6 +492,7 @@ var useFileUploadContext = () => {
 
 // src/file-upload/FileUploadAcceptedFile.tsx
 import { cx as cx2 } from "class-variance-authority";
+import { useCallback, useEffect, useState as useState2 } from "react";
 
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 import { Close } from "@spark-ui/icons/Close";
@@ -410,7 +505,16 @@ var ItemDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly, files } = useFileUploadContext();
+  const {
+    removeFile,
+    triggerRef,
+    dropzoneRef,
+    deleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    files
+  } = useFileUploadContext();
   const buttonRef = useRef2(null);
   const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
@@ -418,7 +522,7 @@ var ItemDeleteTrigger = ({
       return;
     }
     removeFile(fileIndex);
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const remainingButtons = deleteButtonRefs.current.filter(Boolean);
       if (remainingButtons.length > 0) {
         const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
@@ -427,12 +531,15 @@ var ItemDeleteTrigger = ({
           nextButton.focus();
         }
       } else {
-        const focusTarget = triggerRef.current || dropzoneRef.current;
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
         if (focusTarget) {
           focusTarget.focus();
         }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
   const setRef = (node) => {
@@ -469,7 +576,6 @@ ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 // src/file-upload/FileUploadAcceptedFile.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var AcceptedFile = ({
-  asChild: _asChild = false,
   className,
   file,
   uploadProgress,
@@ -478,6 +584,17 @@ var AcceptedFile = ({
   ...props
 }) => {
   const { locale } = useFileUploadContext();
+  const [showProgress, setShowProgress] = useState2(uploadProgress !== void 0);
+  useEffect(() => {
+    if (uploadProgress !== void 0) {
+      setShowProgress(true);
+    } else {
+      setShowProgress(false);
+    }
+  }, [uploadProgress]);
+  const handleProgressComplete = useCallback(() => {
+    setShowProgress(false);
+  }, []);
   return /* @__PURE__ */ jsxs2(
     "li",
     {
@@ -490,13 +607,19 @@ var AcceptedFile = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx3("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(Icon, { size: "md", children: getFileIcon(file) }) }),
-        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-            /* @__PURE__ */ jsx3("p", { className: "text-body-2 truncate font-medium", children: file.name }),
-            /* @__PURE__ */ jsx3("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) })
-          ] }),
-          uploadProgress !== void 0 && /* @__PURE__ */ jsx3("div", { className: "mt-md", children: /* @__PURE__ */ jsx3(Progress, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
+        /* @__PURE__ */ jsx3("div", { className: "size-sz-36 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-body-2 truncate font-medium", children: file.name }),
+          /* @__PURE__ */ jsx3("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) }),
+          showProgress && uploadProgress !== void 0 && /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ jsx3(
+            Progress,
+            {
+              value: uploadProgress,
+              max: 100,
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsx3(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
       ]
@@ -612,20 +735,19 @@ Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
 import { cx as cx4 } from "class-variance-authority";
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PreviewImage = ({
-  asChild: _asChild = false,
   className,
   file,
   fallback = "\u{1F4C4}",
   ...props
 }) => {
-  const [imageError, setImageError] = useState2(false);
-  const [imageLoaded, setImageLoaded] = useState2(false);
+  const [imageError, setImageError] = useState3(false);
+  const [imageLoaded, setImageLoaded] = useState3(false);
   const isImage = file.type.startsWith("image/");
   const imageUrl = isImage ? URL.createObjectURL(file) : null;
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
@@ -685,7 +807,16 @@ var RejectedFileDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly, rejectedFiles } = useFileUploadContext();
+  const {
+    removeRejectedFile,
+    triggerRef,
+    dropzoneRef,
+    rejectedFileDeleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    rejectedFiles
+  } = useFileUploadContext();
   const buttonRef = useRef4(null);
   const rejectedFileIndex = rejectedFiles.findIndex(
     (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
@@ -695,18 +826,43 @@ var RejectedFileDeleteTrigger = ({
       return;
     }
     removeRejectedFile(rejectedFileIndex);
-    setTimeout(() => {
-      const focusTarget = triggerRef.current || dropzoneRef.current;
-      if (focusTarget) {
-        focusTarget.focus();
+    requestAnimationFrame(() => {
+      const remainingButtons = rejectedFileDeleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(rejectedFileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
+        if (focusTarget) {
+          focusTarget.focus();
+        }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (rejectedFileDeleteButtonRefs.current.length <= rejectedFileIndex) {
+        rejectedFileDeleteButtonRefs.current.push(null);
+      }
+      rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = node;
+    } else {
+      if (rejectedFileDeleteButtonRefs.current[rejectedFileIndex]) {
+        rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = null;
+      }
+    }
+  };
   return /* @__PURE__ */ jsx7(
     IconButton,
     {
-      ref: buttonRef,
+      ref: setRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
       className: cx5(className),
       onClick: handleClick,
@@ -724,7 +880,6 @@ RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // src/file-upload/FileUploadRejectedFile.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var RejectedFile = ({
-  asChild: _asChild = false,
   className,
   rejectedFile,
   renderError,
@@ -745,7 +900,7 @@ var RejectedFile = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx8(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ jsx8(WarningOutline, {}) }) }),
+        /* @__PURE__ */ jsx8("div", { className: "size-sz-36 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx8(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ jsx8(WarningOutline, {}) }) }),
         /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-col", children: [
           /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-row items-center justify-between", children: [
             /* @__PURE__ */ jsx8("p", { className: "text-body-2 truncate font-medium", children: rejectedFile.file.name }),
@@ -863,6 +1018,7 @@ AcceptedFile.displayName = "FileUpload.AcceptedFile";
 RejectedFile.displayName = "FileUpload.RejectedFile";
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 export {
+  FILE_UPLOAD_ERRORS,
   FileUpload2 as FileUpload
 };
 //# sourceMappingURL=index.mjs.map