@seed-design/react-file-upload 0.0.0-alpha-20260416134952

package/lib/FileUpload-12s-BsPs5ndy.js

@@ -0,0 +1,569 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { elementProps, dataAttr, inputProps, buttonProps, visuallyHidden, ariaAttr, mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import { createContext, useContext, useRef, useCallback, useEffect, useState, forwardRef } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+
+/**
+ * Image extension set sourced from mime-db (MIT license).
+ * @see https://www.npmjs.com/package/mime
+ */ const IMAGE_EXTENSIONS = new Set([
+    "exr",
+    "apng",
+    "avci",
+    "avcs",
+    "avif",
+    "bmp",
+    "dib",
+    "cgm",
+    "drle",
+    "dpx",
+    "emf",
+    "fits",
+    "g3",
+    "gif",
+    "heic",
+    "heics",
+    "heif",
+    "heifs",
+    "hej2",
+    "ief",
+    "jaii",
+    "jais",
+    "jls",
+    "jp2",
+    "jpg2",
+    "jpg",
+    "jpeg",
+    "jpe",
+    "jph",
+    "jhc",
+    "jpm",
+    "jpgm",
+    "jpx",
+    "jpf",
+    "jxl",
+    "jxr",
+    "jxra",
+    "jxrs",
+    "jxs",
+    "jxsc",
+    "jxsi",
+    "jxss",
+    "ktx",
+    "ktx2",
+    "jfif",
+    "png",
+    "sgi",
+    "svg",
+    "svgz",
+    "t38",
+    "tif",
+    "tiff",
+    "tfx",
+    "webp",
+    "wmf"
+]);
+function isImageAccept(pattern) {
+    if (pattern.startsWith("image/")) return true;
+    if (pattern.startsWith(".")) return IMAGE_EXTENSIONS.has(pattern.slice(1).toLowerCase());
+    return false;
+}
+/**
+ * Determines the file accept type category based on accept patterns.
+ * Returns "image" if all patterns are image-related, undefined otherwise.
+ */ function getFileAcceptType(accept) {
+    if (!accept) return undefined;
+    const list = Array.isArray(accept) ? accept : accept.split(",").map((s)=>s.trim());
+    return list.every(isImageAccept) ? "image" : undefined;
+}
+
+const FileUploadContext$1 = /*#__PURE__*/ createContext(null);
+const FileUploadProvider = FileUploadContext$1.Provider;
+function useFileUploadContext({ strict = true } = {}) {
+    const context = useContext(FileUploadContext$1);
+    if (!context && strict) {
+        throw new Error("useFileUploadContext must be used within a FileUpload");
+    }
+    return context;
+}
+const ItemContext = /*#__PURE__*/ createContext(null);
+const FileUploadItemProvider = ItemContext.Provider;
+function useFileUploadItemContext({ strict = true } = {}) {
+    const context = useContext(ItemContext);
+    if (!context && strict) {
+        throw new Error("useFileUploadItemContext must be used within a FileUploadItem");
+    }
+    return context;
+}
+
+function syncInputFiles(inputEl, files) {
+    const dataTransfer = new DataTransfer();
+    for (const file of files){
+        dataTransfer.items.add(file);
+    }
+    inputEl.files = dataTransfer.files;
+}
+function useFileUploadState(props) {
+    const [acceptedFileEntries, setAcceptedFileEntries] = useControllableState({
+        prop: props.acceptedFileEntries,
+        defaultProp: props.defaultAcceptedFileEntries ?? [],
+        onChange: (filesWithStatus)=>{
+            props.onAcceptedFileEntriesChange?.(filesWithStatus);
+        }
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    return {
+        acceptedFileEntries: acceptedFileEntries ?? [],
+        isDragging,
+        setAcceptedFileEntries,
+        setIsDragging
+    };
+}
+function useFileUpload({ accept, disabled = false, required = false, invalid = false, readOnly = false, maxFiles = 1, maxFileSize = Number.POSITIVE_INFINITY, minFileSize = 0, name, validate, preventDocumentDrop = true, onFileReject, onFileAccept, ...props } = {}) {
+    const inputRef = useRef(null);
+    const dropzoneRef = useRef(null);
+    const idCounterRef = useRef(0);
+    const { acceptedFileEntries, isDragging, setAcceptedFileEntries, setIsDragging } = useFileUploadState(props);
+    const multiple = maxFiles > 1;
+    const maxFilesReached = acceptedFileEntries.length >= maxFiles;
+    const triggerDisabled = disabled || maxFilesReached;
+    const acceptString = Array.isArray(accept) ? accept.join(",") : accept;
+    const acceptType = getFileAcceptType(accept);
+    const isValidFileType = useCallback((file)=>{
+        if (!accept) return true;
+        const acceptList = Array.isArray(accept) ? accept : accept.split(",").map((s)=>s.trim());
+        return acceptList.some((acceptPattern)=>{
+            // .pdf
+            if (acceptPattern.startsWith(".")) return file.name.toLowerCase().endsWith(acceptPattern.toLowerCase());
+            // image/* or image/png
+            if (acceptPattern.includes("*")) {
+                const [type] = acceptPattern.split("/");
+                return file.type.startsWith(`${type}/`);
+            }
+            return file.type === acceptPattern;
+        });
+    }, [
+        accept
+    ]);
+    const validateFiles = useCallback((files)=>{
+        const accepted = [];
+        const rejected = [];
+        const currentCount = acceptedFileEntries.length;
+        let addedCount = 0;
+        for (const file of files){
+            const errors = [];
+            if (currentCount + addedCount >= maxFiles) {
+                errors.push("TOO_MANY_FILES");
+            }
+            if (!isValidFileType(file)) {
+                errors.push("INVALID_TYPE");
+            }
+            if (file.size > maxFileSize) {
+                errors.push("FILE_TOO_LARGE");
+            }
+            if (file.size < minFileSize) {
+                errors.push("FILE_TOO_SMALL");
+            }
+            if (validate) {
+                const customErrors = validate(file);
+                if (customErrors) {
+                    errors.push(...customErrors);
+                }
+            }
+            if (errors.length > 0) {
+                rejected.push({
+                    file,
+                    errors
+                });
+            } else {
+                accepted.push(file);
+                addedCount++;
+            }
+        }
+        return {
+            accepted,
+            rejected
+        };
+    }, [
+        maxFileSize,
+        minFileSize,
+        maxFiles,
+        acceptedFileEntries.length,
+        validate,
+        isValidFileType
+    ]);
+    const openFilePicker = useCallback(()=>{
+        if (triggerDisabled) return;
+        if (!inputRef.current) return;
+        // Reset value before opening the picker so re-selecting the same file still fires a change event
+        // see: https://github.com/chakra-ui/zag/blob/main/packages/machines/file-upload/src/file-upload.connect.ts
+        inputRef.current.value = "";
+        inputRef.current.click();
+    }, [
+        triggerDisabled
+    ]);
+    const updateFileEntryStatus = useCallback((id, details)=>{
+        setAcceptedFileEntries((prev)=>(prev ?? []).map((f)=>f.id === id ? {
+                    ...f,
+                    ...details
+                } : f));
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const setFileEntries = useCallback((files)=>{
+        if (disabled) return;
+        const { accepted, rejected } = validateFiles(files);
+        const acceptedEntries = accepted.map((file)=>({
+                id: `file-${Date.now()}-${++idCounterRef.current}`,
+                file,
+                status: "pending"
+            }));
+        if (acceptedEntries.length > 0) {
+            const finalEntries = multiple ? acceptedEntries : [
+                acceptedEntries[0]
+            ];
+            if (multiple) {
+                setAcceptedFileEntries((prev)=>[
+                        ...prev ?? [],
+                        ...finalEntries
+                    ]);
+            } else {
+                setAcceptedFileEntries(finalEntries);
+            }
+            onFileAccept?.(finalEntries, {
+                updateFileEntryStatus
+            });
+        }
+        if (rejected.length > 0) {
+            onFileReject?.(rejected);
+        }
+    }, [
+        disabled,
+        multiple,
+        validateFiles,
+        setAcceptedFileEntries,
+        onFileReject,
+        onFileAccept,
+        updateFileEntryStatus
+    ]);
+    const reorderFileEntry = useCallback((fromIndex, toIndex)=>{
+        if (disabled) return;
+        setAcceptedFileEntries((prev)=>{
+            const files = [
+                ...prev ?? []
+            ];
+            if (fromIndex < 0 || fromIndex >= files.length) return prev;
+            if (toIndex < 0 || toIndex >= files.length) return prev;
+            const [removed] = files.splice(fromIndex, 1);
+            files.splice(toIndex, 0, removed);
+            return files;
+        });
+    }, [
+        disabled,
+        setAcceptedFileEntries
+    ]);
+    const createFileUrl = useCallback((file, callback)=>{
+        const url = URL.createObjectURL(file);
+        callback(url);
+        return ()=>URL.revokeObjectURL(url);
+    }, []);
+    const removeFileEntry = useCallback((id)=>{
+        setAcceptedFileEntries((prev)=>(prev ?? []).filter((f)=>f.id !== id));
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const clearFileEntries = useCallback(()=>{
+        setAcceptedFileEntries([]);
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const stateProps = elementProps({
+        "data-dragging-over": dataAttr(isDragging),
+        "data-disabled": dataAttr(triggerDisabled),
+        "data-invalid": dataAttr(invalid)
+    });
+    useEffect(()=>{
+        if (!inputRef.current) return;
+        syncInputFiles(inputRef.current, acceptedFileEntries.map((e)=>e.file));
+    }, [
+        acceptedFileEntries
+    ]);
+    useEffect(()=>{
+        if (!preventDocumentDrop) return;
+        if (disabled) return;
+        const onDragOver = (event)=>{
+            if (!dropzoneRef.current) return;
+            event.preventDefault();
+        };
+        const onDrop = (event)=>{
+            if (!dropzoneRef.current) return;
+            const target = event.target;
+            if (dropzoneRef.current.contains(target)) return;
+            event.preventDefault();
+        };
+        document.addEventListener("dragover", onDragOver);
+        document.addEventListener("drop", onDrop);
+        return ()=>{
+            document.removeEventListener("dragover", onDragOver);
+            document.removeEventListener("drop", onDrop);
+        };
+    }, [
+        preventDocumentDrop,
+        disabled
+    ]);
+    return {
+        inputRef,
+        dropzoneRef,
+        acceptedFileEntries,
+        dragging: isDragging,
+        disabled,
+        invalid,
+        required,
+        maxFiles,
+        currentFileEntryCount: acceptedFileEntries.length,
+        acceptType,
+        openFilePicker,
+        setFileEntries,
+        reorderFileEntry,
+        createFileUrl,
+        updateFileEntryStatus,
+        removeFileEntry,
+        clearFileEntries,
+        stateProps,
+        dropzoneProps: elementProps({
+            ...stateProps,
+            onDragOver: (event)=>{
+                if (triggerDisabled) return;
+                event.preventDefault();
+                event.stopPropagation();
+                setIsDragging(true);
+            },
+            onDragEnter: (event)=>{
+                if (triggerDisabled) return;
+                event.preventDefault();
+                event.stopPropagation();
+                setIsDragging(true);
+            },
+            onDragLeave: (event)=>{
+                if (triggerDisabled) return;
+                event.preventDefault();
+                event.stopPropagation();
+                // Only set dragging to false if we're leaving the dropzone entirely
+                const relatedTarget = event.relatedTarget;
+                if (!event.currentTarget.contains(relatedTarget)) {
+                    setIsDragging(false);
+                }
+            },
+            onDrop: (event)=>{
+                if (disabled) return;
+                event.preventDefault();
+                event.stopPropagation();
+                setIsDragging(false);
+                const files = event.dataTransfer?.files;
+                if (files && files.length > 0) {
+                    setFileEntries(Array.from(files));
+                }
+            }
+        }),
+        triggerProps: buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled: triggerDisabled,
+            onClick: openFilePicker
+        }),
+        hiddenInputProps: inputProps({
+            type: "file",
+            name,
+            accept: acceptString,
+            multiple,
+            disabled,
+            "aria-required": ariaAttr(required),
+            tabIndex: -1,
+            style: visuallyHidden,
+            onChange: (event)=>{
+                const files = event.target.files;
+                if (files) {
+                    setFileEntries(Array.from(files));
+                }
+                event.target.value = "";
+            }
+        })
+    };
+}
+function useFileUploadItem(fileEntry) {
+    const { createFileUrl, removeFileEntry, acceptType } = useFileUploadContext();
+    const [isOverlayRendered, setIsOverlayRendered] = useState(false);
+    const overlayRef = useCallback((node)=>{
+        setIsOverlayRendered(!!node);
+    }, []);
+    // Image blob URL management
+    const [imageSrc, setImageSrc] = useState();
+    useEffect(()=>{
+        if (acceptType !== "image") return;
+        if (!fileEntry.file) return;
+        return createFileUrl(fileEntry.file, setImageSrc);
+    }, [
+        fileEntry.file,
+        createFileUrl,
+        acceptType
+    ]);
+    const overlayStateProps = elementProps({
+        "data-has-overlay": dataAttr(isOverlayRendered)
+    });
+    return {
+        ...fileEntry,
+        refs: {
+            overlay: overlayRef
+        },
+        ...acceptType === "image" && imageSrc && {
+            imageProps: {
+                src: imageSrc,
+                alt: fileEntry.file.name
+            }
+        },
+        thumbnailProps: overlayStateProps,
+        metadataProps: overlayStateProps,
+        // NOTE: `disabled` of item remove button works separately from the overall `disabled` state so we don't have stateProps here
+        removeButtonProps: buttonProps({
+            type: "button",
+            onClick: ()=>{
+                removeFileEntry(fileEntry.id);
+            }
+        })
+    };
+}
+
+const FileUploadRoot = /*#__PURE__*/ forwardRef(({ // UseFileUploadProps
+accept, acceptedFileEntries, defaultAcceptedFileEntries, disabled, invalid, maxFileSize, maxFiles, minFileSize, name, onAcceptedFileEntriesChange, onFileAccept, onFileReject, preventDocumentDrop, readOnly, required, validate, ...otherProps }, ref)=>{
+    const api = useFileUpload({
+        accept,
+        acceptedFileEntries,
+        defaultAcceptedFileEntries,
+        disabled,
+        invalid,
+        maxFileSize,
+        maxFiles,
+        minFileSize,
+        name,
+        onAcceptedFileEntriesChange,
+        onFileAccept,
+        onFileReject,
+        preventDocumentDrop,
+        readOnly,
+        required,
+        validate
+    });
+    return /*#__PURE__*/ jsx(FileUploadProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...api.stateProps,
+            ...otherProps
+        })
+    });
+});
+FileUploadRoot.displayName = "FileUploadRoot";
+const FileUploadDropzone = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { dropzoneRef, dropzoneProps } = useFileUploadContext();
+    const mergedProps = mergeProps(dropzoneProps, props);
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(dropzoneRef, ref),
+        ...mergedProps
+    });
+});
+FileUploadDropzone.displayName = "FileUploadDropzone";
+const FileUploadTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { triggerProps } = useFileUploadContext();
+    const mergedProps = mergeProps(triggerProps, props);
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadTrigger.displayName = "FileUploadTrigger";
+const FileUploadHiddenInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { inputRef, hiddenInputProps } = useFileUploadContext();
+    const mergedProps = mergeProps(hiddenInputProps, props);
+    return /*#__PURE__*/ jsx(Primitive.input, {
+        ref: composeRefs(inputRef, ref),
+        ...mergedProps
+    });
+});
+FileUploadHiddenInput.displayName = "FileUploadHiddenInput";
+const FileUploadItemName = /*#__PURE__*/ forwardRef(({ children, ...props }, ref)=>{
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+    const mergedProps = mergeProps(stateProps, props);
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        ref: ref,
+        ...mergedProps,
+        children: children ?? file.name
+    });
+});
+FileUploadItemName.displayName = "FileUploadItemName";
+const FileUploadItemSize = /*#__PURE__*/ forwardRef(({ children, formatBytes, ...props }, ref)=>{
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+    const mergedProps = mergeProps(stateProps, props);
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        ref: ref,
+        ...mergedProps,
+        children: children ?? formatBytes(file.size)
+    });
+});
+FileUploadItemSize.displayName = "FileUploadItemSize";
+const FileUploadItemRemoveButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { removeButtonProps } = useFileUploadItemContext();
+    const mergedProps = mergeProps(removeButtonProps, props);
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemRemoveButton.displayName = "FileUploadItemRemoveButton";
+const FileUploadItemImage = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const ctx = useFileUploadItemContext();
+    if (!("imageProps" in ctx)) return null;
+    const mergedProps = mergeProps(ctx.imageProps ?? {}, props);
+    return /*#__PURE__*/ jsx(Primitive.img, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemImage.displayName = "FileUploadItemImage";
+const FileUploadItemThumbnail = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { thumbnailProps } = useFileUploadItemContext();
+    const mergedProps = mergeProps(thumbnailProps, props);
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
+const FileUploadItemMetadata = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { metadataProps } = useFileUploadItemContext();
+    const mergedProps = mergeProps(metadataProps, props);
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
+const FileUploadItemBackdrop = /*#__PURE__*/ forwardRef(({ status, children, ...props }, ref)=>{
+    const entry = useFileUploadItemContext();
+    if (entry.status !== status) return null;
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(entry.refs.overlay, ref),
+        ...props,
+        children: typeof children === "function" ? children(entry) : children
+    });
+});
+FileUploadItemBackdrop.displayName = "FileUploadItemBackdrop";
+const FileUploadContext = (props)=>{
+    return props.children(useFileUploadContext());
+};
+
+export { FileUploadContext as F, FileUploadDropzone as a, FileUploadHiddenInput as b, FileUploadItemBackdrop as c, FileUploadItemImage as d, FileUploadItemMetadata as e, FileUploadItemName as f, FileUploadItemRemoveButton as g, FileUploadItemSize as h, FileUploadItemThumbnail as i, FileUploadRoot as j, FileUploadTrigger as k, FileUploadItemProvider as l, useFileUploadItemContext as m, useFileUpload as n, useFileUploadItem as o, useFileUploadContext as u };

