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

package/lib/FileUpload-12s-1EmFGBYg.cjs

@@ -0,0 +1,585 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var domUtils = require('@seed-design/dom-utils');
+var reactPrimitive = require('@seed-design/react-primitive');
+var react = require('react');
+var reactUseControllableState = require('@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__*/ react.createContext(null);
+const FileUploadProvider = FileUploadContext$1.Provider;
+function useFileUploadContext({ strict = true } = {}) {
+    const context = react.useContext(FileUploadContext$1);
+    if (!context && strict) {
+        throw new Error("useFileUploadContext must be used within a FileUpload");
+    }
+    return context;
+}
+const ItemContext = /*#__PURE__*/ react.createContext(null);
+const FileUploadItemProvider = ItemContext.Provider;
+function useFileUploadItemContext({ strict = true } = {}) {
+    const context = react.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] = reactUseControllableState.useControllableState({
+        prop: props.acceptedFileEntries,
+        defaultProp: props.defaultAcceptedFileEntries ?? [],
+        onChange: (filesWithStatus)=>{
+            props.onAcceptedFileEntriesChange?.(filesWithStatus);
+        }
+    });
+    const [isDragging, setIsDragging] = react.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 = react.useRef(null);
+    const dropzoneRef = react.useRef(null);
+    const idCounterRef = react.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 = react.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 = react.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 = react.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 = react.useCallback((id, details)=>{
+        setAcceptedFileEntries((prev)=>(prev ?? []).map((f)=>f.id === id ? {
+                    ...f,
+                    ...details
+                } : f));
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const setFileEntries = react.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 = react.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 = react.useCallback((file, callback)=>{
+        const url = URL.createObjectURL(file);
+        callback(url);
+        return ()=>URL.revokeObjectURL(url);
+    }, []);
+    const removeFileEntry = react.useCallback((id)=>{
+        setAcceptedFileEntries((prev)=>(prev ?? []).filter((f)=>f.id !== id));
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const clearFileEntries = react.useCallback(()=>{
+        setAcceptedFileEntries([]);
+    }, [
+        setAcceptedFileEntries
+    ]);
+    const stateProps = domUtils.elementProps({
+        "data-dragging-over": domUtils.dataAttr(isDragging),
+        "data-disabled": domUtils.dataAttr(triggerDisabled),
+        "data-invalid": domUtils.dataAttr(invalid)
+    });
+    react.useEffect(()=>{
+        if (!inputRef.current) return;
+        syncInputFiles(inputRef.current, acceptedFileEntries.map((e)=>e.file));
+    }, [
+        acceptedFileEntries
+    ]);
+    react.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: domUtils.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: domUtils.buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled: triggerDisabled,
+            onClick: openFilePicker
+        }),
+        hiddenInputProps: domUtils.inputProps({
+            type: "file",
+            name,
+            accept: acceptString,
+            multiple,
+            disabled,
+            "aria-required": domUtils.ariaAttr(required),
+            tabIndex: -1,
+            style: domUtils.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] = react.useState(false);
+    const overlayRef = react.useCallback((node)=>{
+        setIsOverlayRendered(!!node);
+    }, []);
+    // Image blob URL management
+    const [imageSrc, setImageSrc] = react.useState();
+    react.useEffect(()=>{
+        if (acceptType !== "image") return;
+        if (!fileEntry.file) return;
+        return createFileUrl(fileEntry.file, setImageSrc);
+    }, [
+        fileEntry.file,
+        createFileUrl,
+        acceptType
+    ]);
+    const overlayStateProps = domUtils.elementProps({
+        "data-has-overlay": domUtils.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: domUtils.buttonProps({
+            type: "button",
+            onClick: ()=>{
+                removeFileEntry(fileEntry.id);
+            }
+        })
+    };
+}
+
+const FileUploadRoot = /*#__PURE__*/ react.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__*/ jsxRuntime.jsx(FileUploadProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+            ref: ref,
+            ...api.stateProps,
+            ...otherProps
+        })
+    });
+});
+FileUploadRoot.displayName = "FileUploadRoot";
+const FileUploadDropzone = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { dropzoneRef, dropzoneProps } = useFileUploadContext();
+    const mergedProps = domUtils.mergeProps(dropzoneProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: reactComposeRefs.composeRefs(dropzoneRef, ref),
+        ...mergedProps
+    });
+});
+FileUploadDropzone.displayName = "FileUploadDropzone";
+const FileUploadTrigger = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { triggerProps } = useFileUploadContext();
+    const mergedProps = domUtils.mergeProps(triggerProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadTrigger.displayName = "FileUploadTrigger";
+const FileUploadHiddenInput = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { inputRef, hiddenInputProps } = useFileUploadContext();
+    const mergedProps = domUtils.mergeProps(hiddenInputProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.input, {
+        ref: reactComposeRefs.composeRefs(inputRef, ref),
+        ...mergedProps
+    });
+});
+FileUploadHiddenInput.displayName = "FileUploadHiddenInput";
+const FileUploadItemName = /*#__PURE__*/ react.forwardRef(({ children, ...props }, ref)=>{
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+    const mergedProps = domUtils.mergeProps(stateProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
+        ref: ref,
+        ...mergedProps,
+        children: children ?? file.name
+    });
+});
+FileUploadItemName.displayName = "FileUploadItemName";
+const FileUploadItemSize = /*#__PURE__*/ react.forwardRef(({ children, formatBytes, ...props }, ref)=>{
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+    const mergedProps = domUtils.mergeProps(stateProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
+        ref: ref,
+        ...mergedProps,
+        children: children ?? formatBytes(file.size)
+    });
+});
+FileUploadItemSize.displayName = "FileUploadItemSize";
+const FileUploadItemRemoveButton = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { removeButtonProps } = useFileUploadItemContext();
+    const mergedProps = domUtils.mergeProps(removeButtonProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemRemoveButton.displayName = "FileUploadItemRemoveButton";
+const FileUploadItemImage = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const ctx = useFileUploadItemContext();
+    if (!("imageProps" in ctx)) return null;
+    const mergedProps = domUtils.mergeProps(ctx.imageProps ?? {}, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.img, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemImage.displayName = "FileUploadItemImage";
+const FileUploadItemThumbnail = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { thumbnailProps } = useFileUploadItemContext();
+    const mergedProps = domUtils.mergeProps(thumbnailProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
+const FileUploadItemMetadata = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { metadataProps } = useFileUploadItemContext();
+    const mergedProps = domUtils.mergeProps(metadataProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
+const FileUploadItemBackdrop = /*#__PURE__*/ react.forwardRef(({ status, children, ...props }, ref)=>{
+    const entry = useFileUploadItemContext();
+    if (entry.status !== status) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: reactComposeRefs.composeRefs(entry.refs.overlay, ref),
+        ...props,
+        children: typeof children === "function" ? children(entry) : children
+    });
+});
+FileUploadItemBackdrop.displayName = "FileUploadItemBackdrop";
+const FileUploadContext = (props)=>{
+    return props.children(useFileUploadContext());
+};
+
+exports.FileUploadContext = FileUploadContext;
+exports.FileUploadDropzone = FileUploadDropzone;
+exports.FileUploadHiddenInput = FileUploadHiddenInput;
+exports.FileUploadItemBackdrop = FileUploadItemBackdrop;
+exports.FileUploadItemImage = FileUploadItemImage;
+exports.FileUploadItemMetadata = FileUploadItemMetadata;
+exports.FileUploadItemName = FileUploadItemName;
+exports.FileUploadItemProvider = FileUploadItemProvider;
+exports.FileUploadItemRemoveButton = FileUploadItemRemoveButton;
+exports.FileUploadItemSize = FileUploadItemSize;
+exports.FileUploadItemThumbnail = FileUploadItemThumbnail;
+exports.FileUploadRoot = FileUploadRoot;
+exports.FileUploadTrigger = FileUploadTrigger;
+exports.useFileUpload = useFileUpload;
+exports.useFileUploadContext = useFileUploadContext;
+exports.useFileUploadItem = useFileUploadItem;
+exports.useFileUploadItemContext = useFileUploadItemContext;