package/lib/index.cjs

@@ -0,0 +1,60 @@
+var FileUpload12s = require('./FileUpload-12s-1EmFGBYg.cjs');
+
+var FileUpload_namespace = {
+  __proto__: null,
+  Context: FileUpload12s.FileUploadContext,
+  Dropzone: FileUpload12s.FileUploadDropzone,
+  HiddenInput: FileUpload12s.FileUploadHiddenInput,
+  ItemBackdrop: FileUpload12s.FileUploadItemBackdrop,
+  ItemImage: FileUpload12s.FileUploadItemImage,
+  ItemMetadata: FileUpload12s.FileUploadItemMetadata,
+  ItemName: FileUpload12s.FileUploadItemName,
+  ItemRemoveButton: FileUpload12s.FileUploadItemRemoveButton,
+  ItemSize: FileUpload12s.FileUploadItemSize,
+  ItemThumbnail: FileUpload12s.FileUploadItemThumbnail,
+  Root: FileUpload12s.FileUploadRoot,
+  Trigger: FileUpload12s.FileUploadTrigger
+};
+
+/**
+ * Split a filename into basename and extension.
+ *
+ * "document.pdf" -> { basename: "document", extension: ".pdf" }
+ * ".gitignore"   -> { basename: ".gitignore", extension: "" }
+ * "README"       -> { basename: "README", extension: "" }
+ */ function splitFileName(name) {
+    if (!name) return {
+        basename: "",
+        extension: ""
+    };
+    const lastDot = name.lastIndexOf(".");
+    // No dot, or dot is first character (dotfile)
+    if (lastDot <= 0) return {
+        basename: name,
+        extension: ""
+    };
+    return {
+        basename: name.slice(0, lastDot),
+        extension: name.slice(lastDot)
+    };
+}
+
+exports.FileUploadContext = FileUpload12s.FileUploadContext;
+exports.FileUploadDropzone = FileUpload12s.FileUploadDropzone;
+exports.FileUploadHiddenInput = FileUpload12s.FileUploadHiddenInput;
+exports.FileUploadItemBackdrop = FileUpload12s.FileUploadItemBackdrop;
+exports.FileUploadItemImage = FileUpload12s.FileUploadItemImage;
+exports.FileUploadItemMetadata = FileUpload12s.FileUploadItemMetadata;
+exports.FileUploadItemName = FileUpload12s.FileUploadItemName;
+exports.FileUploadItemProvider = FileUpload12s.FileUploadItemProvider;
+exports.FileUploadItemRemoveButton = FileUpload12s.FileUploadItemRemoveButton;
+exports.FileUploadItemSize = FileUpload12s.FileUploadItemSize;
+exports.FileUploadItemThumbnail = FileUpload12s.FileUploadItemThumbnail;
+exports.FileUploadRoot = FileUpload12s.FileUploadRoot;
+exports.FileUploadTrigger = FileUpload12s.FileUploadTrigger;
+exports.useFileUpload = FileUpload12s.useFileUpload;
+exports.useFileUploadContext = FileUpload12s.useFileUploadContext;
+exports.useFileUploadItem = FileUpload12s.useFileUploadItem;
+exports.useFileUploadItemContext = FileUpload12s.useFileUploadItemContext;
+exports.FileUpload = FileUpload_namespace;
+exports.splitFileName = splitFileName;